Case Study:

Digital Bank Signup Responsive Website


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


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


Digital bank website designs offer a very innovating experience but are lacking concise information.


Innovating design was applauded but at the same time is a little confusing and overwhelming for older users.


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


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.


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


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



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.

You can Download my Resume here:

English Resume Currículum en Español