According to Finder, 3 out of 4 British adults were using online banking in 2019. It has also been predicted that by 2021 the number of customers using internet banking will exceed those using high-street branches. It shows us that a lot of people nowadays prefer doing their personal banking online rather than in-person. With this in mind, it is more important than ever to make sure that users have a pleasant experience when they interact with banking apps and websites.
Overview
How did this case study come along?
I started a UX & UI course with LoveCircular just over 8 weeks ago, where we learned a bunch of fundamental design knowledge, from research and ideation techniques to prototyping and accessibility considerations. It was time to put this knowledge into practice with our first case study.
Brief
We were briefed to choose a banking app and to revamp the account dashboard landing page across desktop and mobile to further enhance the user experience for a broad age group.
Challenge
The main goal was to increase retention and further conversion across mobile and desktop devices.
Process
My design process was inspired by the double diamond process, and I adjusted some of the stages and followed this process for this case study:
For my redesign, I decided to go with the HSBC app.
RESEARCH & UNDERSTANDING
User Interviews
In this phase, I tried to focus on understanding what the current pain points were and what new features users would want to see.
I started my research by interviewing my friends and family to, firstly, identify pain points of the current HSBC website and its app, and, secondly, to get ideas for some nice-to-have features.
Essentially, I asked the users two simple questions (with follow-up questions as we were having a conversation):
- What frustrates you about the current desktop and app version?
- If you could do anything within a banking app — what would it be?
Below is the summary of the responses I got:
For reference, here’s what the account dashboard looks like currently:
The Problem
From the data I collected, the main pain point appeared to be the layout of the account page — the placement of key functions (eg transferring money) and the overall look of the page. Therefore, my assumption is that:
Improving the layout and the overall look of the HSBC website will lead to a more user friendly experience, which will ultimately increase the current conversion and retention rates of the HSBC website.
In addition to that, it will be good to introduce a new feature that currently does not exist on the website, which will hopefully attract new users. I had a few suggestions from my users, and I decided to design a currency converter as suggested during my user interviews.
Hence, my solution will consist of 2 parts:
- Revamp the look of the HSBC website
- Design a new feature, desired by current customers
Competitor Analysis
For this part of my research, I looked at how competitor banks design their banking applications. Traditional banks in the UK lay out their main account dashboards in a pretty similar way to one another, so I focused more on challenger banks.
Challenger banks tend to focus more on a user-centric experience of their products and go for a more modern look and feel.
For example:
Therefore, I decided to try my best to incorporate the modern look when redesigning the HSBC website — rounded buttons, shadows, a lot of space, minimalist icons and other.
For the currency converter feature I was inspired by these designs:
It needs to be clear what currency is being converted to what, and I like the idea of incorporating country flags into the design.
IDEATION
Information Architecture
Before I designed the currency converter feature, I needed to think where on the HSBC website it would be placed.
I looked at their Information Architecture, and here’s what I came up with:
I decided to place the currency converter feature within the My Banking > Travel section, because that is when users are looking to use the currency converter - when they plan to go on holiday or travel to another country (responses from my user interviews).
I also tried to keep the 3-click rule in mind when finding a place for this feature — this is an unofficial design rule that suggests that a user of a website should be able to find any information with no more than three mouse clicks.
DEVELOPMENT
Low-fidelity Sketches
Now with the competitor analysis and the Information Architecture in mind, I sketched my initial low-fidelity wireframes on paper. I find sketching by hand super useful at the very initial stages, it really helps me visualise my idea. Here, I wanted to focus on sketching a clean layout for the accounts dashboard, and also envisioned what the currency converter feature will look like.
Visual Design
It was time to turn my low-fidelity sketches into digital high-fidelity wireframes, which I designed in Figma. To guide my UI and my visual design direction I created this UI style guide from the HSBC website:
I took their brand identity colours (the HSBC red for example). For fonts I decided to use Montserrat and Nunito as they are usually perceived as those ‘modern’ looking fonts since we are going for that look. I also sourced minimalist icons (authors are credited at the bottom of the case study).
I also made sure to check the contrast of all text against the background or buttons background complied with WCAG Accessibility Guidelines.
Hi-fidelity wireframes & User Testing
In this phase, I aimed to design high-fidelity wireframes to do initial user testing. I got very valuable feedback from my mentor and also testing my prototype with real users:
- Suggestion to add a search bar to the transaction history
- Suggestion to add the notification bell to the transaction history
- Suggestion to add icons to vendors in transaction history
- Highlight the account, which the user is currently viewing
- Heading sizes and text sizes should be consistent across all pages
- Make buttons more prominent
I implemented the feedback and this was the final redesign of the HSBC website main accounts page:
And here’s the Currency Converter page:
And here is the user journey from the accounts page to the currency converter feature:
And finally the mobile app version of the currency converter page:
Conclusion
This case study was a great learning experience for me - learning and putting into practice important UX and UI practices really helped me improve my design skills, and understand the process of building (well…redesigning in this case) a good user-centred product.
I personally really enjoyed the research stage. I felt like carrying out user interviews helped me understand my user and what they want their experience with the website to be, which was super valuable data for me. Their answers shaped my wireframes and my final design later on. I’m now very excited to try different research and analysis techniques in my future work.
Reflecting back now, here’s some things that could have improved my final piece:
- User testing — for example, I could create a couple of options for the currency converter feature, and then test it via A/B testing to see which one users prefer and which one will lead to higher conversion and retention rates (so it is backed up by data).
- Spend more time on research — it is hard to incorporate every research technique in your project due to time constraints, but one thing I wish I had done is creating a user persona. A persona sums up and clarifies your target audience, and understanding your audience will help make your product even more useful.
Credits
I want to say a huge thank you to my mentor Jayde at LoveCircular for all her support and guidance.
Special thanks to my friends (Hattie and Maya esp, so grateful for you guys) and family for taking part in my user research and user testing stages.
Icons credits:
https://www.flaticon.com/authors/kiranshastry
