Live Products
UBS Plan Mode
UX Research · Product Design
🏆 Selected first among 6 teams by the UBS Design team
Brief
Simplify UBS Mobile
Simplify UBS Mobile with a focus on financial education, creating less complex, more intuitive, impactful digital experiences, without reducing capabilities.
The existing key4 Mobile app is feature-rich but finance-first, built for users who already know what they're doing. The brief asked us to make it accessible to users without a finance background, without stripping the depth that experienced users rely on.
Research
Mapping the user landscape
We ran semi-structured interviews and built a 2×2 segmentation model: financial literacy (low → high) against planning engagement (reactive → proactive), to understand how different users relate to their finances.
Key insights
- Users aren't static segments. People move between quadrants depending on life stage, income, and stress level. The product had to adapt, not categorise.
- Absence of progress kills motivation. Users saw transactions but had no way to tell if they were on track. The ledger gave data with no direction.
- Financial advice feels institutional. Generic nudges and product suggestions read as marketing, not guidance. Users dismissed them without reading.
- The technical risk-time framework lacks the human factor. Standard investment framing (risk tolerance, time horizon) doesn't map to how people actually think about money and their lives.
Problem Statement
How might we turn banking into an adaptive space?
HMW
How might we turn banking into an adaptive space that scales with user expertise, supporting anxious beginners without limiting confident investors?
Design Process
From opportunities to tested decisions
Ideation
Three opportunities emerged from research:
Opportunities
- Progressive disclosure. Show the right depth at the right moment, not everything at once.
- Contextual guidance. Surface relevant insights from the user's own data, not generic advice.
- Visible progress. Give users a sense of trajectory, not just a snapshot of their current balance.
We prototyped five candidate features: a dual-mode home (Act / Plan toggle), an Insight Hub for personalised nudges, Saving Goals with visual progress, a Product Pathway for contextual product discovery, and a Learn Mode for financial literacy.
Lo-Fi Prototyping
Hi-Fi A/B Testing
The Act / Plan toggle was the highest-risk concept: it reorganises the entire home screen. We tested three layout variants: a tab bar at the top, a persistent floating pill, and an inline card switch. The floating pill tested best for discoverability without interrupting the home screen hierarchy.
Key Design Decisions
What we cut or changed
- Learn Mode: cut. Users wanted to understand their own data, not take a course. The Insight Hub absorbed this need by surfacing contextual explanations inline.
- Toggle: repositioned. Moved from the navigation bar to a floating pill after testing showed it performed better for discoverability in context.
- Product Pathway: retained. Initial concern that it felt like upselling. Reframed around life moments rather than product names, which tested significantly better.
- Onboarding: removed. A dedicated onboarding flow added friction without adding value. The behavioural profile quiz was embedded into the Insight Hub instead.
Solution
Dual-mode home with four key features
Dual-Mode Home
The home screen has two modes, toggled by a floating pill:
Act / Plan
- Act mode: transactional. The familiar view: balances, recent transactions, quick actions. For users who know what they need to do.
- Plan mode: deliberate. The home reorganises around goals, savings progress, and forward-looking insights. Gradient-accented cards signal a different register, same data with a different frame.
Insight Hub
A personalised feed of nudges, pattern observations, and product suggestions, written in plain language and surfaced at the right moment.
Three components
- Behavioural profile quiz (6 questions): captures financial personality and goals at setup, used to personalise all Insight Hub content.
- Personalised guidance: contextual nudges derived from the user's actual transaction data, not generic marketing copy.
- Financial trackers: spending patterns, category trends, and progress metrics surfaced as readable summaries, not raw data.
Saving Goals
Visual savings goals with progress rings, quick-transfer shortcuts, and icon-based goal categories, designed to make abstract savings targets feel tangible and reachable.
Key behaviours
- Progress rings: circular progress visualisation per goal, always visible on the home screen in Plan mode
- Quick-transfer: one-tap transfer to a goal from the home screen, reducing the steps between intention and action
- Icon-based goals: categorised by life moment (holiday, home, emergency fund) rather than financial product type
Product Pathway
When the app detects a relevant pattern in the user's data, it surfaces a product suggestion framed around a life moment, not a product name. Four journeys:
Four journeys
- Smart Save: for users building an emergency fund or short-term goal
- Plan Ahead: for users with a mid-term savings target
- Grow Your Wealth: for users ready to explore investment products
- Mortgage & Loans: for users with major life purchases in view
Design System
Glassmorphism within UBS brand guardrails
UBS Red is a strong brand colour that creates tension with typical finance palettes. The system uses glassmorphism (frosted-glass cards over gradient backgrounds), keeping UBS Red as the primary accent while adding depth and softness that makes the interface feel less institutional.
Tokens
- Primary: UBS Red
#E60000 - Typography: Inter (variable), system-aligned for legibility at small sizes
- Surface treatment: Glassmorphism (frosted blur + gradient overlay + reduced-opacity cards)
- Dark base: deep navy backgrounds to maintain contrast with UBS Red in Plan mode
Outcome
Selected first among six teams
Result
UBS Plan Mode was selected first by the UBS Design jury from six competing teams. The jury cited the research rigour, A/B testing methodology, and the coherence of the dual-mode concept as the strongest differentiators.
Reflection
What worked, what I'd change, and next steps
What worked
The glassmorphism visual language was a strong call: it let us use UBS Red as an accent without it dominating the screen, and it read as premium without feeling cold. Framing the design system around fintech trust (not just aesthetics) helped the jury see the rationale behind every surface decision.
What I'd change
The floating pill toggle placed well in testing, but its exact position on screen was decided late. I'd push that decision earlier, as it affects scroll behaviour, content hierarchy, and safe area handling. I'd also run cross-platform validation earlier: the prototype was iOS-only, and several design decisions (navigation patterns, sheet behaviour) would need to be revisited for Android.
Next steps
Validate the core features (particularly the Insight Hub quiz and the Product Pathway framing) with real UBS users, not just design-challenge participants. The research gave us strong directional signal, but the behavioural data would need to come from live usage to confirm the feature set is right.