WaZoBia Bank is an indigenous start-up financial institution that is located in Nigeria. The bank’s website was designed with the primary goal of fulfilling their customers’ financial needs while also aligning with the business objective of embodying a “generational bank” that highlights the diverse Nigerian tribes and cultures.
Click on the image to play the Prototype and click back to pause.

Project overview

My Role

UX Designer/UX Researcher/UI Designer


Adobe XD, Zoom, Google Docs, Sheets, Slides and Jamboard.


January to March 2023.


User and product research, conducting interviews, design ideation, paper and digital wireframing, mockups, low and high-fidelity prototyping, conducting usability studies, research presentation and accounting for accessibility.

The Target Challenge

I was tasked with designing a profile creation flow that aligns with the bank’s objective of establishing an indigenous bank that caters to all Nigerian generations while showcasing the diverse Nigerian tribes and cultures. To begin, I conducted research on the top Nigerian banks and examined their customer profile creation processes on their websites.

I discovered that some banks still included outdated user identification options, despite the existence of the latest mode of identification – the Bank Verification Number (BVN), which is nationally held by every Nigerian as a confidential and accepted means of identification. Additionally, it’s worth noting that there were no supplementary gender identification options. However, it’s essential to acknowledge that Nigerian law currently recognizes only two genders: male and female. Thus, the absence of additional gender identification options can be attributed to legal constraints.

The Goal

To create a profile creation flow on the bank’s website that serves as an inspiring representation of Nigeria’s diverse tribes and cultures, catering to all generations.

Understanding The User

User Research : Summary

In addition to my foundational research of analyzing the competition, I conducted interviews with five participants through Zoom and utilized the gathered information to create empathy maps. By aggregating these empathy maps, I aimed to gain a clear understanding of the target users and their needs.

During my research, I discovered that the majority of the target users expressed a preference for providing only male and female options for gender identification. This preference remained consistent even though these users had accounts on inclusive platforms like Google and Facebook, which offer a wider range of gender options during account creation (although that was outside my scope of research, I just wanted to know their opinion out of curiosity). Additionally, I found that some users expressed discomfort when asked about their state of origin during the account/profile opening process. This discomfort stemmed from the existence of tribalistic sentiments among citizens, which undermines the notion of a unified Nigerian identity.

User Research - Empathy Map
Empathy Maps
Aggregated empathy map - Emeka
Aggregated Empathy Maps
Aggregated empathy map - Tosin

Next, I derived the following user pain points from the sessions :

Number One
Lack of Flexibility

Inability to skip questions like State of Origin, that are usually tagged required.

Number Two
Slow Browsing Experience

Browsing local websites on the internet can be very slow in loading, which some users find frustrating.

Number Three
Old Method of Identification

Some users find it annoying when Nigerian  financial institutions still use the old method of user identification since Bank Verification Number (BVN) exists.

Afterwards, I created two Personas – Emeka Nwosu and Tosin Badmus – to represent the needs of the broader user group. I also created a refined problem statement for each persona.

Problem Statement

Emeka is a young professional and patriotic Nigerian who needs the liberty to skip questions on state of origin when creating a profile on Nigerian sites because declaring his state of origin does not give him proper representation of been a Nigerian.

Persona 1 - Emeka

Problem Statement

Tosin is a busy working parent who needs the ability to access rapid response and loading on Nigerian based sites because maximizing her time on other important activities is her priority.

User Journey Map

I created this user journey map to provide a detailed account of persona – Emeka’s experience while creating his profile on a local bank’s website. By highlighting the pain points he encountered, the map offered valuable insights and identified areas where I could make improvement during user flow design.

The journey map for Tosin was created to highlight her experiences while browsing Nigerian bank websites. The pain points she experiences, gives me the opportunities to identify areas to improve when designing the user flow of creating a profile.

User Journey Map of Persona 2 - Tosin

Site Map

As the primary objective is to design a profile creation flow, I developed a site map to visualize the efficient flow that users will follow, guiding them seamlessly from one step to the next.

Please click on this link – Site Map of the profile creation flow on WaZoBia Bank website to zoom in the image.

Starting the design

Paper wireframes

I created paper wireframes to outline the profile creation flow, taking into consideration the pain points expressed by users, such as a lack of flexibility, slow browsing experience, and outdated methods of user identification.

Five versions of Home Page Paper Wireframes with Refined Final Version

Paper wireframes screen size variations

To give users the ability to access the website on different devices, I worked on designs for additional screen sizes to make sure the website would be completely responsive.

Digital wireframes

Transitioning from paper to digital wireframes facilitated the refinement of the interface design elements, providing me with a clearer perspective on how to assist users in initiating their flow seamlessly and without difficulty.

Placing the main menus at the top navigation bar with readable content, was aimed at aiding users to access and begin their profile creation flow with ease.

Digital Wireframe - Home Page Design Explanation
State of origin made optional in accordance to persona 1 - Emeka's needs.

As part of my research goal to understand users’ needs and frustrations, and improve their experience through the flow designs, I placed some questions as optional to give users the ability to skip and proceed further with the profile creation flow without hindrances.

Furthermore, in line with the bank’s goal of establishing an indigenous financial institution serving all generations of Nigerians and highlighting the rich diversity of Nigerian tribes and cultures, I incorporated two columns on each flow screen. The left column wireframe, occupying a significant portion of the screen, served as an image placeholder that represented focal points to convey the bank’s objective.

Digital wireframe screen size variation(s)

In addition, I created responsive wireframes of the site tailored specifically for tablet and mobile phone devices, ensuring a consistent and optimized user experience across different screen sizes and devices.

Home Page - Tablet Screen
Home Page responsive design on Tablet Screen
Home Page - Mobile Screen
Home Page responsive design on Mobile Screen

Low-fidelity prototype

To develop the low-fidelity prototype, I connected all the wireframes associated with the primary user flow of profile creation on the bank’s website.

Subsequently, I conducted a usability study as the moderator to test the prototype’s effectiveness.

Low-fidelity prototype of the profile creation flow on WaZoBia Website

Usability Study : Parameters

Study Type :

Moderated Usability Study

Location :

Nigeria, In-person

Participants :

5 participants

Length :

10 – 20 minutes

Usability testing of the Low-fidelity Prototype
A participant testing the low-fidelity prototype of the main user flow
Analyzing and Synthesizing of the Usability Study Sessions.

Usability Study : Findings

Following the usability testing session, I analyzed and synthesized the outcomes by documenting each participant’s testing session on Google Sheets. I then created Affinity Diagrams using Google Jamboard to organize the collected data. By identifying themes and patterns in the grouped Affinity Diagrams, I further synthesized the findings, documenting them in a comprehensive manner on Google Docs. Based on this analysis, the following key findings emerged from the testing:

  1. The profile creation process involved steps that were perceived as overly lengthy by most users.
  2. Certain questions within the profile creation steps were found to be repetitive.
  3. Some users encountered difficulties in clearly understanding how to navigate to the next step, particularly during the step of validating sign-in details.

Refining the design


Taking into account the insights gathered from the usability study, I implemented changes to streamline the profile creation flow. Specifically, I reduced the number of steps involved by merging certain questions that were previously on separate pages. This adjustment consolidated the pages that required similar private information.

Furthermore,  I replaced the image placeholder wireframes with real images that served as focal points to convey the bank’s objective.

Iterated Design based on the Usability Study Insights
The phone number field was merged with the brief personal information fields.

In addition, I addressed the issue of repeated questions by removing one set and retaining the other set that requires users’ personal information. This adjustment was made to provide users with a clear and coherent path to follow when creating their profiles. By eliminating redundancy, users can navigate the profile creation process more easily and with better comprehension.

Iterated Design based on Usability Study Insights
Date of Birth field was repeated twice, it was stripped out together with the phone number field from the BVN details screen

Some Desktop Mockup screens

To create their account, the user can initiate the process by clicking on the “Open An Account” menu located in the top navigation bar of the Home Page. This action will direct them to the Bank Verification Number (BVN) Page, where they will be prompted to enter their BVN as a form of personal identification.

Home Page Design
Bank Verification Number (BVN) Input Screen Design
Brief Personal Information Screen Design - Without State of Origin
Profile Creation Completed

In response to the needs of the personas, Emeka and Tosin, the profile creation process has been optimized to allow users to skip the optional question regarding their state of origin. By streamlining the user flow, the overall process has been enhanced to ensure a faster and more efficient profile creation experience.

Screen size variations

Responsive Design mockups of the Home Page for both tablet and mobile phone devices.

Home Page - Tablet Screen
Home Page - Mobile Screen variation

High-fidelity Prototype

High-fidelity Prototype of the Main User Flow - Profile Creation on WaZoBia Bank website

The prototype can be tested via this link –  High-fidelity prototype for the flower catalogue app.

Second Round of Usability Study

I invited a different set of five participants to test the high-fidelity prototype for the profile creation flow. My plan was to incorporate the analyzed and synthesized findings from the testing. Unfortunately, the project has been temporarily postponed due to financial constraints faced by the project owners.

Accessibility considerations

Number One of the Accessibility considerations

I utilized the “color contrast checker” tool from WebAIM to assess the contrast ratio of the color combinations employed in the app design. I am pleased to report that all of the combinations successfully passed the WCAG AA and WCAG AAA guidelines, ensuring compliance with accessibility standards.

Number Two of the Accessibility considerations

The headings on the site have been organized in a clear hierarchical order, ensuring a better reading experience for all users. This approach helps users easily navigate and comprehend the content, enhancing overall usability and accessibility.

Number Three of the Accessibility considerations

The body font size has been carefully chosen to ensure readability, while the use of clear and simple English has been employed as effective call-to-actions. These measures help users easily understand what actions to take and how to navigate through the profile creation flows, contributing to a smoother user experience.

Going Forward

What I learned

I learned the useful importance of testing designs with users especially the usability studies, it really helped me in knowing what users really needed, revealed unforeseen mistakes, and also, showed that users contribute in creating important ideas that can improve their user experience.


Participants all expressed the seamless and straightforward process of navigating through the profile creation flow on the website and rated it at par with other existing Top Nigerian Banks’ profile creation flows.

Next Steps (after project resumption)

Number One on Next Steps

Conducting additional usability testing to determine if the challenges the users experienced in previous studies have been successfully resolved.

Number Two on Next Steps

Identify additional areas of user needs in the profile creation flows, I will conduct further research and brainstorm to ideate on new features. This process will help uncover potential enhancements and innovations that can be implemented to improve the overall user experience during profile creation.

Number Three on Next Steps

Get feedbacks from UX Design Communities.