SPICEMONEY
Revamping of wallet module for web platform
Web Design Consistency, Prototyping, Design Validation Calls, Visual Design, UI Development
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.
PROBLEM STATEMENT
The wallet top-up module had not been updated since its initial implementation.
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.
The goal of this revamp is to create a cohesive Wallet Module which will consolidate all wallet top-up methods in one place. Furthermore, this will provide easy access to other wallet related modules such as wallet history and wallet summary. This is intended to improve accessibility and streamline the user experience.
MY ROLE
We were 2 designers working on this revamp. I led the designs of the web platform, while my fellow designer focused on app designs. Together, we ideated, collaborated, and compiled user flows, ensuring visual consistency across both platforms.
My responsibilities included crafting prototypes and wireframes specific to the web platform, validating them through design validation calls to gather feedback. Additionally, I performed UI integration for the web platform using the Vue framework, ensuring the required responsiveness for front-end development.
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