All work
UX/UI Design FinTech Speculative Concept

HSBC — Personal Finance Feature

A speculative UX design project: designing a new personal budgeting and spending insights feature for the HSBC mobile banking app, using the full design thinking methodology.

My Role
Solo UX/UI Designer
Duration
2 weeks
Type
Speculative / Capstone
Deliverable
Figma Prototype
HSBC personal finance feature screens

The brief

This was a speculative design project completed as part of a product design programme. The brief: design a new feature for an existing major banking app that addresses a real user need — using the full double diamond design thinking process.

I chose HSBC because of its large existing user base in Hong Kong and the observed gap in personal finance management tools within its mobile app at the time. The goal was to design a budgeting and spending insights feature that felt native to HSBC's existing design language.

Understanding the user

I conducted 8 user interviews with HSBC customers aged 25–40 in Hong Kong, focusing on their current money management behaviours and pain points with existing banking apps.

Key findings

Most users tracked spending via a separate app (or not at all). They wanted to see insights within their banking app — not have to export data. End-of-month surprises were a common frustration.

Persona: Ray

29-year-old mid-level professional. Earns a consistent salary, has clear savings goals, but lacks visibility into his spending patterns. Uses HSBC for salary account. Doesn't use the app beyond transfers.

From the interviews, I synthesised findings using affinity mapping, then defined the core problem statement using HMW (How Might We) questions:

"How might we help HSBC users understand their spending patterns so they can make better financial decisions — without leaving the app?"

From insight to prototype

01
Define & Ideate
Generated 40+ ideas through solo ideation sessions. Voted on the most viable, desirable, and feasible concepts. Narrowed to a category-based budget dashboard with proactive alerts.
02
Low-fidelity Wireframes
Sketched 3 alternative layouts for the budget dashboard, spending breakdown, and transaction tagging flow. Tested these paper prototypes with 4 users to identify the clearest information hierarchy.
03
High-fidelity in Figma
Designed within HSBC's existing visual language (red accent, clean white surfaces) to make the new feature feel native. Created a clickable prototype covering the full budget-setting and review flow.
04
Usability Testing & Iteration
Ran 4 moderated usability tests. Key finding: the category selection step had too many options and confused users. Simplified to a top-6 categories with a "more" overflow — completion rate improved from 60% to 95%.

What was designed

Budget Dashboard
Monthly budget overview with progress bars per category. Visual-first approach — users can see at a glance where they stand without reading numbers.
Spending Insights
Month-on-month spending comparison by category. Surfaced automatically — no need to configure reports. Highlights unusual spikes.
Smart Alerts
Proactive notifications when a budget category reaches 80%. Push notification with one-tap access to the spending breakdown.
Transaction Tagging
Auto-categorisation of transactions with the ability to re-tag. Reduces manual effort while giving users control over their data.

What I learned

Working within an existing design system — rather than building from scratch — taught me to balance creative problem-solving with constraint. HSBC's brand language is conservative for good reason: it builds trust. The challenge was making the new feature feel innovative without feeling foreign.

The biggest design lesson was around information hierarchy in financial data. Users are anxiety-prone when it comes to money. The most effective designs reduced visual noise aggressively and used progressive disclosure — show the summary first, depth on demand.

The usability testing cycle was the most valuable part of this project. The jump from 60% to 95% task completion from a single layout change was a clear reminder that real users will always surprise you.

Next project
FantasyPad — Web3 Launchpad
View case study