Design Challenge · Aither Global Banking
Cards Hub —
Overview Component
An exploration of how interface hierarchy shapes operational clarity in fintech workflows.
Role
Product Designer
Timeline
1-day sprint
Focus
Hierarchy · Fintech UX · Responsive Systems
Tools
Figma · Claude Sonnet 4.6
The Brief
The Challenge
Aither is a global banking platform used by accountants managing employee cards, spending limits, and payments across the organization. The design prompt was precise: build the overview component at the top of the Cards Hub page — the first thing an accountant sees when they open the module.
The user isn't exploring. They're triaging. They visit this page every workday. What matters isn't discoverability — it's the speed of comprehension.
Same Required Fields
Balance, amount due, due date, autopay status, cadence, account, available limit, credit limit, statement date — identical across all five variants.
Hard Constraints
No graphs as focal points. No form controls. No card visuals. Levro design system: Inter, #3333FF primary, semantic color tokens.
Five Structural Directions
Not visual restyles of the same layout — five genuinely different arguments about what accountants need to see first.
Methodology
Designing Around Hierarchy
I started by establishing a hierarchy argument before touching layout. The question wasn't “how should this look?” — it was “what does an accountant need to know, and in what order?”
Balance
The financial state
Payment / Due Date
The immediate action
Autopay Status
The safety net
Limits & Context
The operating boundary
1
Density as a Feature
Expert users don't need breathing room — they need speed. A compressed, information-dense layout respects the accountant's time and domain expertise.
2
Scanning, Not Reading
Accountants scan left-to-right across the overview. Spatial position communicates priority as powerfully as type size.
3
State-Aware Design
When available limit is critically low, the layout should respond — not just a badge, but a structural change that makes the risk unmissable.
Interactive Exploration
Five Structural Directions
Desktop
High-Density Enterprise Row
All fields in a single horizontal line. CTA pinned right. Zero wasted vertical space — designed for experienced accountants who scan left-to-right and visit daily.
Hierarchy
Why high-density
Experienced accountants don't need breathing room — they need speed. A single row lets them triage in one left-to-right pass.
Strongest hierarchy
Spatial order mirrors cognitive priority: left = most important, right = least. The CTA breaks the pattern deliberately to signal action.
Mobile — Responsive
Recommendation
Why D1 Is Recommended
Spatial order = cognitive priority — balance leads left, CTA closes right. The sequence mirrors how an experienced accountant processes the page.
Density as a signal — the compressed single-row format communicates 'this is a power tool for experts,' not a dashboard for occasional visitors.
CTA position = workflow assumption — placing Pay after all data means the user reads before acting. This reduces payment errors in high-stakes fintech contexts.
D2 becomes the right choice when available-limit risk is a frequent condition for the team. The banner's structural dominance ensures it's never missed.
D1 Overview Component
Responsive Design
Responsive System
Each variant's mobile layout preserves the same hierarchy decisions while converting to a single-column structure. The D1 mobile collapses the four-column information strip into a compact 3-cell row, maintaining density while accommodating touch targets.
Desktop
Mobile — 375px
Workflow
AI-Assisted Workflow
I used Claude Sonnet 4.6 to rapidly generate structural variants, allowing me to explore five distinct hierarchy models in a single sprint. The goal wasn't to have AI make design decisions — it was to compress the prototyping phase so I could spend more time on the decisions that matter: hierarchy rationale, responsiveness logic, and tradeoff analysis.
This reflects how I believe product designers should work with AI — as a leverage tool for speed, not a replacement for design thinking.
Takeaway
Reflection
This challenge reinforced that interface hierarchy isn't a visual preference — it's a workflow argument. D1, D2, and D3 each make a different bet about what state the accountant is in when they open the page. The strongest solution isn't the one that looks best — it's the one whose hierarchy assumption matches the team's actual daily workflow.