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
Tools
Adobe XD, Zoom, Google Docs, Sheets, Slides and Jamboard.
Timeline
January to March 2023.
Responsibilities
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.
Empathy Maps
Aggregated Empathy Maps
Next, I derived the following user pain points from the sessions :
Lack of Flexibility
Inability to skip questions like State of Origin, that are usually tagged required.
Slow Browsing Experience
Browsing local websites on the internet can be very slow in loading, which some users find frustrating.
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.
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.
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.
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.
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 responsive design on Tablet 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.
Link to view the – Low Fidelity Prototype of the primary user flow of profile creation on the bank’s website
Usability Study : Parameters
Study Type :
Moderated Usability Study
Location :
Nigeria, In-person
Participants :
5 participants
Length :
10 – 20 minutes
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:
- The profile creation process involved steps that were perceived as overly lengthy by most users.
- Certain questions within the profile creation steps were found to be repetitive.
- 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
Mockups
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.
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.
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.
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.
High-fidelity Prototype
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
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.
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.
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.
Impact
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)
Conducting additional usability testing to determine if the challenges the users experienced in previous studies have been successfully resolved.
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.
Get feedbacks from UX Design Communities.
