The product
FLOW is a digital bank that offers a wide range of services including online banking, corporate banking, investment banking, and asset management services so customers have everything in one place. The typical users are mostly Millennials and Gen Z, including students, young professionals and first-time home buyers. FLOW’s goal is to banking easier and less stressful.
The problem
Most digital banks have a confusing sign-up process and users are only allowed to set up an account through their app. When it comes to e-banking users are usually struggling to navigate through bank websites. Overall and despite the benefits of online banking services, customers worry about being left exposed to fraud risks.
The goal
Design a responsive bank website that provides clear navigation to the users and helps them complete everyday tasks like setting up and logging in to their accounts in the most efficient way possible.
My role
UX designer leading the FLOW bank website design.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
User research: summary
In order to better understand the users I’m designing for, I conducted interviews and created empathy maps. Through the above, a primary user group has been identified as students and young professionals who want a bank that they can trust and have everything in one place when it comes to online banking and financial products. This user group confirmed initial assumptions about the FLOW bank customers.
Apart from the fact that most users already find digital banking to be very stressful and complicated, there are other factors that make it hard for them to trust digital banking, like security risks and complex user journeys.
User research: pain points
1. Simplicity
Users find most banking websites to have very complicated designs that make it difficult for them to navigate and this could lead to frustration.
2. Consistency
Inconsistent web page designs with poor user journeys can create confusion and increase drop-off rates. Opening a bank account or applying for financial products is in most cases outdated.
3. Security
Security is a huge deal for users when it comes to online banking. A weak authentication process decreases users’ trust in the overall services and, therefore, the brand.
Persona: Amani
Amani is a student who recently moved to the UK from their hometown to pursue a master’s degree in Biomedical Engineering. They are looking to set up a student bank account with a local bank in order to transfer money from their saving account to pay for their tuition fees and get the best rate possible.
User journey map
Mapping Amani’s user journey reveals how important is for users to flawless bank website experience when completing everyday tasks, like setting up an account as new users.
Sitemap
One of the most important findings from the user research was that users are usually struggling with the complex navigation of most of the existing bank websites. I took this under consideration when creating the sitemap.
My goal here was to make strategic information architecture decisions that would improve the overall navigation of the website. The structure I chose was intended to make the user’s journey simple and straightforward.
Paper wireframes
Next, I sketched out paper wireframes for the primary web pages, keeping the user’s pain points about navigation, browsing, signing up and logging in in mind. The home screen paper wireframe variations to the right focus on optimising the browsing experience for users.
Screen variations
Nearly all users from the user research reported that they don’t get the same experience on different devices. Having that in mind I created paper wireframes for different screen sizes.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritising useful button locations and visual element placement on the home page was a key part of my strategy.
Low-fidelity prototype
The low-fidelity prototype connected the user flow of setting up an account and logging in. The prototype could be used for user usability studies.
User research: pain points
1. Progress
Users weren’t able to check how many steps of the sign-up and the log-in process have completed and how many were remaining.
2. Sent new code
Once at the sign-up process, users didn’t have a way to request for a new one to be sent to them.
3. Application status
After submitting their sign-up application, most of the study participants requested a way to be able to check the status of their application.
Mockups
Based on the insights from the usability study, I made changes to improve the sign-up flow. One of the changes I made was adding a progress bar above the form, so users are able to check how many steps are in your form and which step they are currently on.
When submitting the application and following the high demand from the low-fidelity prototype testing, I added a button so users can check the progress of the application review.
Original size
Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by the users.
User research: pain points
1. Hierarchy
Different font sizes and variations have been used throughout to ensure a clear hierarchy.
2. Colour contrast
Texts and colours have been checked to make sure they successfully pass the Web Content Accessibility Guidelines’ standards.
3. Consistency
All UI components with the same functionality have been checked to make sure they are consistent.
Takeaways
Impact
Late user testing confirmed that the website addressed all of the major pain points and that users could easily complete the main user flow on various screen sizes.
‘Finally, a bank website that is simple to use and works on a variety of devices and screens.’
What I learned
Throughout this whole website development process I learnt a lot about online banking and what are the main pain points that users face while interacting with banking websites.