SPICEMONEY
Wallet Revamp
Redesigning the user experience of wallet top-up flow for web platform
Spice money provide diverse digital and financial services to rural India on its website and app both platform for their users i.e retailers and distributors. Like most financial services, they provide a digital wallet for transactions on their platform. There are multiple modes through which user can top up their wallet. However, the module is too old and scattered.
The instant wallet load option is located in a different section compared to the manual wallet load option. Additionally, wallet history and wallet summary have different access points. The overall flow lacks symmetry, with inconsistent visual elements across the app and web interface.
PROBLEM STATEMENT
The wallet top-up module had not been updated since its initial implementation.
The goal of this revamp is to create a cohesive Wallet Module that consolidates all top-up methods and provides easy access to wallet history and summary. This aims to improve accessibility and streamline the user experience.
My Role
Two designers worked on this revamp. I led the web platform design, while my colleague focused on app designs. Together, we ideated, collaborated, and ensured visual consistency across platforms.
​
My tasks included creating web-specific prototypes and wireframes, validating them through feedback calls, and performing UI integration using the Vue framework to ensure responsiveness.
My Approach
Requirement Undestanding
I began by partnering with fellow designers and product stakeholders to understand the key requirements. The existing scattered wallet top-up flow caused difficulties for users in locating and using the feature. Additionally, there was a lack of symmetry in the flow, with inconsistent visual elements present throughout the app and web interface.
Research
We conducted research on our existing wallet page and analyzed data collected during the discovery phase, as well as user feedback and pain points. Additionally, we reviewed the wallet pages of competitor platforms to identify best practices and trends in the industry.
User journey
After research we began working on the flow and designs. We developed two flows:
Mode First Approach
In this flow, users are prompted to select a Payment Mode before entering the amount and other details.
However, we discovered an issue in this flow where users had to re-enter the amount if they changed the payment mode. Additionally, comparing charges across different modes was not possible simultaneously, which negatively impacted the user experience.
Amount First Approach
This flow involved users entering the amount first and then selecting the payment mode and providing other details.
We observed that users encountered a drawback in this approach when they needed to edit the entered amount, as they had to navigate back a step.
Wireframes
To explore different layout options, I created two design variations for the web platform: one with a vertical option and another with horizontal tabs.
Horizontal
Vertical
Validate
We conducted design validation calls with our users to validate our designs and gather feedback. We presented both designs to Adhikari's(users) and asked which flow they preferred? Which payment mode they used most? We also asked what other information or details they needed on the screens? Which design layout they find it easier?
Implementation
We took the feedback on the wireframes and prototypes and iterated on the designs based on the insights received. After the design was validated and signed-off, I proceeded with UI implementation of the new wallet page. This involved converting the design to HTML code, collaborating with development team to make the necessary changes, and participating in UX testing to ensure that the new wallet page was functioning smoothly, without bugs, and user-friendly.
Result
The revamp of our wallet page resulted in several positive outcomes. Some Adhikari users reported improved ease of use, better accessibility to wallet-related features, and increased satisfaction with the platform.
​
The iterative process of user validation and refinement was key in achieving these positive results. This has positively impacted our platform's user engagement, retention, and overall user experience, reinforcing our commitment to continuous improvement and delivering a superior UX to our B2B customers