Design a premium mobile banking concept using a dark UI, liquid glass visual language and complete fintech interactions across the core wallet journey.
Case study / Mobile fintech
Designing the behavior behind a polished fintech interface.
WattlePay is a mobile banking concept built to test more than a visual direction. Complete money flows, shared wallet state and a working React prototype make the interface behave as one product.
Product Design
Mobile UX
Fintech
Liquid Glass UI
React Prototype
Product Designer across UI direction, UX flows, visual system, interaction states and prototype behavior.
8 screens, 7 complete flows, shared wallet state, real-time balance updates and reusable React components.
Story
The screen set was not finished until the flows behaved as one product.
The goal was to move beyond a polished screen set and design the behavior behind the interface. Sending money, adding savings, converting currency and reviewing activity all needed to feel connected through shared state.
I treated the visual system as part of the product logic: glass layers communicate hierarchy, accent colors signal action, and financial data stays readable inside a dense dark-mode interface.
01 / Visual System
Dark-mode fintech with a controlled glass hierarchy.
The interface uses a narrow palette built around a dark base, a sharp Wattle accent and selective teal moments for portfolio data. Glass surfaces are not decorative: each layer has a hierarchy role.
- Defined accent, base, chart and supporting color roles.
- Used glass layers for primary containers, lists and navigation.
- Kept financial data high-contrast and easy to scan.
02 / UX Flows
A flow only works when the next state makes sense.
The prototype covers home, cards, transfer, add money, convert, savings, invest and settings. The transfer flow includes contact selection, amount entry, optional note, review, confirmation and receipt.
- Designed 7 connected flows with no dead-end screens.
- Used real-time state so balances, goals and activity update together.
- Included receipts, bank details, transaction IDs and save/share actions.
03 / UI Details
Visual polish had to support trust and readability.
The case study includes wallet-style card stacks, floating glass navigation, interactive toggles and SVG chart components. Each detail supports usability, hierarchy or product confidence.
- Card stack with active-card elevation and visual feedback.
- Floating tab bar with blur, inset shadow and active states.
- Toggle, chart and goal components built as reusable patterns.
Layered depth
Translucent panels, blur and edge highlights create hierarchy without overpowering financial content.
Real behavior
Balances, transactions and savings goals update through shared state rather than static mock screens.
Readable finance UI
Large amounts, tabular numbers, labels and metadata are treated as core UI decisions.
Useful feedback
Animation supports card states, transfers, navigation and confirmation moments without becoming decoration.
04 / Prototype
Use code to test the product logic.
The prototype was built with React, Tailwind CSS and SVG components. WalletProvider manages balances, transactions and savings goals, so product behavior stays consistent across screens.
- React Context for shared wallet state.
- SVG-first charts, progress rings and interface details.
- Clipboard actions, generated transaction IDs and timestamped activity.
