Appointment booking feature for the UBA mobile banking app

Role

Product Designer

Duration

2 Weeks

Type

FinTech

Background

A friend visited me a few months ago and complained of the stress and delay he faced when he went to his bank to meet with the customer service representative. This venture, according to him, took most of the time he allocated for other activities of the day.

We both decided to look into this pain point and figure out a way for bank customers to save time and the stress experienced when visiting the bank.

Our solution and design process are explained below;

About UBA Bank

United Bank for Africa Plc (UBA) is a leading Nigerian pan-African financial institution headquartered in Lagos, Nigeria. It has subsidiaries in 20 African countries and offices in London, Paris, and New York. The bank provides corporate, commercial, SME, consumer, and personal (retail) banking services to more than 25 million customers, served through diverse channels: over 1,000 offices. UBA is one of the banks in Nigeria that has stepped up their services with the help of technology also with good customer service put in place to address customers' issues

Problem statement

To design a feature to be incorporated into the mobile banking app that allows users to book appointments with customer service representatives at their preferred schedule and location. This would save time and ease the stress it takes the average bank customer to meet with the customer service representative. Previously, there was no way to know the number of persons already at the bank except if you were there in person to see the magnitude of individuals already waiting in line. This solution lets bank customers anticipate the schedule and plan appropriately.

Project Goals

We streamlined our process to create a solution that;
1. Enable users to book appointments at their desired schedule.
2. Enable users to input their reasons for meeting with the customer service representative ahead of time.
3. Enable users to manually or automatically enter their desired location to book the nearest bank branch.
4. Provide users with directions to their preferred bank branch.

My Design Process

To make this happen, we carried out the following design process;

User Research

To validate our solution and understand the target user’s mindset and pain points, I conducted thorough user research by sending out surveys and conducting interviews. The survey not only proved to be particularly helpful in the inspiration behind my final design but also reinforced the importance of the proposed feature.

User persona

To support my thought process and to ensure that I don’t create a biased solution, I created a user persona that would serve as a guide for me to make better design decisions.

User f.low

Having conducted my market and user research, I’ve been able to draw some insights into how the user flow ought to be. The user flow below shows the navigational structure of the mobile app when a user interacts with the product.

Paper Sketches

After completing my user flow, I made paper sketches of the user interface for the proposed feature from the insights gotten from my user research. These sketches further give me insight into how the feature experience would seem.

Wireframing

Using the paper sketches, I tried creating some low fidelity wireframes. The wireframes helped me focus on key functions, elements, and actions before starting the visual design.

Style guide

The UBA brand already has an existing style guide, and I wanted to challenge myself to see if I could design within existing design guidelines since the proposed feature is going to be incorporated into an already existing application.  We made sure that all of the designs are clear and well-detailed.

Splash Screens

Onboarding/Sign up

I started out redesigning the onboarding page of the mobile application. I didn’t see the need to redesign an entirely different concept for this because my focus was creating the ‘Book appointment’ feature. I opted to replicate it because I wanted to create a prototype for the appointment booking process that begins from the signup stage. Replicating this also helped me get accustomed to the UI design system for the mobile application.

Dashboard

After the onboarding/sign-in process, the following screen is the dashboard. On the dashboard, there are colored tabs for different banking quick links. There was initially no ‘Book appointment’ tab, but I created one that leads to the appointment booking feature.

Book Appointment

To book an appointment with the bank customer service representative, the user would need to input the reason for meeting with the customer care representative. The user also sees a dropdown of possible reasons for an appointment. If the preferred reason is not stated, the user can enter one in a text box by selecting the 'Reason not found' option from the dropdown menu.

Input Location

After the user's reason is submitted, the user would be required to input the desired location to view the bank branches within that location and book the preferred bank branch. Location can be keyed in both manually and automatically. To input location automatically, the user would need to allow location access.

Select preferred bank branch

After the user inputs the desired location, the bank branches within the inputted location are displayed. The user can now select his preferred bank branch and get directions to the bank branch.

Input Schedule

After selecting the preferred bank branch, the user gets to input the preferred schedule. It includes the date, time, and available customer representative desk.

What's your preferred timing ?

The user gets to see the time slots that have been booked (In gray). Also, the user cannot book more than a week ahead.

Voila! Appointment booked.

After inputting the desired schedule, the user can finally book an appointment. After booking, the prompt message would display the appointment schedule and a few notices to give the user a seamless bank appointment experience.

Conclusion

The main goal of this project was to provide UBA customers with an all-new banking experience on the UBA banking application with the appointment booking feature. Based on the research and feedback gathered, it was clear that this was an imperative feature for bank customers.

I am glad to work on a project like this, and I enjoyed the user research and brainstorming sessions I had with my partner on this project.

I also learned newer ways to see problems and how to solve them. I would love to continue in my journey of understanding business and users’ needs to create great experiences for Apps.

Thank you for reading!

Want us to build
something together ?
Shoot me a mail: Ebukavictor138@gmail.com
or connect with me via Linkedin or Twitter.