Project Overview
The Problem
In-person banking is a stressful experience for most people have to wait in long lines and have little information on the processes required to create an account.
The Goal
Design a signup process that is easy and quick, by providing necessary information to customers and making the process as simple as possible.
The Product
DigiBank is a Digital Bank option for all types of costumers that focuses in the elimination of the struggles of in-person bank experience.
My Role
UX designer leading the DigiBank website design
Responsabilities
Conducting interviews, paper and digital wire framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Project duration
November, 2021 to December, 2021
Understanding the user
I conducted user interviews, which I turned into empathy maps to better understand the target user and their needs. I discovered that many target users are tired of the in-person bank experience, because it is time consuming and really interferes with their daily routines when there is a situation to take care of, so they turn to digital banking, but as this is still a moment of transition, people are often hesitant or overwhelmed with the information or scared by lack of concise information.
User pain points
Homepage
Digital bank website designs offer a very innovating experience but are lacking concise information.
Interaction
Innovating design was applauded but at the same time is a little confusing and overwhelming for older users.
Process
The process of signup is intimidating to users who are afraid of giving up personal information.
Persona & problem statement
Jason is a busy worker who needs to create an account for a Digital Bank because needs to keep control of his finances quick and easily.
User journey map
I created a user journey map of Jason’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the desing
Sitemap
Difficulty with website navigation
was a primary pain point for users,
so I used that knowledge to create
a 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.
Wireframing
Paper wireframes
Next, I sketched out paper wireframes for each screen in my website, keeping user pain points about navigation and signup flow in mind.
Paper wireframe screen size variation(s)
Because 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
Moving from paper to digital
wireframes made it easy to
understand how the redesign
could help address users pain
points and improve the user
experience.
Prioritizing useful button locations
and visual element placement on
the homepage was key part of my
strategy.
Digital wireframe screen size variation(s)
Just like the desktop version, the mobile version of the website offers a clear overview of the products and guides the user to start the signup process.
Usability study: findings
These were the main findings uncovered by the usability study
1. Information
Once the information was inserted, users didn’t identify typos and tried to continue the process but couldn’t.
2. Indicators
Users were unsure if the information was valid before trying to click on the button.
Refining the desing
Mockups
Based on the insights from the usability study, I made changes to improve the site’s signup flow. One of the changes I made was adding bright color to the buttons so users knew how to start the process right away.
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, as well as several
changes suggested.
View the DigiBank
high-fidelity prototype.
Final Mockups
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with images, and demonstrated a clear visual hierarchy.
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.