Keystone mobile banking app redesign— UX Case Study
About Keystone Bank
Keystone Bank is a full-service commercial bank currently owned by Sigma Golf River Bank Consortium after being acquired from the Asset Management Corporation of Nigeria (AMCON) in 2017. It was granted a banking license on August 5, 2011, by the Central Bank of Nigeria (CBN). The Bank has met and exceeded all capital adequacy requirements of the CBN and assumed the deposit liabilities, certain other liabilities and assets of former Bank PHB Plc.
Why Keystone Bank?
The app had a mix of good and bad reviews, this was due to UX problems that made the app frustrating to use. The platform lost a lot of users and credibility, they need a redesign of their interface to make it easier for their users, ensuring those products are serving the user needs. Moreover, there are also lots of complaints from keystone users and friends regarding difficulty navigating through the app, security authentication. etc. I had to go through the apple store for more complaints from users and carry out research to fix the user's pain points.
Project Summary
Redesign of banking app with the core objective of improving process efficiency in the banking system, to solve the problems about users complaints. to make onboarding easier and registration flow for new and existing users by simplifying the necessary steps needed.
Challenges
I started by taking the first step, from doing research about the Keystone banking app and gathering information about the user experience and their reviews with the help of Google play store and App store.
Then I sorted the gathered information and identified the problems. It also helped me in understanding the user perspective of what exactly they wanted.
Below are a few problems that I faced when I did some analysis of my own:
- User Experience: The app ought to be useful, desirable, usable, and the design elements are meant to evoke emotion and appreciation.
- User Interface: The first and the most important thing about an application is the look and feel. the updated app has a bad interface
- Lack of user engagement/navigation: The user engagement of the application is based on the look, the offers, and the schemes provided to them. The application is lagging in that compared to the competitors.
Roles
- UX Research
- UI Design
- Wireframing
- Interaction Design
Tools
- Figma
- FigJam
- Protopie
My Goals
- Improve usability and make the app more user-friendly and intuitive for users.
- Create and validate design solutions.
- Improve usability and make the app more user-friendly.
- Improve users’ trust for Keystone Bank.
- Discover more about banking generally.
- Communicate my design process.
My design process
Competitive Analysis
Keystone Bank is a commercial bank in Nigeria and has quite many competitors trying to be better. I identified major competitors and research their products, sales, and marketing strategies. By doing this, I created solid business strategies that improve upon other competitor’s. I also compared features on each app and identified opportunities for KEYSTONE mobile banking app, this includes expert knowledge and a deeper understanding of their business model.
I identified the overall navigation and onboarding process to bring a more exciting user experience.
Validated User Cases
I tried to create different scenarios description of how users will perform tasks on the banking apps, you know, just to understand their reasons and the desired outcome and also the goal of the users
- 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 log in to my bank app and send her some cash, So she won’t be stranded.
User Story
-As a user, I want to be able to sign up using my account number and personal information to help me sign up faster
- As a user, I want to be able to use fingerprints to ensure better security and faster login.
- As a user, I want to be able to include my card details to do online transactions and help me track online subscriptions.
- As a user, I want to be able to access my dashboard to see my total debit and credit for a given time range and export them as a financial statement
- As a user, I want to be able to see my past transactions to track my cashflow
- As a user, I want to be able to recharge airtime for myself and others from the app easily
- As a user, I want to be able to buy mobile data for myself and others from the app easily
- As a user, I want to be able to save numbers and favourite account numbers to buy airtime for in the app for easy access later.
Getting Started
For more insights, I used the LEMERS UX evaluation method. This method describes the ideas of UX design using the “LEMERS” acronym.
- Learnability → Are there too many features?
- Efficiency → How quickly can one perform tasks? Are there any special shortcuts?
- Memorability → How easy can one reestablish proficiency after time away? Would users be able to use the app after a while?
- ERrors → How often are errors made and how are they handled?
- Satisfaction → How pleasant is it to use the design? Is the visual design appealing?
Understanding the users
To understand users’ issues and pain points with the banking app, I needed to see things from their perspective.
The first step was to recruit participants for our research and this was carried out using a google form survey and targeting keystone mobile app customers on social media channels and the google play review session.
I Prepared a discussion guide, with a list of possible questions to ask our interview participants and conducted a remote moderated interview session with two qualified participants and the result of this research is shown below:
The quantitative interview conducted with participants shows that
- 50% are male while 50% are female.
- 40% out of the participants I interviewed falls within the range of 18-25years,
- 55% of them falls within the range of 26–35years, while 5% is 36years and above.
- Only 60% of the people that I interviewed use the app while the remaining 40% don’t use the mobile app.
- Only 70% of users use Keystone bank as their main banking app while 30%of them doesn't use it as their main banking app
- 30% of participants don't use other banking apps aside while 70% uses other banking apps because of their seamless transactions.
- 80% of users use the banking app for utility payment while 20% uses it for savings.
Furthermore, I tried to get feedback from users with a one-on-one interview based on their overall feel of the app and based on their task. This gave me a set of pain points I was able to summarize into the following:
- The registration process was long.
- Inactive Fingerprint
- Inability to view older transactions
- They had issues changing their transaction pin
- There was no easy way to reach customer service.
- There are usually network issues while using the app.
- App loads slowly and it is not easy to navigate
- The app is not visually appealing
Current Experience
This is what the current experience look like in the following number. Not all the screens are captured
Validated user persona
These personas are made based on user research. User personas
support user-centered design throughout the lifecycle of the project by
making characteristics of key user segments more salient.
Ideation
With the pain points defined, it was necessary to change the user flow 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 flow.
The solutions(User flow)
I subsequently created a user flow to help organize user’s progress so that users would easily adjust to the functionality of the product and could find everything they need without big effort.
Sketching the solutions
After all the flows have been established, it is more important that I move on to Sketching and wireframes before I start designing mockups and prototypes
Why?
It helps to establish a structure to the application and limit the amount of design iteration we would have to do when it comes to the implementation of the wireframes into the design.
Low-Fid Wireframe
I created a low-fidelity wireframe to represent the skeleton of the page.
Defining the solutions
I have designed the visual interfaces for using this app to get desire.
My aim is to create designs users will find easy to navigate, easy to use, desirable and pleasurable.
Bottom navigation system
The current app makes use of two navigation types; the hamburger menu and the Bottom nav menu style. I changed this style and made it just the bottom nav style where the basic sections are easily accessible (Home, Transfer, Pay bills, More).
Splash Screen
As a UXer, my primary attempt begins by improving the User Experience of everything that surrounds me. One of them is the interface of the Keystone mobile bank, Nevertheless, the job of a UX Designer is not limited to designing only internet-based interfaces. However, I decided to give the splash screen by making it minimal as possible for users, there is a loading screen with the logo that finally leads to a welcome screen that presents you with an option to log in or sign up(Onboarding).
Reducing user churn by optimizing the onboarding flow
The current onboarding process looks confusing, user onboarding is not just about welcoming new customers, instead, onboarding is about showing them around, and setting them up for success. I made sure I minimize the user’s cognitive load.
Every additional call to action makes the screen and the product’s user flow more complicated. Also, I tend to eliminate anything that isn’t necessary for the mobile app’s onboarding sequence. It’s a best practice to keep content and interface elements to a minimum which I opted for a simple and intuitive design.
During the course of my research, I tend to ask 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.
My design requires users to enter their phone number, get a one-time password that confirms they own the account and proceed to create their information to use on the app. These are few onboarding screens from the current app.
For the login screen, I tend to design a new screen that feels more personal to use and easier to log in to.
Improving information hierarchy on the user dashboard
I redesigned the dashboard screen entirely. Here, I used cards to signify different accounts a customer has in the bank. Also, I added a quick transfer to frequent beneficiaries(this is to reduce the number of steps to frequent beneficiaries). The transaction history is also provided so the user can view more than 30days of transactions as opposing what the app currently provides. I also tend to arrange the information hierarchy so a user doesn’t get confused by a busy interface.
Reducing cognitive overload with intuitive navigation on money transfer
Based on the research carried out:
- The current app looks confusing for a new user, complexity and information overload
- It is not visually appealing and it doesn’t fulfil the users’ expectations on how modern mobile banking should look.
- Inability to share and download receipt
The transfer page was redesigned to be more visually appealing, intuitive and also for easy navigation.
Improving accessibility and information recall on bills payment
I do not see anything wrong with the existing payments page, but working with the feedbacks I got; I asked a lot of ‘why’ questions! so that brought about my redesign of it, gave it the same feel as others so it feels natural there’s really nothing to confuse you as a user. and also tried to add a frequent top-up for users.
Improving user navigation on the more page
The more page was designed to maintain consistency and visual hierarchy in design, and also for easy navigation for users
Other screens:
Interactive Prototype:
Using protopie, it was challenging and fun for me to prototype the design. I needed it to be like a real app since I will be testing using my mobile phone. So I prototyped all the major screens and the basic interactions and micro-interactions to give users the feel of a live app.
View link to the interaction here:
Usability Testing
To know if my design has helped solve users issues as highlighted earlier, I invited one user physically to test the prototype against the Current Keystone bank app giving specific tasks and objectives taking note of time used and problems faced(if any). The result was welcoming as positive feedback was received the user and the time taken to do specific tasks was reduced. I also noted down general observations of the participant's actions and errors and their comments.
Conclusion
It was an enjoyable end-to-end experience with interesting insights into how users create better navigation in the app. designing this app was a challenging journey, most especially with the prototyping
When I started this project, I merely wanted to try my hands on creating a better navigation routing for the app, however, as I got into the research phase I discovered more aspects that needed to have a better experience. Also, I have learned more about the general banking industry.
I have enjoyed my time working on this project and I would love to continue in my journey of understanding business and users’ needs to create great experiences for Apps.
Additionally, businesses like Keystone bank should be aware of user experience, and responding to user experience issues from customers will help to retain lots of customers.
Thank you for reading this far!
Feel free to connect with me on LinkedIn, Behance, Dribbble, Twitter and you can also follow me on Medium.
