Case study - Financial platform
Role
UI Designer
Deliverable
Mobile app
Timeline
2 Months
Platform
Figma
The application is designed to withdraw the cash without card.
Insight​
Card payment is popular in UK, but some small shops still accept cash only or give you a discount on cash. I found that ATMs in UK London still need to use the debit card to get the cashout. No card withdrawal is not popular. So, this case study is focused on the UX design of a Banking app with no card cash withdrawal function.
My concept idea is to make this new cash withdrawal experience convenient.
Problem & Solution
In global world, different bank have develop their own mobile cash withdrawal function. User make too much effort to follow the step and not fit their user habit. Some of them create a security problem. That is not a good experience to make user feel convince to use it. I created a hypothetical brand identity of a bank and named it: Your cash bank. So the Banking App focuses on cash withdrawal.
UX Design Process
.jpg)
Understand the Users
While working on this case study and devising problem statements I asked people who are using the bank app frequently to share their habits and frustrations. I also asked them to figure out how often they use it. To my surprise, people share very different habits and preference. I incorporated the insights into the user persona.
Persona
Frequent cash user and buyer in market prepare big amount of cash in pocket and do not have a wallet app that saves their time and fit their habit. I created the bank app customization user flow to solve the problem, so that users can easily customize their physical notebook online.
Sarah
Age: 20 years old
Location: London
Education: Undergraduation
Hometown: London
​
Bio
She is flower shop owner who need to purchase fresh flower in a period of time.
She is organised, friendly, funny and she enjoyed helping others.
Her favourite quote is, 'For every minute spent organizing, an hour is earned.'
​
Goal
She wants to have a Cash withdrawal tools to get cash faster to save her working time.
​
Frustration
She is frustrated when she go to flower markets without enough cash and spent a lot of time in ATM machines.
She afraid the bring a lot of things in pocket because she already hold heavy flower or plant on hand. She hope to have a easy cash withdraw flow to feel convenience.
User Research: Pain points
-
Bank: Develop their own user flow and don't have an organised way to create a simple fast experience
-
Security: Users are facing security problems when they are typing passwords on ATM
-
Location: User need to find the ATM by using another map app that they need to spend more time on doing cash withdrawals.
User Journey
.jpg)
So, why is Sarah frustrated?
Currently, Sarah has a bank app and card to do cash withdrawal. However, she need to hold a lot of flower and has to do those steps at the same time and many button need to click. She needs a quick and easy way to do the same things - cash withdrawal.
Sketch
I use procreate to do the paper wireframe. The process below begins with my initial ideas wireframes, then moves to mockups, and finally to the high-fidelity prototype. I have studied and compared different user flow of cash withdrawal. In this simple version, you can see how the I approach solving the user’s needs. There are 6 digit pin for confirm identity. There are one time pin for security. There are scan build in function for convenience.
From Sketch to Wireframe to Low-fidelity prototype
I then brought my idea to an interactive digital low-fidelity prototype and brought it to five potential users to collect feedbacks.
.jpg)
User Research
I conducted a user testing session on five participants. I then took the responses through a card sorting exercise to find common themes amongst the participants.
.png)
I made three major changes based on the user feedback.
1. Add the cash amount options
Originally, users can enter the amount whatever they want. But the cash machines cannot provide that amount with pound and one-option button can save their time for typing. Now, they can get the amount by one click.
2. ATM location map
Users can read the transaction history. But they will not keep checking it; at the same time, they will forget their have set the Mobile Cash Withdrawal instruction. Now, the history will only show the recent cash withdrawal detail and will show the instruction timer instead.
.png)
3. Home screen improvement
- Based on the user feedback, the home screen should be improved. For example: add a timer, set up the contactless withdrawal feature button, and show the account balance.
- Originally, users could read the transaction history. But they will not keep checking it; at the same time, they will forget they have set the Mobile Cash Withdrawal instruction. Now, the history will only show the recent cash withdrawal detail and will show the instruction timer instead.
Design System
High-Fidelity Prototype
.png)
Bank just need to update their ATM system and add a QR code on the front screen. Then they can create a cash withdrawal-friendly environment in this country. No physical machines need to change.
Faster. Convenience. Safety.
What I Learned?
While designing the Dodo Postcard app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s design.