During my time at Vigoplace, one of my primary responsibilities involved redesigning the mobile wallet interface. The mobile wallet is an integral part of the app as it allows users to make payments for goods and services, send and receive funds, and request payout to their traditional banks. I focused on improving the user experience of this feature.
Role - UI/UX Designer
Industry – Fin Technology
Tools - Figma, Maze, Google docs, Figjam
Duration - 4 weeks
The support team received critical feedback from users about the wallet feature. Users were complaining about being unable to send money or fund their wallets because they could not navigate the feature.
They often got lost because they were confused and didn't know what to do. When this was brought to my attention I tested the feature myself to see why our users were unhappy and these were my findings.
Identifying pain points
Looking through the app and the reviews we got for the feature I could identify some major user pain points such as
The payout process needed to be shorter. If a user wanted to request a payout, they had to start by adding a payment method. Then their payout would be moved to the request history pending until payment.
The current payout flow was very different from what people were used to in traditional bank apps, which could be revised to make it easier for new users to follow along.
Users could not fund their wallets because that particular button was hard to find. Primary actions should be visualised clearly so users can easily navigate the feature.
Some steps in the process could be automated to reduce the time spent to complete a payment
The app was challenging for users to use and my goal was to work with the team to improve the overall experience. The goals for the project include the following
Reduce user error rate and increase customer satisfaction
Design a user-centric flow to help users complete tasks quickly and intuitively
Reduce time spent on completing tasks
Deliver a delightful user experience for the users.
The current user flow wasn't working for the app because it left users unhappy and unable to complete tasks. I compared the process with other apps on the market to see where ours was lacking and what we could improve on.
When I was confident with the reworked flow I sketched some wireframes to inform the design for the mockups.
#Transferring funds
The initial flow for transferring funds out and within Vigo wallet was problematic. The UI was confusing and users were left unhappy. Figuring out a new direction was the next course of action.
First, I broke down transferring funds into 2 key actions. Users had the option to either transfer funds to a local bank account or another Vigo user. Each step had its unique flow and account confirmation was automatically embedded into the flow.
Before
After
#Funding wallet
In the initial flow, the Fund Wallet button was hard to find. I couldn't find it myself when I launched the app and had to ask one of the developers to help me out, much less the average user.
I placed that button alongside the transfer button, top and centre. I also cut down the no of steps in the process and streamlined it to card payments and virtual transfers.
Before
After
Since I worked on the mobile app I also had to reflect the same changes to the web app. I made sure to stick with the design guidelines irrespective of the platform so users on either or mobile did not miss out on anything and could fulfill tasks promptly.
Homepage
Fund wallet
Virtual Payment
Dont make users think
This is a great product but nobody cares how useful your product is if they can't use it. We must always keep the users in mind when designing a product.
Your users are not the team working on the product but the random millennial or Genz that comes across your product one day hoping it will fulfil their needs. If it doesn't the product is termed poor and you lose users along the way. That is something I think every designer should have at the back of their mind.