X Man -

a money manager app

Introducing an app that

makes a mundane task

like money management

an engaging & simplified

experience

Role

My primary role was of a UX/UI 

designer where I was responsible

for all aspects of the user-centered process

Duration

1 month

Team

Prachi Garg (UX & UI), Eeshani Mondal, 

Lavanya Kannan, Neha Vijay, Rishi K

Overview

Money management is a tedious task for many while setting & maintaining goals and budget is

for others. X-man addresses those pain points by crafting a simplified yet engaging experience, in turn, leaving the humans using it feeling

empowered. 

Tools

Adobe XD, Adobe Illustrator

Client

Designerrs Lab, India

PROBLEM DISCOVERY

 

In today's busy times, with a growing number of offline and online transactions and purchases these days, it's difficult to stay within budget, and manage expenses while efficiently having enough left aside to fulfill short and long term goals. 

PROBLEM STATEMENT

How might we help people manage multiple aspects of money management- staying within budget, achieving goals, paying bills, and tracking their expenses and income

while making it seem like an enjoyable simple task?  

SOLUTION SUMMARY

Monthly tracker with information to help users discover their every day money related essentials 

Users get a quick overview and insight of their monthly balance, budget, category-based expenses, and bills, all on their

home screen. 

Create a budget and get an overview of budget related activity

Users can create monthly and category

based budgets and easily track their expenses within each, all in one screen

Detailed yet fuss-free overview

of short or long term goals. 

All essential information including the remaining time period and money needed to fulfill short/ long term goals with zero need to number crunch. Also, updated tips on improving goal-related performance. 

 

DESIGN PROCESS

 

We followed the user-centered design process.

DISCOVERY

What aspect of managing money was truly problematic for the users? 

We had already mapped out assumptions about the various aspects involved in managing money on a monthly basis, based on different age groups. To understand if we were on the right path, we began our research by conducting interviews and competitive analysis of existing products in the market (Walnut, Monefy, Moneyview, Coinkeeper) which we tried out ourselves for the next few days. 

15 

people 

21-35

age

9+6

men + women

Location - Metropolitan Cities

Work status - Salaried Professionals 

On synthesizing the data received on interviewing the participants we figured key behavioral patterns
 and identified pain points.

KEY INSIGHTS

“I don't want to have multiple apps or wallets where I can't understand where I am spending.”

“Buying stuff my parents won’t let me buy.”

“I check my account randomly if I feel I have spent a lot.”

Users feel that no app currently fulfills all their requirements without

making it overwhelming.

Users rely on conventional methods such as excels and bookkeeping as they find it a lesser cognition load compared to a plethora of e-wallets and apps that require a learning curve,

along with the need to remember multiple passwords and a common distrust regarding security.

2

Most apps involve manual feeding & tracking which makes managing it difficult on a daily basis due to a busy lifestyle.

Lack of time leads users to make-shift their own versions of solutions such as tracking only big expenses, reading bank statements for card payments, segregating money into different accounts to simplify recalling expenses with no category labels which provide a scope of opportunity to ease navigation. 

3

Users aspire to spend within their budget to help them fulfill short and

long term goals. 

Younger professionals felt the need to track unconventional inflows and expenses as they often overspent past their budget unknowingly and would like to save up for short term goals like a holiday trip while married professionals had more long term goals planned out that they were trying to keep track of. 

“Child's education, medical emergencies.”

The elements were disorganized. Difficult navigation throughout the app. 

The app was not intuitive. Tedious manual tracking & discrepancies. 

Too many stats and graphs causing cognitive overload. Boring visuals and UI

Competitive Analysis Insights

Creating User Personas

We created our user personas based on the needs and lifestyles of the people we interviewed to help us map and design the desired experience for them.

PERSONAS_PRACHI_GARG – 1@2x.png

Tap/click to see an expanded view

DEFINE

Turning pain points to design opportunities with the team

😭User Painpoints     
Forgets to keep track of bill payments
🤗User Needs       
Needs to pay in time to avoid penalties
Complex procedures + stats are difficult to process and overall it's tiresome, tedious
& boring
Needs a simple interface that isn't difficult to understand and takes less time
Unable to track inflows apart from income and unplanned impulsive spending
Needs overall more clarity in all aspects of financial income and expenses
Distrust and concerned 
about security
Needs reliability to share information with it
Unable to plan & save money
for goals
Needs better segregation and allocation of money
 🤩Design Opportunities 
- Auto & recurring bill reminders to make payment
- Badges to motivate users
to maintain money health
- Intuitive with improved navigation and better UI
- Track unconventional transactions
- Auto read sms and statements to understand money segregation
- Linked to known wallets
and bank accounts
- Simplified budget creation with more intuitive overspending alerts  

Task Flows & Site Map

Based on the findings of the research we began mapping out the flows for each must-have aspect of money management such as budget creation, goal maintenance, transactions, etc.

 

As a group, we perhaps struggled the most at this stage while trying to improve the navigation without compromising on the priority of each equally significant function. It provided us with more context about the product, how it should work, and how we could improve the experience of the app depending on which user would be browsing as difficulty with navigation was a key pain point for our users. 

Taskflow_Xman.png

Tap/click to see an expanded view

DESIGN

What are the core features of our app? 

Reads SMS 
and bank statements to track category based expenses 
and income
Add, update 
and track long and short term goals and lock money within the account
Custom vacation + 
duration or category based budget creation
Bill reminder cards to direct the user 
to make timely payments
Synced with 
bank accounts 
& wallets
Badges for money health with 
overspending &
performance alerts

Wireframing & Prototyping

After fleshing out concepts, we started designing low fidelity wireframes keeping the previous steps in mind. As our app juggled with multiple core features interdependent on one another, paper prototypes played a significant role in determining the prioritization of each feature and the steps within without cluttering our mobile real estate. User testing with paper prototypes with fellow trainees and some users assisted us in narrowing down our final prototype. 

Prachi_Wireframe_1_edited.jpg

OUR NEW PLACE

I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.

Visual Design

We created a mood board to key in the vibe that we wanted the app to convey and our users to experience. The users were struggling with money apps which were graphs and stats heavy and low on visuals causing money tracking and managing to be an anxiety-inducing activity and ultimately boring.  

FUN | ENGAGING | EMPOWERING

We came up with the name ‘X-Man’ with a fun take on a superhero that manages (X for) expenses and helps you maintain good money health.

 

Primary color - Blue (stability, trust)  
Secondary color - Minted green with a gradient (growth)

Iconography for categories

Iconography for categories

 

KEY SOLUTIONS 

What key solutions did we arrive at?

- an overview of all expenditure related information segregated in different cards. The figures are auto-calculated to avoid having the user do the math. 

 

- a rotatable category based graph to provide the user certain degree of control without making it dense with figures. 

- scrollable bill reminder cards with key details to make timely payments. 

- overspending/performance alerts in a bell icon similar to social media. 

- bottom navigation bar for parallel functions of the app & a FAB to manually add or split expenses and income. (Jacob's law)

- all the important content limited to visible home screen space only with no scrolling, unlike most expense tracking apps. Daily transactions under Stats in the bottom navigation bar.

HOME

- flexibility for the user to view their transactions based on various time periods (only if they want to). 

- 'all transactions' dropdown gives access to category-based filters for viewing select transactions. 

- performance tracker pertaining to money health and task fulfillment on the app

TRANSACTIONS

NAVIGATION DRAWER

- visually emphasized category based budget cards all in one screen

- monthly tracker for budget; after much discussion, we decided to show 'money spent' per budget vs 'money left' as the app was essentially about managing expenses, so it was imperative for the user to know how

much they had been spending. 

- 'amount of money left' is auto calculated and shown in the budget detail screen to avoid users have to do the math along with recommended spending tips and amount. 

- an option to repeat the budget and to carry over the leftover amount from the previous budget. 

BUDGETS

- a visual performance tracker with

a detailed view and tips on how to

fulfill within the stipulated time; 

keeping the users keyed in all relevant data related to their goal

- Progress bars to maintain the user's vision on fulfilling goals
 (zeigarnik effect) with details on

the number of days left to achieve it.

 

- Users can lock in the money

within their bank account to avoid
spending it. 

ADDING & UPDATING GOALS

Brainstorming the scope of strategy for the future

📌# of financial goals fulfilled
Key Performance Indicators 
📌Growth in # of users 
📌Increase in more in-app
     engagement 
📌More # of return users.
Design Strategy Ahead
📌Incentivize users on maintaining good money health by offering coupons/ points, partnering with brands 
📌 Share progress with friends/family for greater accountability on staying true to financial plans
📌Partner with banks to explore locking in feature within goals further
📌Gamify it like fitness apps to keep the users 
self motivated and engaged

REFLECTION

What I learned? 

 

How the user affects the experience of designing and helps us design better products, no matter the industry.  

 

Being a designer I was already aware of conceptualizing based on the market needs however working closely on the user-centered principles introduced me to the iterative back and forth in decision making that comes along with advocating for the user while learning to keep your personal intentions and assessments aside. 

We all have something to learn from each other.

 

 

Working as a group with fellow designers, non-designer, developers all with different years of experience brought in so much discussion and open dialogue to the table that it helped us view a situation from different perspectives. Also, it helped us channelize big picture thinking at moments we were too stuck on the details. 

DON'T BE A STRANGER

Let's Connect

© 2020 Prachi Garg. Made with love and lots of lemongrass chai at Hoboken