Redesigning a 2-in-1 wallet plus finance budgeting app
THE CHALLENGE
Fragmented design struggles to deliver unified experience
By combining the features of wallet and finance budgeting FinGuard is designed to make financial management easier and more accessible for everyone. With increasing usage of financial apps in India, the company saw a gap in the market for an app that combines wallet and personal finance management in one place. But FinGuard had a fragmented UI with inconsistent design causing users unable to complete tasks.
No defined journey on how users link their account with e wallet
Inconsistent interaction
'Link' and 'Skip' button indistinguishable
Lack of visual affordance after task completion
SOLUTION OVERVIEW
Bringing all financial needs in one app with streamlined flow, a feature of adding cash expenses and revamped design system
01
Adding credit/debit card
to wallet in simple steps
02
Option of adding cash
income and expenses
My Role
Platform : Android | Company : Apsolutio Technologies Pvt Ltd | Timeline : November 2019-April 2020
My responsibilties included user research, streamlining user flow, collaborating with developers to propose a new design for a new feature, designing various UI components for the design system.
Tools: XD, Illustrator, Photoshop
Business goals
Gain 30 million users of wallet app as customers.
Become an one click solution to achieve all financial goals.
THE DISCOVERY
Evaluating the existing fintech apps in the market
As fintech is an emerging field in Indian tech ecosystem, research was needed. I wanted to learn more about existing financial and money management application in the market, and what can make FinGuard different from rest of the apps.
Domain Research
India is one of the leading markets of financial app usage with apps like Google Pay adding 36 million new users in 2019. In 2019, India saw 95% increase in finance app usage which is increasing every year.​
Competitive Analysis
I conducted competitive analysis on existing finance apps in the market to understand their distinct features.
.png)
MoneyView
Bill reminders
Spending summary
Bill splitting
.png)
Walnut
Bill reminders
Spending summary
Bill splitting
Expense tracker
.png)
Mint
Bill reminders
Spending summary
Bill splitting
Expense tracker
Key Findings: Most of the apps help in money management but none of them function as a combination.
1-on-1 interviews
I conducted generative UX research with users on the designs to find out shortcomings in the app before revamping the design. Users were unclear how to link their cards with accounts. Inconsistent interactions and lack of confirmation whether the task has been completed or not confused users.
"Why is it showing bank accounts that I cannot link with my card?"
"How do I select the cards is not clear? Shouldn’t I tap the cards?"
"‘Link’ label is confusing. Does it open to a new URL?"
"A indication should be given when
a card is linked successfully"
‘Skip’ button becomes irrelevant when I can use the back arrow to go back?
Defining the problem
How might we re-design a one stop shop to help consumers pay and manage their finances?
KICKING OFF THE DESIGN
01
Streamlining the flow for linking credit/debit card with e-wallets
Earlier to link a card with e-wallet users had to choose type of e-wallet then go to the page of adding debit card. All the saved bank accounts were shown and the user had to scroll sideways to choose bank account with no clear indication on how to link and lack of visual affordances after the task was done.
.png)
Old user flow
The old user flow was designed to complete a simple task with a wasted number of clicks. I designed the revamped user flow helping the user link a debit card directly in a few steps instead of having to choose e-wallet first. After task completion, a clear indication was provided to users.
.png)
New user flow
Users add their debit/credit card in 3 simple steps
02
Designing a new feature enabling users keep track of their cash
From primary research it showed the current finance apps did not consider cash as a financial instrument to be managed. But people generally cannot manage the cash in their wallet or app and in India, cash is the major form of transaction.
Without any specification I designed the flow for a feature in the app which tracks cash transaction of users. I decided on the following objectives to integrate the functionality in the app.
​
1. The app should show total cash balance
2. List of previous transactions
3. Manually input the data for income/expense aiding in remembering a transaction
Users can add their cash income
Users can add their cash expense selecting the type of category
Impact of redesigning
I conducted an A/B testing with 5 users testing both versions of the design to measure performance metrics. The performance metrics were task completion rate and time on task rate. Task success helps in measuring how effectively users completed a given set of tasks, which leads to fewer drop-offs leading to higher revenue.
01
Adding new debit card to E-wallet
40%
Task completion rate
1.39 mins
Time on task
OLD DESIGN
100%
Task completion rate
0.73 sec
Time on task
NEW DESIGN
02
Add cash expense
34%
Task completion rate
2.76 mins
Time on task
OLD DESIGN
100%
Task completion rate
1.4 mins
Time on task
NEW DESIGN
Reflections
Working on this project where I was brought to make some UI changes, I did some major improvements in the UX improving the app's user experience as a sole in-house designer in the team. If I could go over and change things I would want the company to have a clear vision of the product and understanding user needs before launching the product and setting a target user base.