Category
In 2015, tapping a button to carry out transactions on your FirstBank account from the comfort of your current location felt amazing. However, by the start of 2019, the app was starting to show its age. The user interface was outdated, and the app was slow and difficult to use.
To address these issues, I undertook an ambitious project to redesign the FirstMobile app. The goal was to create a modern, user-friendly app that would be easy to use and navigate.
To address these issues, I undertook an ambitious project to redesign the FirstMobile app. The goal was to create a modern, user-friendly app that would be easy to use and navigate.
***To avoid any future lawsuit, all information in this case study is my own as of 2022 and does not necessarily reflect the views of FirstBank.
Contribution
Carl Emefo — Product designer 🎨
Product designer, UX Research, Prototyping, Usability testing, Design System
Tools used
Figma, Google Forms, Docs, Slides, Sheets, Flowmapp
Duration
4 months
I conducted research, defined the design language and branding, created & refined the UI components, as well as built tokens, and so on for the design library which improved product consistency, and increased overall team productivity.
Customer insights & ideation
I conducted extensive product research and competitive analysis to identify best practices and trends, translating these insights into features that cater to customer behaviors and motivations. I learned that customers were often unable to locate all the core and relevant features offered by the FirstMobile app. Consequently, I introduced features to users like real-time system notifications and payment scheduling while adhering to modern design standards and promoting the company's branding.
*
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 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. As a result, many users gravitate toward 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 services identical to those 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 demographics. 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 throughout the design process: "YOU FIRST."
The challenge was to evolve with customer needs and provide services identical to those 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 demographics. 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 throughout 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 for the iOS system, I tried to ensure that it adhered to the Human Interface Guidelines, and was as engaging as possible.
However, redesigning this app posed different constraints than most projects I’ve worked on. To create a product that offered all the 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, 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 so that, every time the user launched the app, the user flow was intuitive. I also had to put all features needed by the user at their fingertips to enable them to complete transactions without loss of time or effort.
However, redesigning this app posed different constraints than most projects I’ve worked on. To create a product that offered all the 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, 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 so that, every time the user launched the app, the user flow was intuitive. I also had to put all features needed by the user at their fingertips to enable them to complete transactions without loss of time or effort.
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:
- A more streamlined checkout process: Users want to be able to complete their meal orders quickly and easily. This means having a checkout process that is easy to follow and does not require too many steps.
- Real-time availability of menu items: Users want to be able to see which menu items are available before they place their order. This will help them to avoid placing an order for an item that is not available.
- Meal tracking progress: Users want to be kept informed about the status of their order. This means providing them with updates about when their order is placed, when it is being prepared, and when it is ready for pickup or delivery.
- Easy-to-use customer service: Users want to be able to contact customer service if they have any problems with their order. This means providing them with multiple ways to contact customer service, such as by phone, email, or live chat.
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 🔭
Pain Points
I initiated the redesign by conducting extensive user research and interviewing 15 participants aged 20 to 59. Through asking 12 questions and empathy mapping, I gained insights into their experiences with the current FirstMobile app. The main user groups were Firstbank account holders and users of its mobile app. I also reviewed feedback from the App Store and Google Play. The research highlighted challenges beyond my initial assumptions, underscoring the need for comprehensive research before starting any design project. Participants identified key factors influencing their use of mobile banking apps, including:
1
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.
Participants wanted to be able to easily see their account balances and transactions from all of their accounts in one place.
2
Money Transfer
Participants wanted to be able to transfer money between their accounts and to other people quickly.
Participants wanted to be able to transfer money between their accounts and to other people quickly.
3
Bills Payment
Participants wanted to be able to easily pay their bills from their mobile phones.
Participants wanted to be able to easily pay their bills from their mobile phones.
4
Regenerating receipt of past transactions
Participants wanted to be able to easily regenerate receipts for 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 FirstMobile app's user interface cluttered and difficult to use. They wanted a more intuitive and user-friendly design that would make finding the information and features they needed easier. - 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 frustrated by the app's automatic log-off feature, feeling it was overly aggressive. They wanted the option to adjust the log-off timing, which would come in handy, especially if they were in the middle of a transaction, to balance security with convenience. - 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 sometimes being 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 analyzing the data produced by the research, I went further to determine which features would bring much value to the users based on the 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 a hierarchy 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 an intuitive and user-friendly design that would simplify information discovery and access to essential features.
- Easy onboarding process: Users wanted a seamless and efficient signup/sign-in experience. They wanted 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. An option in the settings to increase or decrease the app timeout could solve this.
- Real-time transaction status: Users wanted to be able to track their transactions in real-time and receive notifications when they were completed, eliminating the need to wait for confirmation from the recipient.
Starting the design 🎨
Sketches
Sketch 1
Sketch 2
Sketch 3
Sketch 4
wireframes
Anatomy of the Homepage
Visual Language
Typography
Color Palette
Usability study
Three usability studies were carried out during the prototyping of 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 that the users would request to be included or that should be removed from the design, to ensure that the design was user-centered. The first was carried out after I designed the low-fidelity prototype, the second was carried out 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 that the users would request to be included or that should be removed from the design, to ensure that the design was user-centered. The first was carried out after I designed the low-fidelity prototype, the second was carried out 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
- determine if the key features requested by users from the user research carried out at the start of this project were offered by the prototype
- Identify any parts of the app where users were getting stuck when trying to complete the main user flow.
- assess how user friendly the design of the product was
- 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 remotely on Google Forms, the Reddit community, and in person. Participants were given a link and presented with several tasks to complete in the prototype.
The test was conducted remotely on Google Forms, the Reddit community, and in person. Participants were given a link and presented with several tasks to complete in the prototype.
Usability Study Findings
Users were generally satisfied with the prototype's layout and item arrangement. Some suggested experimenting with a collapsed settings menu, although they acknowledged that the expanded version made it easier to find needed functionalities. The addition of the vaults feature was particularly appreciated for enhancing savings habits without requiring a separate fixed deposit account. During the third usability test, many users mistook the prototype for a real app, describing it as 'incredibly 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
- Make selection options relevant across the prototype for a more unified look and better user flow
- Ensure better accessibility design guidelines while iterating on the porotype to enable better user experience
Refining the design 🧑🏽🔧
High Fidelity 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
Other screens
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.
- Ensuring 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 initially overwhelming when I started because of the number of features that were crammed into the existing app and trying to ensure that I retained the existing features. Still, 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 number of details a designer has to take into consideration while working on a project like this — kudos to designers worldwide.
It was initially overwhelming when I started because of the number of features that were crammed into the existing app and trying to ensure that I retained the existing features. Still, 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 number of details a designer has to take into consideration while working on a project like this — kudos to designers worldwide.
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.
If you've made it this far, thank you! I truly appreciate your time and hope this case study has offered you some valuable insights. Don't forget to say hi, as I do enjoy hearing from different people. Until the next project...
Au revoir👋🏽