OmniBank

The objective of this project is to design a transfer flow for a local bank. I completed this project in 6 weeks.
Tools used: Adobe XD
My role: UX Designer designing an app for OmniBank from conception to delivery.

Introduction

OmniBank is a local bank located in Nigeria. OmniBank focuses on helping small business owners and users perform transactions easily and seamlessly without visiting banking halls.

Goal

Design an app for for OmniBank that allows users to easily transfer money and report any disputes that may arise.

Target Audience

My target audience are busy workers, small business owners and people who need a quick and easy way to perform transfers without the need to visit banking halls.

Key Challenges

My key challenges during this project were lack of adequate funds and budget constraints. Anther challenge I faced was finding people with accessibility challenges for interviews and usability studies.

Research

User Journey Map

In order to understand the pain points of the users, and the opportunities for addressing users needs, I created a user journey from my observational and secondary research. This helped me understand the steps customers took to accomplish tasks and identify how to make this journey easier for users to meet their goals.

User Persona

Journey Map

Findings

The exisiting websites designs are often overwhelming, which results in confusing navigation. They don’t offer easy cues for regular users, this makes interaction with the website difficult for small business owners who just want to transfer money.

Competitive Audit

I conducted a competitive audit of other products in the market in order to indentify their successes as well as their weak points. This helped me to identify opportunities to make more improved products for users.

Ideation

Paper sketch

During the ideation phase i drew paper sketches that would later be transformed into wireframes. These sketches contained different ideas of how the app would look and I finally chose one that represented the user needs the most for wireframing.

Refined Home Screen

This is the refined version of the home screen for the OmniBank that I chose to be transfered to a digital wireframe.

Digital Wireframes

Home Screen

The search bar element can help users easily search for specific functions. The side menu easy for regular users to navigate.

Transfer Screen

The transfer screen offers an easy transfer feature where users can easily select beneficiaries for quick transfer without entering account number and selecting bank.

Low-Fidelity Prototype

This is a flow of the low-fidelity prototype from my digital wireframes.

Usability Study

I conducted two usability studies involving five participants in each study in order to test the prototype and identiy user painpoints. In the course of the study, the five participants were interviewd and asked to perform certain tasks.

Goal of the study:

  1. Find out if the website was easy to use;
  2. Find out what users liked or disliked about the website.

Findings

  1. During the transfer process, users were unable to go to the previous screen.
  2. Users complained that the screens for transfer was too many.
  3. Users complained about inability to search for beneficiary.

Before

After

Before

After

High-Fidelity Prototype

After making iterations on the low fidelity prototypes, I created mockups and used it to create High-Fidelity prototype where the final iterations were done after the second usability study was conducted.

 

Access the Desktop High-Fidelity prototype here: OmniBank Desktop H-Fi

Access the Mobile High-Fidelity prototype here: OmniBank Mobile H-Fi

 

Accessibility Considerations

  • I used font types and sizes that are easy to read.
  • I used headings with different sized text for clear visual hierarchy
  • I designed the website with proper color and contrast considerations according to WCAG standard.

Take Aways

Impact

 

Our target users shared that the site was easy to navigate and straight to the point without distractions.

 

 

 

 

What I learned

 

I learned that in every step of the design process, the needs and satisfaction of the users should be top priority. This will ensure that the end product solves the users’ problems.

 

Next Steps

  • Conduct follow-up usability testing on the new website.

  • Design additional pages to reflect other options in the transfer flow.

  • Make adjustments to the design for improvements on findings from the follow-up usability study and design for other screen sizes.