Design exploration · phone navigation · 30 Sep 2026

Phone navigation: what good could look like

Three ways to structure the main navigation on phones, each rendered over the real dashboard at 390px in three states, next to today's app and the Figma proposal. All three keep the account on the right, where it is today and on desktop, and all show the account's name, not just initials.

Recommendation: B, bottom tabs. It puts the tasks people come to a phone for one labelled tap away and makes Transfer the obvious primary action. If a tab bar is too big a step right now, ship A first: it shares the account sheet, chip and menu contents, so B can follow without rework.

Today and the Figma proposal

Today the CT mark doubles as the menu button, which round 2 already flagged. The Figma fixes that with a real menu icon, but moves the account to the left, puts the menu on the right, and adds search and rewards as icon-only buttons.

Today: the CT mark is the menu button; the account sits on the right
Today: the drawer opens from the left
Figma header at 320px: logo, account avatar, search, rewards, bell, menu
Figma: the avatar on the left opens the account menu
Figma: search opens full width
Figma, earlier idea: one panel with account, navigation and settings

What the Figma gets right

  • A real menu icon instead of the logo.
  • A separate account menu for switching, settings and log out.
  • The bell and its count back in the header on phones.

What I'd change

  • Account-left, menu-right is the reverse of desktop and of today, so the same things swap sides with the screen size.
  • Initials alone don't say which company you're acting for. "CT Ltd" and "CT Corpay" become CT and CC.
  • Five icon-only buttons at 320px, three without labels people can guess: rewards, search, menu.
  • Refer & Earn takes a top-level slot that core tasks need more.

What good looks like

The principles behind the three options.

  1. Keep the same model at every sizeNavigation on the left or bottom, account top-right, as on desktop.
  2. Always name the accountPayments go out from a company. Show which one, in words.
  3. Top tasks one tap awayTransfer, History and Recipients shouldn't hide behind a menu.
  4. Few header controls, all obviousBell with count and account. Search and Refer & Earn live inside.
  5. Thumb-sized targets44px minimum, labels where an icon alone is a guess.

Three structures

Closed, menu open and account open at 390px, plus the closed state at 320px. Built from the app's own icon font, brand mark and colours over the live dashboard; counts are sample data (5 notifications, 3 approvals, 4 accounts).

A

Menu left, account right

Smallest change

A real menu button and the CT mark on the left open the drawer from the left, as today. The right side keeps the bell with its count and an account chip showing the name, not just initials. Search, Make a Transfer, Refer & Earn and Help move into the drawer.

A: closed
A: menu open
A: account open
A at 320px
  • Same model as desktop: navigation on the left, account on the right.
  • Fixes the logo-as-menu problem from round 2 with a button that looks like a menu.
  • Reuses today's drawer, so it is mostly header work.
  • Everything except notifications is still behind the menu: History and Recipients take two taps.
  • A hamburger menu is easy to overlook, so the least-used items get even less use.

Effort Small: header and drawer restyle, account chip

B

Bottom tabs, account right

Recommended

Home, History, Transfer, Recipients and More sit in a labelled bar at the bottom, with Transfer as the raised centre action. More opens a sheet with Approvals, Balances, Market Orders, Rate Alerts, search, Refer & Earn and Help. The header keeps just the brand, the bell and the account chip.

B: closed
B: More open
B: account open
B at 320px
  • The things people do most are one labelled tap away, within thumb reach.
  • Make a Transfer is always one tap from any page, not only from the dashboard.
  • The header gets quieter: two controls, both obvious.
  • The account stays top-right, as on desktop, and always shows the name.
  • A new component for phones, including iOS safe-area handling next to Safari's own toolbar.
  • Picking four tabs is a product call (Approvals only matters to some clients), best made with usage data.

Effort Medium: new tab bar and More sheet; the account sheet is shared with A

C

One menu on the right

Best version of menu-right

The header shows which account you are in and keeps the bell and a menu button on the right. One panel from the right holds everything: the account card with Switch, search, Make a Transfer, the destinations, Refer & Earn, Profile settings and Log out. Switch expands the account list in place.

C: closed
C: menu open
C: Switch open
C at 320px
  • One place for everything, and the account you are acting for is always in the header.
  • The menu button sits where a right thumb rests.
  • Switching account takes three taps: menu, Switch, account.
  • The panel comes from the right while the desktop sidebar is on the left, so the menu moves side depending on screen width.
  • A long panel: everything competes for attention in one list.

Effort Small to medium: new panel on the right, account moves into it

Side by side

Taps from the dashboard, with the menu closed.

TodayFigmaA · menu leftB · bottom tabsC · menu right
Transfer History2 (if you find the logo is the menu)2212
Recipients22212
Make a Transfer1 on the dashboard, 2 elsewhere2212
Notifications2 (bell hidden on phones)1111
Switch account22223
Which account am I in?Name in headerInitials onlyName in headerName in headerName in header
Header controls25 plus logo3 plus logo2 plus logo2 plus logo

Open questions