Clarity
/
Spending Page & Navigation Architecture
Q1 — Level 3 Sub-Nav (Mobile)
A
Scrollable Chips
Horizontal pill bar below page tabs. Like Uber Eats categories.
B
Sidebar-in-Content
Vertical sub-nav inside page. Collapses to dropdown on mobile.
C
L3 Replaces L2
Page tabs become a dropdown on mobile. Sub-nav gets the bar.
Q2 — Level 2 Tab Style
A
Underline Tabs
Like Settings page. Clean, scalable to many tabs. URL-persisted.
B
Pill / Segmented
Like Tasks page. Compact toggle feel. Good for 2-3 tabs max.
Q3 — Spending Page Tabs
A
3 Tabs
Transactions | Recurring | Analytics
B
2 Tabs
Transactions | Recurring (analytics inline)
C
4 Tabs
Transactions | Recurring | Analytics | Accounts
Q4 — Personal vs Business
A
Filter Dropdown
All | Personal | Business in the filter bar. Simple, low commitment.
B
Context Toggle
Page-wide segment that switches all data. Stronger separation.
C
Level 3 Sub-Nav
All | Personal | Business as the L3 chip/sub-nav.
All options include a "combined" view for Clarity's AI overview.
Q5 — Mark as Recurring
A
Hover Icon Button
Small repeat icon appears on row hover/tap. Quick toggle.
B
Context Menu
Three-dot menu with "Mark recurring" + other actions.
C
Swipe Action (Mobile)
Swipe left reveals "Recurring" action. Icon on desktop.
Desktop
Mobile
Recurring Tab
Copy