Project overview
Project overview
Essence bank is a digital bank that offers a wide range of banking products. The typical user is between 18-65 years old. Essence bank’s goal is to make balance transferring quick, easy and convenient for all types of users.
Project duration
October 2022 – November 2022
The problem
Typical banks have a long and repetitive process for balance transfer that requires more time and effort for users to make.
My role
UX designer designing a responsive website for Essence Bank from conception to delivery.
The goal
Design a responsive website for Essence Bank that allow users to make balance transfer quickly and easily.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs and responsive design.
User research: summary
I conducted interviews and created personas to better understand the users I’m designing for and their needs. One primary target audience are busy professionals who need to transfer money regularly. This user group expressed their need of having a quick and efficient way to transferring money especially for constant transactions.
I also found out that most users prefer to use bank apps as they tend to be easier and faster than banks’ websites. This discovery led to improving the user experience of Essence Bank’s website to make it fast, easy, and convenient for all types of users.
User research: pain points
1
Time
Professional working users have a limited time spending on constant tasks
2
Process Repetition
Users may select wrong address when ordering Users felt weary and board every time they need to do the same long process to transfer money delivery
3
Small Text
Websites with small text are difficult to read
Persona: Omar
Problem statement
Ahmed is a busy professional and a single parent who needs a quick and convenient way to transfer payments to his personal helpers because Transferring money every time requires time and effort.
User journey map
I created a journey map for Ahmed’s experience to help identify possible pain points and improvement opportunities.
Sitemap
In order to make balance transferring flow as simple as possible, I created this sitemap.
My goal was to improve the website navigation by creating an effective IA so users can easily find what they’re looking for.
Paper wireframes
Arrows were used to indicate the elements of each sketch that would be used in the initial digital wireframe.
Next, I sketched out paper wireframes for the different screens of the website.
Iterations are made for each screen to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points
Paper wireframes screen size variation(s)
Because Essence Bank’s 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.
Digital wireframes
As the initial design phase continued, I started to turn the paper wireframes into digital wireframes.
I prioritized a quick and easy transferring process to help users save time. And I also optimized the size of texts for a better user experience.
Digital wireframes screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I used the completed set of digital wireframes and connected all the screens involved together. The primary user flow I connected was logging in and balance transferring, so the prototype could be used in a usability study.
Usability study: parameters
Study type
Moderated usability study
Participants
5 Participants
Location
Saudi Arabia, remote
Length
15-20 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
1
Choosing account to transfer from
Some users had trouble finding out what “From” word indicates
2
Selecting a beneficiary
Users felt overwhelmed when they try to select beneficiaries
3
Confirmation
Users were unable to make edits on the confirmation page
Mockups
Based on the insights from the usability study, I made changes to improve the site’s balance transfer flow. One of the changes I made was adding an explanation text for each step of the transferring flow, so users can better understand the process.
Before usability test
After usability test
Based on the insight that user need better cues when they try to select a beneficiary, I rearranged beneficiaries information and added a better indicator so users can easily recognize and confirm their choices.
Before usability test
After usability test
Mockups: Original screen size
Mockups: Screen size variations
Based on my prior wireframes, I took into consideration designing for different screen sizes. I felt it was important to improve the experience for mobile users as well, since users might open the bank website and make transactions via their phones.
High-fidelity prototype
The final high-fidelity prototype followed the same user flow as the low-fidelity prototype and was optimized based on the findings of the usability study.
Accessibility considerations
1
I used hierarchical headings to help users better navigate the website content and highlights them by their importance
2
I used landmarks to make it easier for users to navigate the website, particularly users who rely on assistive technologies
3
I used icons to help make navigation easier
Takeaways
Impact
Our target users shared that the design was intuitive to navigate through, and they expressed satisfaction that it met their needs.
What I learned
Creating the website for Essence Bank taught me that the creative process begins far before the initial thoughts. It also taught me that when designing and iterating, it’s crucial to pay attention to the users’ needs and pain points.
Next steps
1
Conduct follow-up usability testing on the new website
2
Identify any additional areas of need and ideate on new features