Clarity Money Case Study
This project was created for my UX design course at Springboard E-Learning.
As a frequent user of Clarity Money, a finance app that aims to help people make smart decisions, I noticed it lacks actionable points for the users to improve their habits by providing features like budgeting.
I conducted a survey and interviewed both the current and potential users to understand what they would want from the app. This also included reading Clarity Money's reviews on the app store to find the common pain points. To eliminate the need to download multiple apps, I added the budgeting feature that includes
- Easily digestible infographics to help users see the big picture
- Guides them to set realistic goals tailored to their financial situations
- Provides encouragement and feedback on their progress based on their goals so taking actions for improvement becomes easier.
Step 1: Research
User Survey & Interviews
The goal was to gather user feedback on finance apps they have and learn which features they would find the most beneficial to them and other pain points that I might be missing. I received survey responses from 29 people and interviewed 8 people.
Even the people who save often and have good financial habits said they'd still like to save more. All the participants varied in age, income, and education brackets, but 88.5% of them said they want to save more money and have better spending habits.
38.5% of the participants struggle with budgeting because they lose sight of smaller purchases, have trouble prioritizing their needs vs. wants, and they lose track of their credit card bills. Even though the majority of the participants don’t find budgeting difficult, 81% of them said they’d like budgeting assistance.
When asked about the UI, 93% of the participants said visualizing the data with pie charts, graphs, and images and illustrations of their goals would motivate them to save more money, digest information easily, and track their progress. Other ways that it’d give them incentives, were if saving money felt like a game (38.5%) and if they could see other’s progress and plans (19.2%).
The participants said they'd the most beneficial features would be the ability to budget for short-term and long-term goals (81%), ability to customize spending categories (69%), and visibility of investment and loans (69%).
The participants’ common pain points of using finance apps are a confusing interface that disengages interaction, the inability to easily view their accounts, lack of customization and the miscategorizing transactions.
65% of the participants said they’d like having an option to not link their bank accounts. One participant said she is scared when asked to link bank accounts right after downloading an app, but it's likely she'd link them after gaining more trust and using the app for a while. When asked if they’d manually write down all the transactions, all of them said no. However, they’d like it as it’s always nice to have options.
I compared Clarity Money with Mint and Bank of America and found out each app's strengths and weaknesses on budgeting and spending breakdown features based on the UX principles.
See below for details.
Personas & Empathy Mapping
After interviewing the participants, I created the personas based on how frequently they use the app.
1) The Casual User recognizes that they have good financial habits, but uses a finance app as they think a little help wouldn't hurt. Being able to see all the bank accounts in the same place is the most important feature for them.
2) The Moderate User knows that they are awful at managing money and wants to be better at it. They engage with the app often to check if they are on track.
3) The Disciplined User already has excellent financial habits, but is eager to bring them to the next level. They have several different finance apps and is always looking to improve and stay on top of their finances.
See below for more details.
Before diving into creating site maps, writing user stories was important to figuring out key actions they'd like to perform with the app.
Step 2: Information Architecture
I ran a card sort exercise using Optimal Sort (link to the list of the cards) with my core user personas and built a site map based on it. Started with standard actions like "Delete one of your linked bank accounts" to more goal-setting ones like "Start writing down a set amount of money you can spend on movies."
It took an average of 10 minutes for each of the four participants to finish sorting the cards. It resulted with an average of 8 different categories and I organized them into 6: Account Overview, Credit & Bills, Spending Analysis, Budgeting & Goals, Finance Tips, and Settings & Support.
I created user flows by writing happy paths for each persona.
1) The Casual User would like to set budget following the app's guidance for a mindless experience.
2) The Moderate User would like to update their budgets to more accurately reflect their income fluctuations.
3) The Disciplined User would like to check their budget progress and yearly summary to analyze and spot any improvement areas in their spending habits.
Step 3: UI Design
Wireframes, Prototype, Usability Tests and Design Iterations
I focused on creating a concise visual hierarchy and call to actions using a status bar to show where they are at in the process of setting their budgets. I updated confusing icons, placement of them, and reorganized information after running usability tests to make sure the users know what to do by themselves. I will be explaining more throughly below by comparing previous and final rounds.
Final Screens & Visual Brand Personality
As for the UI design, Clarity Money's visual brand personality feels like a trustful friend who you can think of a wise and encouraging mentor. I used bright and dark blue and green colors with rounded shapes and typography to keep the app looking friendly, but wise and trustful at the same time.
Streamlining Info (Vague to Actionable)
To reiterate, the overarching goal was to help people spot their spending habits and make smart decisions. I achieved it through combining two of Clarity Money's vague features into a more streamlined and actionable one. The first screen (see the image above) gives you an idea on whether you are on track or you overspent. However, it doesn't tell you exactly how much is too much or how much is right based on your financial situation and savings goals. It's also hard to tell how they are judging why it's too much or not. The screen in the middle shows how much you spent and how much is left. It's nice to see it, but it's not centered around the users' goals, so there is no clear action points. I combined both of them into an infographic that shows their savings goal, spending allowance, and current state of how they are doing. So it's more personalized towards the users' goals, clear on how much is too much, and receive feedback that validates their progress whether it's positive or negative while keeping them motivated with encouraging copy.
The first round of the budgeting screen which can be seen on the homepage was easily missed and wasn't catching attention. I solved it by creating an animated illustration to add delight and drive people to set their budget.
Guiding & Educating: Part 1
I created an ambitious, moderate, and minimal savings tier so people have guidance.
Guiding & Educating: Part 2
As they are setting their budgets, they can see a suggested amount for their rent (calculated from their income) to help them make smarter decisions by educating and providing information. They can click on the "i" to see a further explanation.
One of the common pain points was a complicated UI leading with confusing visuals. I incorporated graphs, highlighted in different colors that signal positive, neutral, and negative for easy comprehension. In my initial rounds, they were text heavy and I received feedback that the color bars made them feel like they are headed towards their goals instead of burning through their money. Some of the participants said they'd find it helpful if the app encouraged them to save money rather than criticizing them for spending money. I solved this through the use creative copy. ie "Uh oh, you overspent $225. You are still saving $570."
Through my curiosity for UX design I learned to put myself into users' shoes and how to develop a deep understanding of their behavior. I realized the importance of researching the users throughly to validate every single design decision to serve a purpose.