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.”
1
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.
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.
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.
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.