Trailhead: redesigning Payani from the icon out

← Back to blog

The first version of Payani was born out of a natural need to address what a real trip needed, one functionality at a time. By the time the functionalities increased to what we have now, the design cracks have started to show. While version 1.3 is still very usable in my opinion, it does not take into account how a typical user will experience her journey.

Six Settings sections. A Today screen with a tab switcher bolted onto it. Five different accent colors depending on which part of the app you happened to be in. Nothing was broken, exactly. It just didn't feel like one seamless expereince anymore.

As I continued to add functionalities into a version 1.4 (which I eventually never published), it was clear that a redesign was required.

Starting from the icon

The redesign didn't start with a mood board. It started with the app icon already sitting on everyone's home screen — a gold compass arch over a forest-green hillside. Instead of picking a new palette from scratch, I considered the icon's own colors and built outward from there: forest green for anything you do, compass gold for whatever's happening right now, a warm parchment ground instead of stark white. The theme needed a name early, just to talk about it. It became Trailhead.

Aside, i would love to have your opinions on the logo. I feel it's imperfection is somehow its main draw :)

The new design

First of all, I re-imagined Payani as an app that users use before and DURING a trip. That brought about the concept of a brand new Today screen, where the user will have access to what he or she needs NOW, and for the rest of the day. The Today screen is by no means complete, but i feel it now has a solid starting to add new functionalities that matter.

The second main design concept was to take into consideration that an average will be handling the planning for more than one trip at a time. In fact, a minority of users might even be planning multiple concurrent trips, some for themselves and others for their family members. This leads to a natural need for a consolidated calendar where the user can make decisions on multiple trips at one go.

The final main consideration was for the Trip assistant. The first versions of the Trip assistant handled basic tasks on a trip-specific basis. The redesign was effectively to elevate the Trip assistant to app-level, where it can have a view of all trips and be able to support the user's queries and actions across all trips from one UI.

Six phases

The initial rollout plan to deliver the functionality over 3 drops was quickly replaced with the ambition to have one delivery with everything in place. Better a longer wait for a complete product than a patchwork of incremental functionality that might in fact cause more confusion to the dear user.

Work went in a fixed order, each phase building on the last. First, the theme itself — new color roles, new fonts (Fraunces for headings, DM Sans for everything else), and a sweep through the entire codebase replacing around 130 hard-coded colors with the new tokens. Then four-tab navigation, retiring the old house-button pattern in favor of Today, Calendar, Trips, and Settings as peers. Then the Today screen itself, rebuilt down to two sections — "Happening now" and "Later today" — with its core agenda logic unit-tested before a single pixel of UI was touched, Payani's first real unit tests. Then trip cards and the trip view went photo-first. The last phase was a full review pass: safe-area insets on Android, updated end-to-end test flows, the usual pre-release checklist.

After "done"

A redesign doesn't stop mattering once it ships — it just starts getting used for real, which is where the next round of changes came from. Trips gained support for multi-city itineraries with their own per-stop dates, so a London-then-Rome trip resolves the right time zone, weather, and currency for whichever leg you're actually on. The trip assistant became one assistant reachable from anywhere, instead of a separate instance per trip. The Calendar tab picked up a trip filter and pinch-to-zoom. None of that was in the original brief — it's what showed up only after Trailhead was something people could actually use every day.

Looking forward

I truly feel that I have now a much more usable version that is geared towards holistic user journeys rather than functionalities. Do take if for a spin. I would love to hear your feedback and suggestions.

~ Muralee ~