Expense Managing & Tracking App-UX Case Study- X Man
Adulting hit us hard. Students who are taught everything in the world but nothing about the realities of maintaining a decent livelihood are launched into a world of adulthood armed with educational degrees with close to bare minimal understanding of how to sustain themselves.
Today, as digital products become a mandate, many mobile applications and websites exist offering features to ease the consumer’s journey through this boring yet vital habit of tracking their expenses, however, not everyone has jumped onto that wagon yet. Why?
We at Designerrs Lab wanted to design an app to address this problem and help users manage and track their expenses and put in our best efforts to make them feel happy and proud while doing it.
User Research
Our journey began with our users. To understand and identify their behavioral patterns and profiles- i.e their needs, pain points, motivations — we spent a few hours drafting a questionnaire consisting of open-ended and direct questions. Knowing that all users aren’t the same- we conducted interviews face to face and telephonically with approximately 15 men and women residing in the top metro cities in India and between the age group of 21to 35 years, all earning professionals.
Competitive Analysis
We studied existing expense manager apps (MoneyView, Walnut, Monefy) The observations made were-
- Elements were disorganized. Difficult navigation across the app.
- The app was not intuitive. Tedious manual tracking & discrepancies.
- Too many stats and graphs. Boring UI
Affinity Analysis
We noted down excerpts from the collected data onto sticky notes. But how to make sense of it? We started discussing each note which leads us to rearrange and label them. An exercise that seemed chaotic initially soon proved to be quite insightful and vital. By regrouping the sticky notes, we noticed that patterns had emerged in turn reflecting our various users’ motivations, behaviors, and pain points.
This exercise helped us align ourselves with the nature and limitations of our users by truly understanding what they might need vs what they/we think they want.
People ignore design that ignores people.”
“ Frank Chimero, author of “The Shape of Design”
User’s comments
“Buying stuff my parents won’t let me buy.”
“I check my account randomly if I feel that I have spent a lot.”
“I don’t want to have multiple apps or wallets where I can’t understand where I am spending.”
“Child’s education, medical emergencies.”
User Personas
Based on the results of affinity mapping, we found three distinct groups of people that shared similar pain points, motivations, and goals. The group of users who have such common traits can be represented through a fictitious character, otherwise called a Persona. The three primary User Personas for our expense and tracking manager app were-
Carefree Chirag | Prudent Puneet | Practical Pooja
Bridging the gap between pain points to ideas
Based on the cumulative analysis of all of the above, the team listed down all the major pain points and created ‘how might we’ (HMW) questions that would help us kickstart the ideation phase.
Painpoints —
-How might we make it easier for the user to update their expenses and inflows?
-How might we assist them in setting goals and maintaining them?
-How might we curb/track their overspending?
-How might we make sure they pay their bills on time before the deadline closes?
-How might we keep this entire process less boring/more interesting?
-How might we reduce the user’s learning curve for money management (for Chirag) and tech (for Pooja) and keep it uncomplicated?
-How might we make expenses and income management less time-consuming?
-How might we track their inflows that aren’t their income?
Task Flows
The next step was to create task flows — solutions to the user’s pain points were drafted into the form of task flows that defined the process of how a particular problem at hand will be solved. The task flows were to assist in providing an underlying framework for our design decisions later.
Each feature had an independent flow of thought -
Input- actions or decisions by the user and an Output- response by the system (interface). The flow covered every interactional touchpoint and was laid out in stages keeping in mind the user’s mental model.
So, our app’s main features were — Wallets & Accounts | Bill Reminders | Tracking Expenses | Adding Expenses | Setting & Tracking a Budget | Setting & Tracking a Long or Short term Goal | Notifications & Tips on Saving.
We divided these features amongst ourselves and worked on creating task flows after ideating for potential solutions together.
Ideas —
-Badges and points to inspire goal setting and saving to improve money health.
-Gives bill reminder to users for on-time payment.
-Smart Alerts on overspending and overall performance
-Reads data from SMS and bank statements to prevent discrepancies.
-Allows locking in money in your account for desired goals.
-Sync with bank accounts and e-wallets possible
Site Maps
A site map defines the hierarchy and prioritization of the content on the interface by dividing it into levels such as the home screen and the screens within that. Site maps can also be termed as ‘Information Architecture.’
Problem — We as a team faced issues here as the app had multiple functions of importance. Any feature taken for granted would become inaccessible by the user and easily forgotten.
Solution — We adhered to Hick’s Law and limited the number of steps and options to keep the user focused on reaching that feature’s goal in the easiest way possible. Too many options can distract or confuse a user & defeat the purpose of the app.
Wireframes
A wireframe is the visual skeleton of the app- like a blueprint of a building. A monochromatic graphic representation of the contents of the app to provide greater emphasis on the structure than the visual elements of the app to prevent you from overlooking any vital details without getting distracted by the visual aesthetics. We discussed as a group and after multiple iterations, we decided on this-
Problem — To represent all details without cluttering while maintaining coherence amongst features to attain relatability and minimize the learning curve.
Solution —
-As our app’s primary feature is to track and manage expenses, the category expense tracker got the most prominent position on the home page.
-The monthly budget tracker with an overview of monthly balance was placed right after the expense tracker chart keeping in mind The Law of Common Region.
-Initially, we wanted to forego bottom navigation, however, after much discussion, we chose to keep it for our parallel functions of importance such as Home, Accounts, Goals, and Statistics with a FAB to add expense/income. We arrived on this decision based on Jacob’s law, knowing bottom navigation with a FAB would be relatable to our users and make it easy to go back and forth.
-Scrollable cards for bill reminders on the home page, with all the necessary details for the user (if preferred) to make the payment via the app itself.
-Notifications on overspending and performance alerts in a bell icon with the number of notifications unread visible on it, similar to social media platforms.
-Set budgets based on duration or some or all categories.
-Keeping in mind the Zeigarnik Effect, we used progress bars for budgets and goals set to assist in maintaining the user’s vision. We also limited graphs to only the transactions screen as some users (Chirag) found graphs cumbersome.
-The user’s profile on the top left to make it more personalized. The icon leads to a navigation drawer with the remaining details such as app settings, notification settings, etc.
-We limited content to visible home screen space only with no scrolling, unlike most expense tracking apps.
Visual Design
We designed a mood board and set the vibe of what we want the users to perceive our app to be — Fun | Engaging | Empowering
We came up with the name ‘X-Man’ with a fun take on a superhero that manages expenses and helps you maintain good money health. We chose a shade of Blue (stability, trust) as our primary color and a minty shade of green with a gradient (growth) as secondary color keeping in mind the app’s broad target audience and their age. For typography, we settled with a san-serif font ‘Poppins’ for its versatility.
High Fidelity Mockups
-Home Screen has a Rotatable Category Expense Tracker and a card for tracking money lent and borrowed.
-Transactions Screen with a graph-based on multiple time periods. List of transactions with a filter to avoid infinite scrolling.
-Navigation Drawer with performance updates to keep the user motivated.
-Minimalistic single screen with only necessary details to add a budget. 15 category icons + custom icon for the user to label it. It allows the user to carry forward leftover money to the next budget.
-Monthly and category budgets for that month. Clicking any budget opens the budget details screen.
- Recommended Daily Spending vs Actual Daily Spending auto calculated by the app.
-Allows locking in amount while adding a goal and selecting a bank account with it.
-Cards list view of different goals with the exact number of days left to achieve it
- Visual representation of the progress of goal with quick tips.
- Pictorial icons to emote each goal while being added.
Thank You for reading! This is my first Medium post. I would love to know your thoughts on this. If you have any feedback, just leave a comment :)
To view more details on this project such as sitemap and task flows, check this link -https://www.behance.net/gallery/83514645/X-Man-A-money-manager-app-UX-UI
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
