Online Banking iOS App
UX&UI Case Study
This project explains and illustrates my process of both UX and UI design under mobile banking context.
The challenge was ...
"You’re working on a Mobile App that allows users to transfer money to their friends in a simple and enjoyable way. You’re releasing on iOS only for now."
Given Requirements
APP-1 As a user I would like to see an overview of my contacts
Only show contacts that the user has already interacted with (sent or received money)
Allow users to send or request payments from their friends in an easy way
Show the contacts in chronological order
Show the following contact details: Name, Last Transaction Amount, Status, Picture, Date
Allow the user to invite new friends from this view in an easy way
If possible / applicable: Utilize iOS’s Force Touch functionality
APP-2 As a user I would like send / request money
Ability to send or request money from friends
Allow users to choose a category for the transaction
Users should be able to enter the amount of the transaction in an easy way
Optionally ask for a message
To confirm the transaction, utilize Face-ID or Touch-ID depending on device
If possible / applicable: Use emojis or similar elements
If possible / applicable: Make sending / requesting money enjoyable
I started from ...
Doing some research on the context and pains of both traditional banking and online banking, as well as on existing online banking apps to study existing flow.
Here are the insights I got:
Time is valuable
Pain = long process of many layers of verification
Pain = confusing language, figures and functions
Need = clear, fast and easy way to accomplish tasks
Need = simplicity and intuitive
UX Design
After that I defined a new set of UX goals I'd like to achieve in my design, which are
Accomplish tasks within few steps
Clear and self-explanatory
Simple, intuitive and fun
Along with the requirements given, I came up with a user journey for sending money to a friend scenario.
And a flowchart to establish the workflow of user's tasks from the beginning until the end.
Click on the image to see details.
UI Design
In this process, I started by researching on visual design on existing online mobile banking apps, especially on iOS. Moreover, I also took a look at iOS Human Interface Guideline for familiarity and more seamless design for iOS users.
However, the crucial thing to keep in mind while I was designing was the user and UX goals and some specific given requirements eg. utilizing iOS force touch and Face ID/Touch ID.
Prototyping
Send Money Feature
Contact Overview Feature
