My role
I worked on the redesign of the FirstMobile App solely by myself. I worked to evolve the service and UI while addressing customer pain‐points related to the banking and transaction experience.
Customer insights & Ideation
I carried out product research as well as competitive analysis to uncover insights and translate concepts into features that address customer behaviors and motivations.
Experience Strategy & Vision
I created frameworks and prototypes as well as journeys, wireframes, prototypes and design specs to picture the vision, design principles and content strategy. This helped to mold ideas, gain alignment and drive decision making.
The challenge of merging traditional banking experience with modern design interfaces
Most traditional banks knowingly or unknowingly design their platforms in a way that makes it hard for them to make a huge design/operational shift and as a result many users gravitate towards more modern banking companies. Since 2015, with its first launch, FirstBank hasn’t been able to avoid becoming a victim of this mentality.
The challenge was to evolve with customer needs and provide identical services to what customers would get over the counter while competing with neo banks for features and experience in Nigeria.
FirstMobile app will pass the modern design standard check for millennials while ensuring satisfaction from users in all age demographic. In redesigning this app, I based the app's architecture on three major elements: the user, the money, and the service provided. I also had to make sure that FirstBank's original ideology and brand signature stuck with me through out the design process: "YOU FIRST".
The challenge was to evolve with customer needs and provide identical services to what customers would get over the counter while competing with neo banks for features and experience in Nigeria.
FirstMobile app will pass the modern design standard check for millennials while ensuring satisfaction from users in all age demographic. In redesigning this app, I based the app's architecture on three major elements: the user, the money, and the service provided. I also had to make sure that FirstBank's original ideology and brand signature stuck with me through out the design process: "YOU FIRST".
Existing competing platforms...
The deliverables
I strived to keep the design as simple, beautiful and engaging as possible. Since it was designed with the iOS system in mind, I tried to ensure that it adhered with the Human Interface guidelines.
However, redesigning this app posed different sets of constraints than most projects I’ve worked on. To create a product which offers all features of an over the counter bank experience while integrating key features of neo banks, the app might be dense and some features might be difficult to locate. So, in order to ensure adequate usability by the user, I had to ensure that all banking actions were easy to locate.
This meant that I had to design the interface in a way that, every time the user launched the app, the user flow was intuitive and put all features needed by the user at their fingertips to enable them complete transactions without loss of time or effort.
However, redesigning this app posed different sets of constraints than most projects I’ve worked on. To create a product which offers all features of an over the counter bank experience while integrating key features of neo banks, the app might be dense and some features might be difficult to locate. So, in order to ensure adequate usability by the user, I had to ensure that all banking actions were easy to locate.
This meant that I had to design the interface in a way that, every time the user launched the app, the user flow was intuitive and put all features needed by the user at their fingertips to enable them complete transactions without loss of time or effort.
*
The high-res prototype made in Figma will be available for you to view at the end of this page. Ready? Let’s get started!
.gif)
The road taken & designing a prototype
As with my usual thoroughness, I conducted multiple research and analysis in order to receive feedback to what needed improvement and what worked satisfactorily. When it came to the UX process, my aims for this redesign were based on the following factors:
- Identifying primary user case scenarios, challenges faced and potential solutions
- Analyzing and determining the app's major functionalities
- Creating easily locatable and navigable information architecture
- Exploring the use of modern design trends to provide user-focused solutions for the user's financial journey
- Creating a delightful design while promoting the company's existing brand signature
Once a factor was addressed and approved by the users during the user testing phase, I moved on and began implementing the points in the next stage. Concurrently while working on that, I would ensure that solutions to issues arising from factors not initially taken into consideration was executed.
Understanding the user 🔭
User research
I began the redesign process by conducting extensive user research. A total of 15 participants were interviewed, ranging in age from 20 to 59. By asking them 12 questions and using empathy mapping, I gained valuable insight into the successes and frustrations they experienced with existing mobile banking apps. The primary user groups included Firstbank account holders and users of Firstbank's mobile app solutions. Additionally, I analyzed user reviews on the App Store and Google Play.
The research revealed that the challenges faced in using banks' mobile apps extended far beyond my initial assumptions. It emphasized the critical importance of conducting comprehensive research before embarking on any design project. A number of key factors were identified by the participants as influencing their use of mobile banking apps. According to them, the following factors defined their use of mobile banking apps:
The research revealed that the challenges faced in using banks' mobile apps extended far beyond my initial assumptions. It emphasized the critical importance of conducting comprehensive research before embarking on any design project. A number of key factors were identified by the participants as influencing their use of mobile banking apps. According to them, the following factors defined their use of mobile banking apps:
- Monitoring and reviewing multiple accounts: Participants wanted to be able to easily see their account balances and transactions from all of their accounts in one place.
- Money transfer: Participants wanted to be able to easily transfer money between their accounts and to other people.
- Bills payment: Participants wanted to be able to easily pay their bills from their mobile phones.
- Regenerating receipt of past transactions: Participants wanted to be able to easily regenerate receipts for past transactions.
This research helped me understand the challenges users faced when using mobile banking apps. It also helped me identify the key factors that users were looking for in a mobile banking app. This information was essential in the design of the new FirstMobile app.
Competitive analysis
I wanted to improve the FirstMobile app, so I checked out what other banks were offering. I compared their solutions to the existing FirstMobile app and identified the benefits and challenges that users were experiencing. I came away with five major pain points that users encountered while using existing solutions in the market:
- Poor user experience — Users found the user interface of the FirstMobile app to be cluttered and difficult to use. They wanted a more intuitive and user-friendly design that would make it easier to find the information and features they needed.
- Delay in funds transfer — Users were frustrated with the lack of transparency and visibility into the status of their funds transfers. They wanted to be able to track their transfers and know when they had been completed, without having to rely on the recipient to confirm.
- Automatic log-off from the app — Users were annoyed by the app's automatic log-off feature. They felt that it was a security measure that was too aggressive. They wanted to be able to stay logged in for longer periods of time, especially if they were in the middle of a transaction. Although it’s a security feature, design is generally meant to assist rather than enforce.
- Setting up recurring transactions — Users found it difficult to set up recurring transactions in the FirstMobile app. They wanted a more user-friendly process that would allow them to set up recurring payments with just a few taps.
- Double charges due to network issues — Users were frustrated by the fact that they were sometimes charged multiple times for the same transaction due to network outages. They wanted to be notified of any potential service disruptions so that they could take steps to avoid being double charged.
Personas
From the data gathered, I created two personas which inherited the attributes I needed to be able to solve the pain points I got as feedback during the user research and competitive analysis phase. These personas were used as a design guide for the product.
Reload page if other slide isn't visible
Feature prioritization
After analysing the data produced by the research, I went further to determine which features would bring much value to the the users based off their challenges faced in the use of the existing product. This not only ensured that my redesign goals were met, but it also helped me in focusing and maintaining heirachy of the features with the most impact on the user towards completing their journey in the process of developing it. The features were as follows:
- Improved user interface: Users wanted antuitive and user-friendly design that would simplify the discovery of information and access to essential features.
- Easy onboarding process: Users wanted a seamless and efficient signup/sign-in experience. They wanted to be able to create an account or sign in to their existing account with just a few clicks. Users with multiple FirstBank accounts also expressed the need for a straightforward account switching mechanism.
- Real-time alerts: Users should be notified in real-time of any service disruptions so that they can take steps to avoid being double charged.
- ability to generate receipts of past transactions
- toggle to show/hide account balance to prevent prying eyes from viewing finances
- Extended login duration: Users wanted to be able to stay logged in for longer periods of time, if they were in the middle of a transaction. This could be done by providing an option in the settings to increase or decrease the app timeout.
- Real-time transaction status: Users wanted to be able to track their transactions and know when they had been completed, without having to rely on the recipient to confirm.
Starting the design 🎨
Sketches
wireframes
Usability study
Three usability studies were carried out in the course of prototyping this product.
After creating the paper and low fidelity digital wireframes, it was time to carry out research to determine if users could complete the user flow of the major features and changes I had implemented, while trying to see if there were other functionalities which the users would request to be included or that should be removed from the design, in order to ensure that the design was user centered. The first was carried after I designed the low fidelity prototype, the second was carried in the process of producing the high fidelity designs, and the third was carried out after the high fidelity prototypes had been designed. My main goals were:
After creating the paper and low fidelity digital wireframes, it was time to carry out research to determine if users could complete the user flow of the major features and changes I had implemented, while trying to see if there were other functionalities which the users would request to be included or that should be removed from the design, in order to ensure that the design was user centered. The first was carried after I designed the low fidelity prototype, the second was carried in the process of producing the high fidelity designs, and the third was carried out after the high fidelity prototypes had been designed. My main goals were:
- determine if the app design was modern and appealing as well as easily navigable
- measure user-centric design of the app in order to find out if the product was user-friendly
- determine if the key features requested by users from the user research carried out at the start of this project was offered by the prototype
- prioritize feedback in order to iterate further on the design
The participants were people who were customers of FirstBank and made use of their current mobile app as well as people who also made use of other financial apps. As usual, I made certain to include people with various accessibility issues, because designing with accessibility in mind makes a product good for everyone!The test was conducted both remotely on Google forms, the reddit community and in person, where the participants were given a link and then presented several tasks to complete in the prototype.
Usability Study Findings
Most of the users were pleased with the layout and arrangement of the items in the prototype. A few of them commented on how I made the settings page expanded, and wanted me to experiment with a collapsed settings menu, although they were quick to admit that the expanded option made it easier for them to easily locate whatever functionality they required from the app at every point in time. Users especially loved the eventual addition of the vaults feature in order to turbo boost the saving habits of users with savings account without requiring them to open an additional fixed deposit account. Most thought the prototype was a real app during the third usability testing because, in their own words, "it felt so realistic" 😅
Round 1 Findings: 24 anonymous participants
- 94% success rate on navigating the prototype and initiating and completing a transaction
- 92% users found the expanded settings menu easier to locate features
- 20% of the participants expressed confusion on the placement of the logout button for their account
Round 2 Findings: 20 anonymous participants
- 99% success rate on navigating the prototype and initiating and completing a transaction
- 98% users found the expanded settings menu easier to locate features
- 15% of the participants expressed concern on the accessibility state of the transaction entries
Round 3 Findings: 33 anonymous participants
- 100% success rate on navigating the prototype and initiating and completing a transaction
- 100% users found the expanded settings menu easier to locate features
- 45% of the participants observed some inconsistencies in some selection fields
Insights
Based on the results from these usability studies, I was able to map out key insights that would be my guidelines for iterating on the prototype which includes:
- Move the logout button to the edit profile section for a more intuitive experience
- Create a better onboarding experience and include subtle guides to prompt users while navigating the prototype
- Ensure better accessibility design guidelines while iterating on the porotype to enable better user experience
- Make selection options relevant across the prototype for a more unified look and better user flow
Refining the design 🧑🏽🔧
Mockups
Due to the insights generated from the usability tests, I made some iteration on the app interface which included making the account information card on the dashboard more informative as well as giving the app a more polished and refined look. I also consulted the WCAG website and used some accessibility plugins to ensure my design was accessible while still maintaining the company's branding.
Before usability study
After usability study 2
The feature to inform users of their exact transaction status progress by differentiating sent funds and pending funds was greatly appreciated by the user test groups because they figured that if messaging/social media apps could tell when messages had been delivered to their recipients, what more of banks that deal with practically their life savings 😉
Before usability study
After usability study 2
High Fidelity Mockups
The high fidelity prototype presented a modern and more organized layout taking the company’s signature branding and user needs into consideration.
Onboarding
Login screen
Home UI
Transfer UI
.gif)
Accessibility Considerations
The following accessibility considerations were taken into account:
- Ensuring that in the transaction history, transactions were paired with icons which were color-coded for easy recognition.
- I ensured that the contrast of the colors applied was up to the WCAG guidelines
Wrapping up
Impacts and Learnings
Although to be honest, I started this project with the intention of fixing things that were of importance to me, but in the process of carrying out usability studies I found out that users wanted much more from a traditional banking platform and I had to step up to the challenge of creating a solution for them.
It was overwhelming initially when I started out because of the amount of features that were crammed into the existing app and trying to ensure that I kept retained the existing features, but I decided to tackle the project bit by bit until I got to a stage where everything became easier to grasp. It just made me realize the amount of details as a designer, one has to take into consideration while working on a project like this — kudos to designers all around the world.
It was overwhelming initially when I started out because of the amount of features that were crammed into the existing app and trying to ensure that I kept retained the existing features, but I decided to tackle the project bit by bit until I got to a stage where everything became easier to grasp. It just made me realize the amount of details as a designer, one has to take into consideration while working on a project like this — kudos to designers all around the world.
Next Steps
- Conduct more user testing to enable me gain insight on how best to improve the product’s features for users.
- Iterate the prototype based on the new insights I'll gain from carrying out future usability studies.
- Use it as a stepping stone to work further on future products.
- …and most importantly, use it to get an opportunity to positively impact lives on a global scale while pursuing my company's vision.
If you got to this stage and you enjoyed this article, wow! I really do appreciate you and hope my work made an impact on your thinking. Don't forget to say hi, as I do enjoy hearing from different people........until the next project, Au revoir. 👋🏽
Thank you!