HSBC Mobile Banking Redesign
Project Type:
End to end app (not implemented)
My Role:
Sole UX Designer
Tools:
Figma, Miro
Deliverables:
High Fidelity Designs, Usability Testings
Duration:
1 weeks
Project Summary
This project focused on redesigning the HSBC mobile app to address user frustrations with navigation, outdated design, and missing modern features. The goal was to simplify workflows, improve usability, and introduce tools like Saving Pots, Split Bill, and Transaction Breakdown to better meet user needs.
Users found the app overly complicated, lacking transparency, and behind competitors like Monzo and Revolut in features and design.
A minimalist, user-centered redesign that prioritises ease of use, personalisation, and quick access to essential features.
Metrics were evaluated through user testing of the interactive prototype, measuring task completion rates, time on task, and overall user satisfaction. Results showed significant improvements, with a 94% task completion rate and an average satisfaction score of 4.8/5.
Discover
Define
Develop
Deliver
DISCOVER
The Problem
HSBC's mobile banking app is increasingly seen as outdated compared to competitors like Monzo, Revolut, and Starling. Everyday tasks like paying bills or transferring money take too many steps, and the app lacks the personal touches or modern features that today’s customers expect. Users want a banking app that’s simple, intuitive, and designed with their needs in mind
Key Issues Identified:
-
Outdated Design and User Experience : HSBC’s mobile app is perceived as outdated, with a design and functionality that lags behind modern competitors like Monzo, Revolut, and Starling. Users feel frustrated because of a lack of innovation and streamlined interfaces, which are now standard in competing apps.
-
Lack of Personalisation: Lacks personalised features such as spending insights, tailored financial advice, or customised notifications.
-
Absence of Modern Features: The app does not offer features now seen as standard, such as split payments, virtual cards,
-
Poor Competitiveness Against Neobanks: HSBC risks losing its tech-savvy customer base, especially younger users, who prioritise ease of use and cutting-edge features.
Understanding The Users
The typical user of HSBC’s mobile banking app is someone who wants their financial tasks to be quick and hassle-free. They’re busy, juggling work, family, or travel, and they rely on the app to help them stay on top of their money without wasting time. They want to check their balance in a couple of taps, set up payments easily, or track their spending without having to dig through confusing menus.
However, they often face frustrations with outdated designs, cluttered interfaces, and a lack of advanced features like virtual cards or detailed spending insights. Whether they’re busy professionals, family managers, or frequent traveler's, these users expect an intuitive, personalised, and feature-rich experience to meet their financial needs effortlessly.
User Pain Points
Lack of advanced features
Missing modern functionalities like virtual cards, real-time spending insights, split payments, budgeting and transaction break down.
Lack of advanced features
Users lack tools to help them better manage their finances, such as spending categorisation, tailored financial advice, or clear summaries of transactions and trends.
Outdated Design
Users struggle to find features quickly and expect a more modern, streamlined experience..
Our Competitors
I analysed competitors’ key features, strengths, weaknesses, and opportunities to better understand the current market landscape. This analysis guided my preparation for user interviews by highlighting common user expectations and pain points, such as the need for reliable service, customisation options, and transaction tracking. By identifying these areas, I was able to craft targeted questions and gain a clearer picture of users’ experiences and frustrations with existing mobile banking apps, enabling me to focus on improvements.
Competitive analysis showing key strengths and weaknesses.
Competitors like Starling, Monzo, Revolut, and Wise are redefining user expectations for banking apps. If HSBC does not address these key issues, it risks losing users to these innovative platforms that offer the speed, features, and personalisation modern customers demand. Solving these pain points is critical to staying competitive in the digital banking space.
Analysing the User Surveys and Interviews
Survey outcome
I started by running surveys to get a general sense of how people feel about using the HSBC mobile app. The responses gave me some helpful insights, but they were often too broad and didn’t dig into the real frustrations or motivations behind their feedback.
To get a clearer picture, I decided to have one-on-one conversations with people who fit key user personas: a tech-savvy professional, a family manager, and a frequent traveler. Talking directly to users let me ask more specific questions and really listen to their stories about how they use the app, what challenges they face, and what they’d love to see improved. These interviews gave me a much deeper understanding of their routines and expectations, which helped shape my ideas for how the app could better meet their needs.
DEFINE
The Goal
Simply the design
-
Redesign the app with a clean, minimalist interface that prioritizes clarity and ease of navigation.
-
Reduce visual clutter and focus on key user actions, such as checking balances, making transfers, and tracking spending.
Enhance user with helpful features
-
Introduce features like spending insights, monthly reports, and budgeting tools to help users stay on top of their finances.
-
Offer real-time notifications and reminders tailored to user activity, like alerting them when a payment is due or a budget is exceeded.
Add saving pots
-
Allow users to create and manage "saving pots" for specific goals, such as vacations, emergency funds, or big purchases.
Insights To HMV
This approach proved to be an effective way to generate ideas because HMW questions are inherently open-ended, enabling me to think broadly and explore multiple angles of the problem. By framing challenges as “How Might We” questions, I shifted my focus from the constraints of the problem to the possibilities for solutions. This reframing allowed me to see user pain points not just as issues to fix but as opportunities for improvement and innovation.
Overall, the process of using HMWs supported a solution-oriented mindset and enabled me to develop a range of ideas that addressed user needs from various perspectives, resulting in a richer pool of potential solutions to test and refine.
DEVELOPE
Design Process
Wireframes & Prototyping
-
Created wireframes focusing on a streamlined interface that highlights intuitive navigation and easy meal customisation.
-
Prototyped the real-time tracking system and quick reorder feature.
User Testing
-
Tested prototypes with a group of target users to gather feedback on usability, navigation, and overall experience.
-
Iterated on the design to address pain points and enhance features based on user input.
Site Map
Wireframes
During the wireframe process, I approached the design with an open mind, allowing creativity to guide the initial structure. I sketched out ideas as they came to me, focusing on intuitive navigation and clear functionality. This exploratory approach helped me quickly visualise potential layouts and features without overthinking details, ensuring the design remained user-focused and flexible for iterations based on feedback.
Design Decisions
Current HSBC design
Redesign
The redesign HSBC mobile app introduces several improvements over the previous version.
Streamlined the navigation
Redesign
-
Key actions like "Send," "Transfer," and "Card" "Details" are prominently displayed with clear, intuitive icons, allowing users to perform tasks directly from the home screen.
-
Can see all your cards at once and the balance, such as credit and debit
Previous Design
-
Users had to navigate through multiple menus to access these basic functionalities, making the process slower
Transaction summary and insights
Redesign
-
Introduces a transaction breakdown "Expenses in December" with a visual spending chart, helping users quickly understand their spending patterns.
Previous Design
-
Did not provide spending insights or visual summaries, requiring users to manually calculate trends.
Modern and Clean Aesthetic
Redesign
-
Adopts a modern, minimalistic design and clean layouts, user can see all the key information as soon as they open the app
Previous Design
-
Felt more corporate and outdated, with dense menus and less focus on usability. Example, when you log into the home page, the services take up half the page. Most users skip do not use them on the daily.
Personalisation and Engagement
Redesign
-
Displays transaction categories, enhancing engagement and encouraging users to manage their finances more proactively.
Previous Design
-
Lacked categorisation or personalised insights, offering a more static experience.
Dedicated service section
Redesign
-
Services like loans, credit cards, investments, and savings now have their own section in the bottom navigation bar.
-
This ensures users who frequently access these features can find them quickly without navigating through multiple layers.
Previous Design
-
Took up half the screen which made users not able to see their transactions right away, which was not very user friendly.
Conclusion
The redesign significantly improves usability by prioritisings key actions, modernising the look and feel, and introducing tools like spending insights to engage users better. It addresses key pain points from the previous design, such as difficult navigation and a lack of visual clarity, while aligning the app closer to competitors like Monzo and Revolut.
Design System
New Features
Card Details
Quick Access to Card Details
-
Users can easily copy their card details for online purchases without needing the physical card.
Card Management Options
-
Users can lock/unlock their card instantly for security purposes, providing peace of mind if they misplace their card.
Enhanced Convenience
-
The ability to add the card to Apple Wallet.
-
The Show PIN feature eliminates the need to contact support.
Transaction Breakdown
Visual spending insights
-
A chart to visually represents expenses by category (e.g., groceries, bills, shopping), offering users a quick snapshot of their spending habits.
Customisable Filters
-
Users can filter by month or category to drill down into specific spending areas, such as "Eat Out" or "Subscriptions."
Budgeting Integration
-
The option to set budgets for specific categories encourages proactive financial management, aligning with modern user expectations.
Saving Pots
Goal-Based Savings
-
Users can create personalised saving goals
Visual Progress Tracking
-
Each pot includes a visual progress bar, showing how much has been saved out of the target amount. This keeps users motivated as they see their progress in real-time.
Dedicated Savings Section
-
A dedicated "Saving Accounts" section in the bottom navigation ensures easy access and encourages frequent use of this feature.
Split Bill Feature
Convenience for Group Payments
-
Users can quickly request money from friends and family, specifying the amount and adding a custom note.
Seamless Transaction Integration
-
The feature is integrated directly into transaction details, allowing users to split a bill right from the expense screen.
Testing The Prototype
To evaluate the usability, functionality, and overall user satisfaction of the new features introduced in the HSBC mobile app redesign:
-
New Minimal Design
-
Card Details
-
Transaction Breakdown
-
Saving Pots
Key Findings
1. New Design
Key Metrics
Feedback
-
Satisfaction Score: 4.8
-
Participants found the immediate display of transactions helpful for quickly reviewing recent activity.
-
The minimalist layout allowed for a clean and uncluttered view, making information easy to digest.
-
Users appreciated the simplicity of accessing their most-used features without multiple taps.
2. Card Details Feature
Key Metrics
-
Task Completion Rate: 100%
-
Average Time to Lock/Unlock Card: 8 seconds
-
Satisfaction Score: 4.8
Feedback
-
"It’s so convenient to have my card details and lock/unlock options in one place."
-
"I don’t need to dig through menus or contact support to block my card anymore."
3. Transaction Breakdown Feature
Key Metrics
Feedback
-
Task Completion Rate: 92%
-
Average Time to Filter Transactions by Category: 12 seconds
-
Satisfaction Score: 4.6
-
"The spending chart is super helpful—I can see exactly where my money is going."
-
"I love the ability to filter by category. It makes budgeting so much easier."
4. Saving Pots Feature
Key Metrics
-
Task Completion Rate: 91%
-
Average Time to Create a New Pot: 15 seconds
-
Satisfaction Score: 4.7
Feedback
-
"The progress bar really motivates me to save for my goals."
-
"Being able to customise pots with images makes saving feel personal."
Overall
Positive Feedback
-
Simplicity and Speed: The minimalist layout was widely praised for its ability to display balances and recent transactions immediately upon opening the app, reducing the need for navigation.
-
Improved Efficiency: The focus on showing the most relevant information upfront (transactions and balances) significantly improved the speed of performing day-to-day tasks.
-
Clean and Modern Aesthetic: Users appreciated the uncluttered design
Opportunities To Improve
-
Introducing customisable dashboards so users can prioritise the features they find most valuable.
Prototype Testing Results
-
The design scored highly, with an average user satisfaction rating of 4.8 out of 5.
-
90% of participants agreed that the design improved the overall app experience compared to previous versions.
-
Users described it as "straightforward," "intuitive," and "focused on what matters most."
DELIVER
How The Redesign Address User Issues
Overall Summary
The HSBC app redesign effectively addressed key user issues by simplifying navigation and introducing modern features. A minimalist home screen now displays balances and transactions upfront, while a bottom navigation bar ensures quick access to essential sections like Services and Saving Accounts.
Features like Saving Pots, Split Bill, and Transaction Breakdown empower users with better financial control and engagement. Real-time updates and card management tools enhance transparency and security, while the modern design improves usability and aesthetics.
Overall, the redesign streamlined workflows, increased satisfaction (4.8/5 average), and closed feature gaps with competitors like Monzo and Revolut.
What I Learned
Sometimes simple is better. By focusing on core user needs, quick navigation, essential features upfront, and clean design. The app became more intuitive and enjoyable to use.
Cramming in too many features can overwhelm users, but a minimalist, purpose-driven approach allows users to engage with the app naturally and efficiently.
Simplicity doesn’t mean lacking functionality; it means delivering the right tools in the most accessible way, which ultimately enhances both usability and satisfaction.