Pocketmoni Redesign
A complete redesign of etranzact’s mobile wallet app
Type: Mobile app
Industry: Fintech
Year: 2023
Tool: Figma
Processing over 1.8 million Financial Transactions
PocketMoni is a mobile payment solution operated by eTranzact. It allows users to perform financial transactions like money transfers, bill payments, airtime top-ups, and basic banking services through their mobile devices. Since Pocketmoni’s approval by the Central Bank of Nigeria in 2012, it has acquired a user base of more than 1.1 million users and processed over 1.8million transactions worth $600m.
However more mobile payment solutions started evolving in Nigeria offering better visual designs and user experiences. Since then, many issues were continually raised about the inefficiencies of the application. Given the numerous competition for Pocketmoni, this lead to a lower adoption and retention rate by users.
A truckload of Usability issues.
I joined the etranzact team as a Junior Product Designer in 2023 and I was given the task to Redesign the Pocketmoni app. After doing a UX Audit of the previous app, I found that it had a truckload of usability issues that related to complex navigation, unresponsive design, a lack of visual appeal, ineffective onboarding process and very confusing information architecture.
Users struggled to navigate the app efficiently and find key payment features. The design was outdated with a colour scheme and typography that did not align with modern design standards. New users found the onboarding process overwhelming with too much information presented at once. Due to these issues, the app had low user adoption rates. Some of the issues that were repeatedly reported by users are listed below:
The Goals of a Redesign
Before I commenced the redesign of Pocketmoni, I had to be clear on the goals of the redesign and I came up with the following:
- Identify usability issues through research.
- Build personalized experience for users.
- Improve the visual design of the app.
- Improve user experience on the app.
- Create a simplified user interface
- Implement intuitive navigation
- Implement a streamlined information Architecture
Design Process
Research and Analysis
I conducted user interviews to gain a deeper understanding of the needs and challenges associated with the PocketMoni mobile app. I posed targeted questions to explore how users interact with the app, their preferences, any difficulties faced, and recommendations for improvement. I also carried a qualitative and qunatitaive analysis by running an online survey and having a 1:1 interview with some of Pocketmoni users. To present this information effectively, I developed an empathy map that categorizes users’ thoughts, feelings, and experiences, providing a comprehensive overview of their perspectives.
Empathy Map
User Persona
User Flow
After creating the information architecture for the app, we were able to narrow down the flows and core features for the app.
Visual Design
- Personalisation features
- Account Information
- Users Account Balance
- Quick Actions
- Transaction Statistics
- Recent Transactions
- Intuitive Navigation Bar
- Simplified Information Display
- Transaction Chart
- Clear Layout
- Security features; Lock icons
- Fund Wallet
- Settings
Introducing Splashscreens
Before the Splash screens were introduced, users were met with a blank screen during app loading. This created a lack of engagement during startup. From the research, I found that many users perceived the the blank screens as delays as they were unsure if the app was loading or frozen. I found from competitive analysis that other competitors leveraged on Splash screens to establish immediate recognition.
I proceeded to design a minimalist splash screen that emphasized Pocketmoni’s logo and a simple, 1 second animation giving the app a modern feel. Introducing Splashscreens led to an increase in user engagement, enhanced brand recognition and improved user perception.
A better Onboarding Experience
Challenges
1. Unclear call-to-action buttons leading to confusion and high drop off rate during onboarding.
2. Bad typography: Inconsistent font usage and poor hierarchy.
3. The Quick action buttons on the onboarding page were inactive, they also should not be there as it’s too early. Users are not familiar with the app yet and that could overwhelm them.
Solutions
1. Consistent font usage and improved hierarchy.
2. Clear, prominent and direct CTA’s with visual emphasis.
3.The Quick action buttons are now shown on the homepage only.
An optimized Homepage
Challenges
1. Outdated Homepage design.
2. Bad typography: Inconsistent font usage and poor hierarchy.
3. The arrangment of quick actions is unappealing and not homogeneous, the icon for “fund account” is inside a box while the other icons aren’t.
Solutions
1. A streamlined layout
2. I designed a modern and engaging interface.
3.The CTAs are prominent and users are able to carry out transactions and see their key balances without leaving the homepage.
A Flawed Sign Up Process
The previous USSD signup process for the PocketMoni app was flawed due to several key issues:
1. Complexity: The process involved multiple steps , making it cumbersome for users to complete.
2. Limited User Feedback: The USSD process provided minimal feedback to users, which meant they had little visibility into their progress or any errors that occurred, leading to uncertainty and a poor user experience.
3. Incompatibility with Modern User Expectations: USSD is a text-based system that doesn’t support rich user interfaces or interactive elements, which contrasts sharply with the more dynamic and user-friendly experiences expected from modern mobile applications.
A secure SignUp
An Improved Login Page
Challenges
1. Outdated design.
2. The Quick action buttons on the login page were inactive, they also should not be there as it serves no purpose.
3. Weak security features.
Solutions
1. A simplified user interface.
2. Enhanced security features and the option to login via facial recognition or fingerprints.
3. A responsive deign.
A lineup of new awesome features
Style Guide
User Feedback
First off, the interface is so intuitive and user-friendly. The new layout is clean and modern, making it easier to navigate compared to the previous version. I loved the transaction charts where I can see my income and expenses, which keeps on top of my finances. and with the new homepage, I could see all my key balances at a glance. It's like they read my mind! I am such a lazy person and I am so happy I no longer have to manually input my password every single time I have to login, thanks to the biometric login feature.
Overall, I can confidently say that the new Pocketmoni app has made my banking experience seamless . With its user-friendly interface, improved homepage and other cool features, I'll definitely use it for all my money transfers and bill payments. Well done! ❜❜
The Outcome
The redesign of the PocketMoni app led to several notable improvements, enhancing both functionality and user satisfaction. The major outcomes include:
1. Improved Security Features: The integration of fingerprint and face recognition for login significantly increased convenience and security, allowing faster access to accounts while maintaining strong protection.
2. Enhanced User Interface (UI) and Experience (UX): The streamlined design, with a cleaner layout and personalized homepage, made the app easier to navigate, reducing complexity for users.
3. Increased number of transactions: We processed over 2 billion Naira in payments since the redesign .
4. Growth in the number of users: After the redesign. there was a significant increase in the app’s user base. Pocketmonis users increased by 50%.
5. Increased customer retention rate: Since the redesign of Pocketmoni, we achieved a 30% increase in the customer retention rates.
Overall, the redesign successfully addressed many previous shortcomings, resulting in a more user-friendly, secure, and visually appealing app.