Reimagined homepage for payments app
This mobile payment app, developed by a leading financial institution in India, is a UPI enabled initiative to facilitate safe, easy and instant digital payments, but it falls short of acquiring a substantial market share.
As the sole designer on the project, I owned and led design strategy for the app — playing a critical role in scoping and designing the transformative feature set, while modernising the product for its growth journey and future viability.
The reimagined design resonated with key stakeholders, debuted at Global Fintech Fest'23 and has since garnered positive user feedback.
To comply with my non-disclosure agreement, certain elements and information have been masked in this case study. The core design principles and outcomes remain accurate.
India is experiencing a digital payments revolution, with the UPI market expected to double by end of the decade, is fiercely competitive. Three major private players currently dominate, capturing over 95% of all UPI transactions & each distinctively positioned in the market.
Our client saw an opportunity to supercharge growth for their app by a substantial percent by targeting untapped market segments.
We facilitated a workshop featuring insights on winning strategies, growth journeys, and success drivers of leading payment apps.
Through interviews, we explored customer value propositions that drive sustained engagement and build daily habits.
We performed a deep dive into competitor apps, uncovering unique user experiences and payment intervention strategies.
The workshop unpacked the secrets to successful payment apps. We hosted an engaging session for the client with industry leaders to share inspiring real-world stories of leading payment apps. We gained insights into the key strategies and core drivers that fueled the success of these leading apps.
We conducted in-depth interviews with over five industry experts. The interviews helped us prioritise UX fundamentals to unlock distinctive payment experience. We also inquired about actionable learning from their experience that could drive client's scale plan and continuous user engagement on the application.
We integrated our insights from expert interviews with Nielsen's Usability Heuristics to prioritise and define key design principle that enable seamless and intuitive payment experience.
We conducted an in-depth audit of leading global payment apps — focused on analysing key user flows and created an exhaustive flow on Miro. Below are some best-in class experiences that we looked into.
The audit was conducted with the payment's principles in mind — helping surface notable usability and heuristic issues. We identified key flows with high user engagement. Below are some insights for the current experience.
Primary action - Scan/Pay, lacks persistent access across all modules. Users might expect core payment features, to be readily available from any screen, mirroring the ease of access in physical wallets.
High frequency payment features - Scan, Send money, Request money and so on, are not prominently positioned within the interface, reducing the emphasis and discoverability for users.
Offer cards is placed below the first fold and hidden behind an extra click, decreases user engagement and awareness of promotions — critical for the growth.
Primary navigation lacks clear distinguish between primary modules (Home, Services) and settings-related actions (Profile) potentially leading to user confusion and hindering task efficiency.
Access to profile is typically from top menu based on other
payment apps.
Overloads users with a multitude of payment options (Send Money, Pay Bills, etc.), without clear categorisation. This affects the ease of quick browsing and locating specific functions.
Keypad is not open by default, requiring an additional tap before users can enter an amount. This unnecessary step creates friction and can lead to frustration.
Actions like 'back' already exists in the top left corner, its repetition at the bottom weakens the emphasis on the primary action
Absence of accessibility features like automatic torch activation in low light, zoom functionality, or "Show Payment Code" limits user control and restricts task completion.
Current error messages lack clear descriptions and actionable steps which can leave users confused and frustrated.
Missing constant access to help and support across journey can lead unresolved issues and impact user engagement.
Unclear visual cues between viewable and interactive elements can lead to unnecessary taps and clicks, this creates friction, compressing on intuitive and seamless user experience.
Below is the the key scoring of the app along with competitors, offering insights into its market positioning and performance based on payment principles, shedding light on the app's strengths and weaknesses.
The team took a strategic call to prioritise high-impact changes that can be implemented immediately. Since development resources were already allocated for these changes, we prioritised enhancing the Homepage for the first phase, fostering a more engaging user experience.
We revamped the screen layout to be modular, with better categorization and familiar architecture, for better user comprehension and interaction, delivering a more holistic experience. Visually, we maintained a simple yet unique style while implementing planned homepage enhancements to promote user experience and scalability.
'%3e%3cg%20clip-path='url(%23clip1_107_2000)'%3e%3cg%20clip-path='url(%23clip2_107_2000)'%3e%3cpath%20d='M50.7596%2026.3017C50.7596%2012.4741%2039.5501%201.26465%2025.7225%201.26465C11.895%201.26465%200.685547%2012.4741%200.685547%2026.3017C0.685547%2040.1292%2011.895%2051.3387%2025.7225%2051.3387C39.5501%2051.3387%2050.7596%2040.1292%2050.7596%2026.3017Z'%20stroke='%23676B89'%20stroke-width='0.962963'/%3e%3cpath%20d='M15.4121%2026.3456H36.399M36.399%2026.3456L27.8864%2035.138M36.399%2026.3456L27.8864%2017.833'%20stroke='%23676B89'%20stroke-width='0.962963'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_107_2000'%3e%3crect%20width='52'%20height='52'%20fill='white'%20transform='translate(0%200.548828)'/%3e%3c/clipPath%3e%3cclipPath%20id='clip1_107_2000'%3e%3crect%20width='52'%20height='52'%20fill='white'%20transform='translate(0%200.548828)'/%3e%3c/clipPath%3e%3cclipPath%20id='clip2_107_2000'%3e%3crect%20width='52'%20height='52'%20fill='white'%20transform='translate(0%200.548828)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
We refined the Homepage to elevate the app with a distinct visual style. Each component underwent multiple iterations to ensure standard for visual design. The idea was to carve out a niche for our client as they supercharge their growth plan
We opted for a design that prioritized existing visual familiarity over a potentially dramatic option. This ensured a smoother user transition with minimized confusion. Additionally, the second iteration offered a significant advantage in terms of development effort and continuity across the platform.
The team chose a simple yet distinctive style. The core foundation and UI components stayed clean and light, while keeping scalability in mind, to offer users an intuitive and seamless experience.
The reimagined app aims to deliver a personalized, intuitive, and accessible experience by incorporating the key opportunities identified during the research phases.
The reimagined design resonated well with key stakeholders. It made its debut at the Global Fintech Fest'23 and has since garnered positive user feedback.
- Increasing Net Promoter Score (NPS) by 20 points in 3 months
- Design's impact with feedback from our valued customers -
