Fidelity Bank Mobile Banking App Redesign — UX Case Study

About Fidelity Bank

Fidelity Bank is a full-fledged commercial bank operating in Nigeria, with over 4. 2million customers who are serviced across its 231 business offices and various other digital banking channels. Fidelity Bank is rapidly implementing a digital-based retail banking strategy which has resulted in exponential growth in savings deposits over the last three (3) years, with 40 per cent customer enrollment on the Bank’s flagship mobile/internet banking products.

Why Fidelity Bank?

I was having a conversation with a friend of mine and our discussion led to talking about Fidelity bank Mobile App. His passion has he expressed his dissatisfaction about his user experience with app got me curious about their mobile app. I wanted to see what it looked like, I was also curious to find more information about the experience of other customers who used the app. I made a few calls to some friends that used the bank but I found out none of them used the app! There were complaints about the onboarding process which made them drop off and settle for USSD. So I decided I had to find people who use the app. Another friend provided me with screenshots since I couldn’t get access into the app unless I opened an account with the bank and set up the mobile app.

My Goals

1. Identify usability issues through user research.
2. Create and validate design solutions.
3. Improve usability and make the app more user-friendly.
4. Improve users’ trust for Fidelity Bank.
5. Discover more about banking generally.
6. Communicate my design process.

For this case study, I focused on:

1. Onboarding Process.
2. Login Process.
3. App dashboard.
4. Money Transfer Process.
5. Airtime Recharge.

My Design Process

Getting Started

I created a survey using the LEMERS UX Evaluation method. This evaluation method describes the main ideas of UX design using the “LEMERS” acronym

• Learnability → How easy is it to accomplish basic tasks for the first time?
• Efficiency → Once learned, how quickly can one perform tasks?
• Memorability → How easy can one reestablish proficiency after time away?
• ERrors → How often are errors made and how are they handled?
• Satisfaction → How pleasant is it to use the design?

I structured the survey questions in such a way that I could allow me to know what the user pain points were. Before going ahead with user research, I decided to check reviews of the app in the Google Playstore. I saw good and bad reviews and noted what the complaints were. This is a screenshot of some of the reviews.

Below are screenshots of the app at the time of this documentation:

Competitive Analysis

Fidelity Bank is a commercial bank in Nigeria and has quite a number of competitors that they are trying to be better than. I looked at a few competitors to see where Fidelity stood relative to them. I analyzed their UI, UX, Information architecture, User Flow and general banking features.

User Cases

I tried to create different scenarios users find themselves to make use of banking apps, you know, just to understand their reasons and the desired outcome:

• My airtime just finished, I need to recharge on my bank app, So I can call my cab driver to pick me up
• My sister just called, she needs some cash. Let me quickly login to my bank app and send her some cash, So she won’t be stranded.

User Story

- As a user, I can sign up using my account number and personal information
- As a user, I can include my card details in order to do online transactions
- As a user, I can log in using my email and password to gain access into the app
- As a user, I can log in using my fingerprint to gain
access into the app
- As a user, I can access my dashboard in order to
see my information
- As a user, I can see my past transactions in order to track my cashflow
- As a user, I can recharge airtime for myself and others from the app easily
- As a user, I can buy mobile data for myself and others from the app easily
- As a user, I can save numbers I buy airtime for in the app for easy access later.

User Interview

To understand users’ issues and pain points with the banking app, I needed to empathize with the users. As I stated earlier I carried out a survey using google form targeting Fidelity Bank mobile app customers I could find. I asked both those using the app and those not using the app because I noticed in the course of my research that there were people who tried to use the app but dropped off at some point and resorted to using USSD to carry out transactions.

I also interviewed my friend over the phone and documented his pain points.

I was also able to talk to a Fidelity Bank staff who was excited about the project and also helped share his own personal pain points.

60 per cent of the people who participated in my survey were female while the remaining 40 per cent were male.

Just 20% out of the people I interviewed had been banking with Fidelity Bank for over 5 years while 40% started banking with Fidelity in less than 5years and another 40% less than 2 years.

Only 40% of the people that I interviewed use the app while the remaining 60% don’t use the mobile app.

Some of the users who said no expressed their reasons for not using it.

I asked if the app met user expectations and majority said no as shown below.

I proceeded to ask this question, “When you’re not able to carry out a task in the app, do you get an error message in clear language?”

Some users expressed interest in more features as majority said the app doesn’t have many features.

Majority of the users I interviewed said the features available were easy to learn however, 25% claimed they had challenge while trying to onboard.

While I asked for what people loved about the app, I didn't get much responses. The screenshot below shows an idea of how the users felt about the app.

Below are screenshots of some of the pain points I got.

Furthermore, I tried to get feedback from users with a one-on-one interview based on their overall feel of the app and also based on the task given to them. This gave me a set of pain points I was able to summarize into the following:

• The enrollment process requires going to the bank to activate.
• There are usually network issues while using the app.
• The app asks for One Time Password(OTP) or token to do small transactions.
• No screen grabbable confirmation after a transfer.
• App loads slowly.
• No quick loan module or account officer feature.
• Too much backroom work, there should be more Do-It-Yourself Features.

As for the survey, Here is a collation of my result:

• 67% don’t like the fact that dey had to go to the bank before they could activate the app.
• 30% complained of having to get a hard token for small transactions
• Majority complained the app is unreliable due to network issues.
• 5% said the error message they got while trying to carry out a transaction wasn’t clear enough.
• All interviewers rated the interface design of the app low.
• 80% claimed the app wasn’t easy to navigate.

Who was I designing for?

Ideation

With the pain points defined, it was necessary to change the user journey for the banking app starting from the onboarding process and eliminating the need to have to go to the bank while maintaining the level of security needed to protect users. I selected the important menu and arranged them in order of importance. This laid the foundation of the design process and helped me to create the user journey.

Information Architecture

I opted to keep the information architecture simple and did my best to reduce user journeys where it was possible, especially the onboarding and sign up process which was the stage where the majority of the people not using the app dropped off and resorted to using USSD for their mobile banking activities. I ensured only what was necessary was left there while keeping security in mind as I did a redesign. As I stated earlier my focus on this project centred on these features of the app.

1. Onboard Process.
2. Login Process.
3. App dashboard.
4. Money Transfer Process.
5. Airtime Recharge.

Wireframes

I came up with a low-fidelity design to help represent the skeletal framework of the app. I focused on the functionality using major shapes. I was able to test ideas without diving into much details of the design aesthetics.

Shots of the low-fi design can be seen below:

Defining the solutions

Moving forward from the wireframes, I began to design and made a few adjustments to my wireframes in my designs after prototyping the wireframes and running some usability tests.

The Splash Screen
I decided to give the splash screen a new look so I opted for an animation loading screen with the logo that finally leads to a welcome screen that presents you with an option to log in or sign up. The welcome screen also has a quick actions button at the bottom which slides up a modal when clicked on for quick transfer, quick airtime, quick balance, account manager. I didn't want to keep the welcome screen too busy and cluttered that’s why I opted for that approach. The feature is there but not in the face of the user and appears only when called for.

The current design is the first one on the left below while the two on the right are my redesign.

Onboarding Process
The current app onboarding says you register in 3 steps, I redesigned the onboarding process into 3 steps while making a change only to the last step of the current app design. The last step requires users to download a soft token app which I’m sure might require going to the bank for or doing another form of registration in order to set up the app before eventually being able to use it to complete the sign up of their current app. I only asked for information necessary to capture the needed information required to get on the app so users won’t feel overwhelmed with all the forms at once. There is also a way to measure progress in the page header to let the users know what registration stage they are in.

My design requires users to enter their account number, get a one-time password that confirms they own the account with the help of the phone number you registered with the account and then proceed to create a username, password and a transaction PIN to use on the app. All other required details to get the app running will be pulled from your account database which you provided when you opened the account at the bank. This is to save users the stress of repeating information already provided.

I also opted for a minimal and consistent design with the onboarding screens for the login page while still maintaining biometrics login and a link to sign up if not yet registered.

App Dashboard
I settled for a more modern design with more features compared to the current design. Users can see available balance and type of account and then switch between accounts while also being able to see transactions with a button to see more transactions. The current design maintains a hamburger menu and a floating icon, I opted for none of that while trying to keep primary actions within the reach of the users' thumbs and tucked secondary actions in a “more” hamburger icon also at the bottom of the app. I felt this approach would put everything within the thumb reach of the user.

Money Transfer Process
The current app design makes use of quick links to make transactions. It doesn’t separate money transfers from airtime purchase or bill payments, rather all transaction types are listed in a long list so users just make a choice from the list and perform which one they want. It is widely accepted that the maximum number of items in a drop-down list should be around 15 items (some say 12, others say 16). If it’s more than that it easily gets confusing and a hard choice to make for the user.

My issue with this approach is that scanning through a long list of items puts a lot of choice in the hands of the user. We should always strive towards taking as many options away from the user as possible. This helps them to make choices at a much faster rate.

So I opted for a different approach in my design, Based on the user research conducted majority of the users were more interested in money transfer and buying airtime. I made those transactions the primary actions and placed them on the dashboard to be easily accessible to users.

Clicking the “send money” button as displayed in the picture above takes the user to a screen where he provides the transaction information and proceeds to confirm the transaction. I didn't opt for the normal selection process that involves choosing whether the user was sending to a Fidelity Bank account or another bank account. According to my design, the user sees Fidelity Bank as the first bank on the list while other banks appear under. Users also can type the bank name and the auto-complete feature helps generate the related banks to the text typed.

Airtime Recharge Process
I kept the same design style for the airtime recharge as the money transfer in order to maintain consistency in my design. My goal was to keep things simple and fast.

Usability Testing

In order to know if my design has helped solve users issues as highlighted earlier, I invited users to test the prototype giving specific tasks and objectives taking note if there was any problem faced during the process. The result was welcoming as positive feedback was received from every user and the time taken to do specific tasks reduced.

Conclusion

For me, product design is not just about designing interfaces but experiences. My goal is to always make the product an extension of the user and interfaces are just a means to an end. They are a way for users to interact with products like this and then get the experience designed for them while using the product.

Redesigning the app was quite an experience for me as it made me identify problems with the app and I was able to allow those research guide my design. I really enjoyed my time while I was working on this project.

Thank you for reading this far!