A Bank You Can Count On
FinGlobal is an online banking website. They offer a wide range of login setup options. FinGlobal targets consumers age 25 to 65, who are looking for an online banking service with a great security system and easy-to-use website.
Role: UX Designer
Tool: Pen & Paper
Canva
Adobe XD
Rotato
Duration: 08/2021 - 09/2021
// Problem
// Goal
To design an easy-to-use online banking website that provides various security login options for users, to meet their need for security and easy access.
// Question
How might we help users create accounts and passwords easily and securely online?
- Project Timeline -
Emphaiseze
-Secondary Research
-Interview
-Empathy Map
-Persona
-User journey map
Define/Ideate
-Problem Statement
-Competitive audit
Lo-fi design
-Sitemap
-Pen & Paper
-Layout & Structure
-Testing w/ lo-fi prototype
High-fi design
-Visual design
-Interaction design
-Motion Design
Test/Iteration
- Testing w/high-fi prototype
- iteration on the UI
- Research -
- Interview -
Age: 64
Education: High school
Hometown: Keelung, Taiwan
Family: Parents
Occupation: Retired
-
-
Provide details on how online banking keep user information safe
Provide ATM card scanning feature to replace typing
Provide create username and password guide
Design the account interface in an intuitive manner
Reactions
Worry her personal information will be leaked
Frustrated about enter so many ATM card numbers to the page, that they can barely see it on the card
Frustrated in creating a long enough secure username and password, yet easy to remember
Frustrated in the efforts she has to put to find the desired information
Action
Fill out the User-Driven Registration Form
Filled out ATM card related form
Change username and password
Log in to the account
Task list
A. land in home page
B. find create account button
C. click on create account button
A. filling a user-driven registration form
B. click submit
C. receive one time password
A. enter a one-time password
B. filled out an ATM card related form
C. receive temporary username and password
A. login to account by entering temporary username and password
B. change username and password
A. login to account successfully
- Design -
Difficulty with website navigation was the primary feedback concern in my usability study, so I used that knowledge to update my sitemap.
Therefore, I have put “create username” and “ create password” in the create account flow, to make sure everything is set up, to avoid any unnecessary confusion.
Put the text in a coin circle to create a fresh and fun look
Provide a little back button to create a good navigation experience
A hamburger menu bar is introduced on a mobile version of the website
Guidance is provided for users to create a secure password
Users may check out their monthly balance easily with graphs
Daily expenses are clearly displayed
This design helps the users know how many steps are to come with a piggy bank fun
Users have 6 password options to choose from
- Design System -
Colors
Typography
Icons
Mobile Search Bar
Social Media Icons
Button
Text Input
-Accessibility Considerations-
- Impact -
One quote from user feedback
“ I would not change a thing about this website, it is so easy to use.’
- Next steps -
Usability studies
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Develop functionalities
So far this website only has the create account and the login flow, therefore develop other features include redeeming reward points, paying bills, exchanging currency, trading stocks, and remitting.
Hand off
Hand the website off to development once it has all of the features and functionality that stakeholders and users desire.
- What I learned -
Importance of research
Although I was working in a fintech company, I was not familiar with how does the fintech world secure the users' accounts, therefore actively doing research online and interview the people around me with the expertise were crucial for me, and it did help me to finish the project with the right background knowledge.
Visual Design tools
The last time I was working on the Familyfood+ project, however because of my lack of knowledge in visuals, I have found my mockup looks rather cheap. Therefore this time I use a color contrast checker and a designer’s color palette to create the mockup and it does look so much better.
- Challenges & Constraints -
Since I did this case study on my own, I do not work with the stakeholders and lawyers, therefore it may not be approved by the local government regulations in Taiwan or in other countries.