UX / UI Case Study
A balance transfer flow for an online bank
Project Duration:
April 2023 to May 2023
Project overview
Luminary is an online bank that is focused on quick and easy money transfers, no matter where you are. The typical user is between 16 and 45 years old. Most users are college students or early career professionals.
THE PROBLEM :
Banks used by users have hidden fees when transferring to different banks, not a secure and slow way to verify a transfer. Money transfer requires a lot of attention and cannot be done from anywhere…
​
To design a responsive website for online bank that would offer an easy, convenient and fast way to transfer money from anywhere.
THE GOAL:
MY ROLE:
UX designer leading the Luminary online bank website design from conception to delivery
RESPONSIBILITIES:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Design Process
Empathize
Personas Empathy
User Research
User interview
Maps User Journey
Define
Problem statement
Hypothesis statement
Value proposition
Ideate
Competitive audits
How Might We
Crazy eights
Prototype
Information Architecture
Wireframing
Low Fidelity Prototype
High Fidelity Prototype
Test
Usability Testing
Implementing
​
User Research: Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users are worried about making transfers when they are not at home because of hidden fees. Also, many users have a problem with the SMS code for payment confirmation. And everyone would like money transfer to be easier and faster without any hassle.
User Research: Pain Points
1
ТRANSPARENCY
Ðœany users are worried about making transfers when they are not at home because of hidden fees.
2
INTERACTION
Ðœany users have a problem with the SMS code for payment confirmation.
3
EXPERIENCE
User feels cheated because of hidden fees. He is also worried every time he has to pay online because he may not receive an SMS
User Personas
Siana
Age: 28
Education: Computer sience
Hometown: Zurich
Family: Married
Occupation: Programmer
“I would prefer to pay for the service but not waste valuable timе”
Frustrations
-
Not enough time for going to the bank office
Goals
-
She is looking for a way for security checks not to prevent her from paying, but to keep her safe
-
Banking to remember commonly used IBANs
-
Easy and quick to use
Siana is a busy mother of three. She works from home as a programmer. She often orders online clothes, food, gifts, pays the children's monthly bills or courses. When she is paying for something she is usually on the move or in a hurry. It is extremely important to make it quick and easy. When paying, it often happens that she does not receive an SMS with the payment confirmation code. Which forces her to go to an ATM or bank office to pay.
Problem statement:
Siana is a busy working mother of three children who needs a fast and reliable way to pay all bills and courses because she doesn’t have time to go to the bank.
David
Age: 40
Education: GED
Hometown: München
Family: Married
Occupation: Car Mechanic
“If it can be easy and safe, no hidden surprises”
Frustrations
-
When they take money from me because I carelessly scheduled it as same day or directly from a savings account.
Goals
-
To be able to pay my monthly bills on the same day and from any account without extra fees.
-
To be able to transfer money on just my mobile phone, away from a computer.
I'm usually on the go. Work, sport, family. I'd like to be able to pay the family's bills and lessons on the go - on the train, etc. But I have to be careful. Scheduling same-day transfers charges me differently, as well as from which account I pay (savings or checking). I feel unjustly wronged when this happens.
Problem statement:
David is a busy working and sports dad who needs to have transparency about the fees the bank transfer will cost because otherwise he have to set aside, a special time in which to pay the bill so as not to make mistakes.
Sitemap
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
.jpg)
Wireframe
Screen Size Variations
Next, I sketched out wireframes for each screen in my website. And because Luminary online bank customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Low-Fidelity Prototype
The low - fidelity prototype connect the primary user flow - a balance transfer flow for an online bank. So the prototype could be used in a usability study with users.
​
STUDY TYPE:
Unmoderated usability study
LOCATION:
Zurich, Switzerland, remote
PARTICIPANTS:
5 participants
LENGHT:
10-20 minutes
Usability Study: Parameters
Usability Study: Findings
These were the main findings uncovered by the usability study:
1
QR CODE
QR code is not clear to the user, how to handle it
2
SECURITY CHECK
The user wants to pass the security check as quickly as possible
3
TEXT
The text on the buttons is confusing
Mockups
Based on the insights from the usability study, I made changes to improve the security check flow. People massively wanted a quick check. Two checks was too many clicks
Based on the insights from the usability study, I made changes to improve the security check flow. People massively wanted a quick check. Two checks was too many clicks
To better explain how to use QR code, I've added descriptive text and an illustration that shows what needs to be done. Also add a button to upload the code from a file if it's on the same device
Mockups: Original Screen Size
Mockups: Screen Size Variations
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
Takeaways
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.