Introduction
MyRecharge.ng, an online electricity web application, is built to serve over 5 million Nigerian customers, facilitating easy electricity token top-ups on their prepaid meters to access electricity in their homes, offices, and businesses.
Accessing electrical units remains a significant challenge for the African continent, with manual processes often being utilized.
MyRecharge.ng simplifies access to electrical units via a seamless mobile and web application.
My Role + Team
The project team was made up of a senior DevOps/engineering manager, a front-end engineer, a QA tester, a product owner, and myself. On this project, I primarily worked on user research, information architecture, design systems, UI design, prototyping, and user testing.
Ewomazino
Product Designer
UI/UX
Samuel
Solution Architect/
Engineering Manager
Ani
Product Manager
/Owner
Utibe
Front-end Developer
Mumin
QA Tester
Problem + Customers
In 2022, following the launch of MyRecharge.ng 1.0, we received an increasing number of feedback and calls from customers requesting their cards to be stored on the application for recurring payments. Additionally, they expressed a desire to avoid seeing a failure response after payment and to resolve issues without having to reach out to support; they prefer an automated process.
To address these concerns and attract new users, I embarked on enhancing the platform’s user experience.
Observed Product Metrics
- Decrease in Retention
- Decrease in CSAT Scores (Customer Satisfaction Scores)
- Increase in Customer Negative Feedback
Data Gathering
To gather insights, I conducted extensive research to understand user preferences and pain points. I sought answers to key questions:
- Do users desire card storage for recurring payments?
- Do users want to avoid seeing failed responses after payments?
- Do users prefer issue resolution without reaching out to support?
- Do users prefer automated processes for issue resolution?
I initiated research to uncover customers’ preferences regarding stored payment cards, aversion to post-payment failure responses, desire for issue resolution without support contact, and preference for automated issue resolution. I conducted email surveys, and online questionnaires targeting onboarded users who hadn’t made successful payments and interviewed existing customers who had lodged complaints about their platform experience.
Research
Recruitment
Criteria
Onboarded on the platform but have not completed a successful payment
Expressed dissatisfaction with the platform’s payment process or overall experience
Active account and engagement with the platform
Research
Objectives
Objective 1
Understand user preferences regarding the storage of payment cards for recurring transactions on the MyRecharge.ng platform
Objective 2
Identify user perceptions and concerns regarding experiencing failure responses after completing payments.
Objective 3
Explore user expectations and preferences for issue resolution processes, including the desire for self-resolution versus reaching out to support.
Objective 4
Investigate user attitudes towards and preferences for automated processes for issue resolution on the MyRecharge.ng platform.
Questions + Findings
Research
Setup
For this research, I conducted semi-structured interviews with 16 users. I had them share with me their experience buying tokens from the platform, and the questions I asked were to gain insights into the research objectives.
Research
Questions
Objective 1
Do you prefer having your payment card stored on the MyRecharge.ng platform for recurring transactions? Why or why not?
How would you feel about the security of your payment card information if it were stored on the platform?
Objective 2
How do you feel when you encounter a failure response after completing a payment on the MyRecharge.ng platform?
Have you experienced any inconvenience or frustration due to failed responses on the platform?
Objective 3
Do you prefer resolving issues on the MyRecharge.ng platform by yourself, or do you prefer reaching out to support for assistance?
What are your expectations regarding the speed and effectiveness of issue resolution processes on the platform?
Objective 4
How do you feel about the idea of automated processes for issue resolution on the MyRecharge.ng platform?
What features or functionalities would you expect from an automated issue resolution system on the platform?
Research
Findings
- Many users expressed a preference for storing their payment cards on the platform to streamline recurring transactions and avoid repetitive entries.
- Security concerns were raised by some users regarding the storage of payment card information, indicating a need for reassurance or enhanced security measures.
- Users expressed frustration and dissatisfaction when experiencing failure responses after completing payments, highlighting a negative impact on user experience.
- Expectations for automated systems included quick response times, accurate problem diagnosis, and user-friendly interfaces for easy interaction.
- Many users reported inconvenience and delays caused by failed responses, affecting their trust and confidence in the platform.
- Users exhibited varying preferences regarding issue resolution, with some preferring self-resolution for convenience, while others preferred reaching out to support for assistance.
- Speed and effectiveness were key expectations for issue resolution processes, with users expressing a desire for swift and efficient resolution to minimize disruptions.
- Users generally showed positive attitudes towards automated processes for issue resolution, acknowledging the potential for faster and more efficient problem-solving.
Refined Persona
Through primary and secondary research, I have developed four refined personas that closely reflect our target audience. These personas encapsulate the prevalent challenges and aspirations encountered by users, guiding us toward tailored solutions for their unique needs.
Persona 1:
Convenience-Seeking Consumer
Serah
Age 28 | Marketing Executive
Sarah leads a busy lifestyle, balancing her demanding job with personal commitments. She values convenience and efficiency in all aspects of her life, including utility payments. She prefers streamlined processes that save time and effort.
Pain Points
Limited time for manual payment processes, frustration with repetitive tasks, desire for hassle-free transactions.
Goals
Limited time for manual payment processes, frustration with repetitive tasks, desire for hassle-free transactions.
Persona 2:
Security-Conscious User
David
Age 35 | IT Consultant
David is highly security-conscious, especially when it comes to online transactions. He prioritizes data privacy and safeguards against potential risks. He seeks platforms that offer robust security measures and prioritizes the protection of personal information.
Pain Points
Concerns about the security of stored payment card information, and reluctance to share sensitive data online.
Goals
Ensure secure payment transactions, trust in the platform’s security protocols, and maintain control over personal data.
Persona 3:
Tech-Savvy Enthusiast
Aisha
Age 25 | Software Developer
Aisha is tech-savvy and enjoys exploring new digital platforms and functionalities. She appreciates innovative features that enhance user experience. She seeks platforms that offer advanced capabilities and seamless integration with digital tools.
Pain Points
Frustration with outdated or inefficient platforms, desire for user-friendly interfaces and intuitive navigation.
Goals
Utilize technology for efficient utility management, and leverage advanced features for personalized experiences.
Persona 4:
Budget-Conscious User
John
Age 40 | Small Business Owner
John is mindful of his expenses and seeks cost-effective solutions for managing utilities. He values transparency and affordability in service providers and prioritizes platforms that offer competitive pricing and value for money.
Pain Points
Concerns about unexpected charges or hidden fees, frustration with expensive utility management solutions.
Goals
Minimize utility expenses, optimize budget allocation for essential services, and find affordable and reliable payment options.
The Goals
For this project, I had clearly defined goals.
- Improve accessibility: Enhance the platform’s accessibility features to ensure inclusivity and usability for all users, including those with disabilities.
- Optimize performance: Address any performance issues to ensure the platform operates smoothly and efficiently, even during peak usage times.
- Enhance security measures: Implement robust security measures to safeguard user data and protect against potential cyber threats or breaches.
- Expand payment options: Introduce additional payment methods to provide users with more flexibility and convenience when purchasing electricity tokens.
Expected Outcomes
For this project, I had clearly defined expected outcomes.
- Increased user base: Achieve a significant increase in the number of new customers, surpassing the target of 4,000 new customers within four months post-launch.
- Improved CSAT scores: Observe a positive trend in customer satisfaction scores, indicating that users are more satisfied with the platform’s performance and features.
- Enhanced platform reliability: Users should experience improved platform reliability and stability, leading to fewer technical issues and disruptions.
- Enhanced trust and loyalty: Build trust and loyalty among users through improved security measures and expanded payment options, resulting in increased user confidence in the platform.
User wants & needs
Based on the user personas’ wants and needs I have prioritized in my workshops, here are 5 Must-Have and 5 Should-Have features for the project:
Must-Have
- users to securely store payment card details for quick and easy recurring transactions, addressing the convenience-seeking behavior of our users.
- Implement mechanisms to minimize or eliminate failure responses after completing payments, ensuring a seamless and frustration-free user experience.
- Introduce automated processes for issue resolution to enable users to resolve common issues without the need to reach out for support, meeting the expectations of users seeking efficient and self-service solutions.
- Strengthen platform security measures to protect user data and ensure user trust and confidence, catering to the security-conscious behavior of our users.
- Enhance accessibility features to make the platform more inclusive and usable for users with disabilities, aligning with the needs of our diverse user base.
Should-Have
- Implement features to increase user engagement, such as personalized recommendations or loyalty programs, to encourage continued use of the platform and foster user loyalty.
- Integrate feedback collection mechanisms into the platform to gather user input and insights continuously, enabling iterative improvements based on user feedback and aligning with the user-centric approach of the project.
- Introduce additional payment methods to provide users with more flexibility and choice when purchasing electricity tokens, meeting the preferences of budget-conscious users who seek cost-effective solutions.
Information Architecture
For the project, my approach to the information architecture involved a strategic redesign of the application to accommodate the new feature seamlessly.
I began by creating a comprehensive UX sitemap to visualize the app’s structure, allowing me to streamline the user journey by removing unnecessary interactions and emphasizing key functionalities.
By strategically placing features within the app, I ensured that users could access essential functions within three taps or less, enhancing usability and facilitating intuitive navigation.
Low Fidelity + Wireframing
For the low-fidelity and wireframing phase of the project, I adopted a collaborative approach with core stakeholders. I conducted frequent shows and tells sessions, providing updated design decks and wireframe cases for review before each session.
These meetings served as valuable forums for developers to highlight any platform constraints and for the business team to offer insights guiding design decisions.
Additionally, I involved members from the customer support team, leveraging their relevant insights gained from interacting with customers who had requested specific features.
Towards the project’s conclusion, I convened the team for a formal design review to solidify decisions and ensure alignment across all stakeholders. This collaborative process ensured that the wireframes effectively addressed user needs while considering technical constraints and business objectives.
Beginner Design System
In building the beginner design system for the project, I adopted a structured approach rooted in the principles of atomic design.
Starting with the brand’s core elements such as colors and fonts, I established the foundation of the design system, meticulously crafting a typographic scale and color palette within Figma. Utilizing the atomic design methodology, I systematically developed atoms, molecules, and organisms to ensure a comprehensive and cohesive system.
Throughout the process, particular attention was paid to the brand colors, which were rigorously tested against WCAG accessibility guidelines to ensure inclusivity and compliance.
Hi-fidelity and Design Explorations
By leveraging insights gathered from user testing and incorporating stakeholder input, I refined the design to ensure optimal usability and functionality. The final screens reflect a culmination of this collaborative process, showcasing a polished and user-centric interface that meets the project’s objectives and exceeds user expectations.
Developer Handoff
As we approached the final handoff phase, I carefully reviewed my handoff checklist to ensure a seamless transition for the engineers, aiming for a smooth and efficient process as we move toward project completion.
Interaction Design Prototypes
I leverage my expertise in motion design and utilize advanced Figma prototyping techniques to effectively communicate screen and UI interactions to the development team.
Hi-fidelity User Flows
I presented the hi-fidelity user flows to provide engineers with a comprehensive view of the solution’s interaction points in context, ensuring clarity and alignment with the design vision.
Component References
I provide references to components from the design system and emphasize any unique isolated local elements specific to the current handoff.
Video Walkthrough
I provided a video walkthrough using Loom, linked within the Figma file, to offer developers and stakeholders a convenient way to follow the solution with guided answers and context.
Testing…
In the testing phase of the project, I initiated a soft launch of the redesigned app and feature, engaging a group of opt-in beta users to gather insights and usability data.
I created a dedicated testing environment to promptly address application bugs and received constructive feedback from users. Through rapid iterations driven by the received data and valuable feedback, I ensured continuous improvement of the application and feature.
Post Launch Reflections
At the project’s conclusion, we surpassed our expectations with a 50% increase in CSAT score and the addition of 4,621 new users in the third-month post-launch, exceeding our initial projections significantly.
80K +
Active Users
Previously 20K +
2024 Goal 70K
Vision 1M active users
64%
Improved CSAT
Previously 42%
2024 Goal 60%
Vision 90%
78%
App Adoption
Previously 32%
2024 Goal 70%
Vision 90%