Large product hero for the Traflo mobile experience, replacing visuals with a neutral mock block.
Traflo was built around a simple idea: a finance app should reduce stress, not create more of it.
We designed the core mobile experience so balances, transactions, goals, and savings immediately answer what changed, why it matters, and what a person can do next.
Banking products usually fail in the gaps between data and meaning. Numbers appear, but confidence does not.
Our task was to make financial information readable under pressure and keep edge states as considered as the happy path.
Competitive teardown, home screen directions, and information hierarchy explorations.
Clickable flows for transfers, goals, and mid-month warnings.
AI synthesized finance UX patterns and failure points, while designers reduced the product to three crucial moments: balance, transaction, and goal clarity.
We compared home screen structures, transaction-feed logic, and savings flows to find the calmest rhythm for everyday use.
Core scenarios became clickable early, including empty balances, failed payments, budget warnings, and other confidence-breaking states.
The final direction became a reusable system of components, states, and handoff rules that engineering could build from cleanly.
The product opens with context, not just a number, so a user can read their position before digging deeper.
Home, overview, and next-action states.
Every transaction was designed to explain what happened, where it happened, and how it affects the bigger monthly picture.
Feed states, detail views, and breakdown patterns.
Savings and progress features remain in the main product rhythm, making momentum visible instead of tucked away.
Savings goals, transfers, and milestone feedback states.
We packaged the approved UX into reusable components, state logic, tokens, and handoff documentation, so new screens can extend the same product language instead of reinventing it.
Components, states, motion, and handoff structure.
Token rules, annotations, and engineering notes.
We help teams reduce confusion, validate faster, and ship cleaner systems with a senior design process amplified by AI.
