FLOW
Summary
FLOW is a digital bank providing comprehensive services, including online banking, corporate banking, investment banking, and asset management, all conveniently accessible in one place. The typical user demographic comprises Millennials and Gen Z, encompassing students, young professionals, and first-time home buyers. FLOW's primary objective is to make banking more user-friendly and less stressful.
The challenge
Simplifying Digital Banking Access and Enhancing Security.
Problem Statement: Many digital banks present users with a complex sign-up process, limiting account creation to their mobile apps, and users often find it challenging to navigate traditional bank websites for e-banking. Additionally, despite the advantages of online banking, customers are concerned about the vulnerability to fraud risks.
Solution: We aim to streamline the sign-up process, making it more user-friendly and accessible across various platforms. Enhancements in website navigation and user experience will empower customers to manage their e-banking tasks effortlessly. Implementing robust security measures will provide users with peace of mind, safeguarding their financial information from potential fraud risks. Our solution ensures a smoother, more secure digital banking experience for all users.
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
To gain a deeper understanding of the users I'm designing for, I conducted interviews and crafted empathy maps. Through these efforts, a primary user group has emerged: students and young professionals seeking a trustworthy bank that offers comprehensive online banking and financial products. This user group validated our initial assumptions about FLOW bank's customer base.
Personas and user journey maps
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. 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 created paper wireframes for the main web pages, taking into consideration the user's concerns regarding navigation, browsing, signing up, and logging in. The paper wireframe variations for the home screen on the right side are specifically designed to enhance the browsing experience for users.
Screen variations
Almost all users from the user research indicated that they do not have a consistent experience across various devices. With this in mind, I developed paper wireframes tailored to different screen sizes.
Wireframes
Transitioning from paper to digital wireframes simplified the process of grasping how the redesign could effectively tackle user issues and enhance the overall user experience. A crucial aspect of my strategy was giving priority to the placement of buttons and visual elements on the homepage to ensure their usefulness.
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.
Mockups
1. Sign up progress check
Based on the insights gained from the usability study, I made changes to enhance the sign-up flow. One of the modifications I implemented was the addition of a progress bar above the form. This allows users to track the number of steps in the form and identify their current step.
2. New verification code sent
In the high-fidelity mockups, users can request a new code by simply clicking the 'Send me a new code' button.
3. Application status check
When submitting the application and in response to high demand observed during the low-fidelity prototype testing, I included a button that enables users to monitor 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. Given that users access online banking using a variety of devices, I believed it was crucial to enhance the browsing experience across different sizes, including mobile and tablet, to ensure a seamless user experience.
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
Building the FLOW product as a UX designer taught me valuable lessons:
1. User-Centric Focus: The importance of designing for users, considering their diverse needs.
2. Complex Information: Dealing with intricate financial data and transactions, requiring clear design.
3. Security Awareness: Recognising the critical role of security and data protection in banking.
4. Regulatory Compliance: Following financial regulations in every design aspect.
5. Efficient Workflows: Creating smooth user flows and transactions for better usability.
6. Accessibility: Ensuring all users, including those with disabilities, can use the platform.
7. Data Visualisation: Presenting complex financial data clearly through visuals.
8. Consistency: Keeping design consistent across web, mobile, and other platforms.