TIMELINE
July 2021 - Sept 2021
TEAM
Jennie Amrine, Design
Gunguk Kim, Product
MY ROLE
UX Research
UX Design
UI Design
Visual Identity
PROJECT INFORMATION
CacheMoney is a mobile first app that offers users an effortless experience viewing expenses, income, and ways to personalize their money saving goals for an upcoming expenditure.
For this project, I explore how to improve the user experience for money saving apps and consulted with a product manager to finalize the product.
Realize your money saving goals with CacheMoney through 4 easy steps:
Step 1
Easy onboarding allows you to personalize and set up your saving goals.
Step 2
Reach your savings goals effortlessly by picking the Cache Method that works best for you.
Step 3
Check out your goal board to monitor your results and projected timeline.
Step 4
Review income and spending habits and make adjustments to your goals accordingly.
Realize your money saving goals with CacheMoney through 4 easy steps:
Step 1
Easy onboarding allows you to personalize and set up your saving goals.
Step 2
Reach your savings goals effortlessly by picking the Cache Method that works best for you.
Step 3
Check out your goal board to monitor your results and projected timeline.
Step 4
Review income and spending habits and make adjustments to your goals accordingly.
DESIGN RESEARCH CONTENT
Competitive Analysis
User Interviews
User Stories
User Flows
My design research began with studying existing money saving tools and outlining what works, what doesn’t, and what is left to be desired. I chose to review Peak Money and Qapital as they are ranked to be the best money saving apps out there. I also reviewed Bank of America’s goal saving feature to see how a major financial institution does goal saving.
PEAK MONEY
Enhanced account security
Provides insights and action items
Developed by wellness professionals, focus on stress free experience
Limited features without premium account
No overdraft protection
Doesn’t support small, local bank accounts
QAPITAL
Large variety of personalized savings plans
Easy and intuitive UX design
Developed by behavioral economist with science based methodologies
Only premium accounts available
Large hurdles to cancel account
Lack of communication on premium charges
BANK OF AMERICA
Trusted institution, first party app
All banking info in one spot
Instant money transfers
Clunky UX/UI experience
Goal saving feature hard to find
Lack of automated and diversified saving plans
I conducted 5 in-person interviews with people in my personal network who are trying to save for an expense that they cannot pay for outright. I wanted to understand their hurdles, needs, goals, and if they were in the market for a money saving tool to help them out. Below are the questions I asked each participant and the 3 key takeaways.
1.) Are you saving up for anything right now?
2.) What’s preventing you from saving money?
3.) What would make saving money easier?
4.) Have you used a money saving app before?
5.) Would you use a money saving app to help your goals?
Distrust in third-party finance apps
Participants voiced concerns in linking their bank account with a third party app. They don’t trust giving their banking information which has prevented them from seeking out a money saving tools altogether. Some also voiced skepticism in the app successfully helping them save as well.
Living paycheck to paycheck
Twenty percent of the participants mentioned living paycheck to paycheck and that they are too cash poor to save for pricey purchases. The money they have is spent on essentials and so they need an easy, low commitment way to save for future goals.
Financials are overwhelming
Eighty percent of participants mentioned getting a hold of their finances was stressful and burdensome. Many have debt, mortgages, and copious bills that put intentionally saving for goals, especially non-essential ones, on the backburner.
Based on my user research and competitive analysis, I put together 3 user stories that reflect what a user wants to accomplish by using CacheMoney and also align with the project brief requirements. These stories serve as the foundational user flows that will be built into the app.
User Story #1
As a user, I want to see an overview of how much my finances have changed and how much I am saving throughout the saving period, so that I can stay on track.
User Story #2
As a user, I want to see a dashboard of my finances clearly and visually, so that I can see how much I am spending at a glance.
User Story #3
As a user, I need to be able to tell the tool what my savings goal is and how long I have to reach it, so that I can save accordingly.
I created a user flow to prototype the user’s path to complete CacheMoney’s onboarding and to create a goal. Creating a savings goal is the app’s vital function, so it had to be straightforward and easy for users to complete. From there, I also outlined the various pages and tasks users would come across. This user flow also served as a blueprint before I built out the low-fidelity screens.
SOLUTION IDEATION CONTENT
Low Fidelity Wireframes
Usability Testing I
Usability Testing II
UI Elements & Style Guide
Based on the user research feedback, I put together wireframes for an onboarding process for CacheMoney that was quick and easy to follow. This was to minimize stress and enable users to easily input their financial goals. These low-fidelity wireframes were then used to conduct rounds of usability testing.
Onboarding
Create First Goal
Home Screens
I recruited 3 participants to test out a low-fidelity mockup of CacheMoney, where they were tasked to complete onboarding and set up a goal. Once they completed the tasks, I had participants answer a set of questions to report how intuitive the app felt and any initial reactions and feedback. The key findings are below.
Feedback #1
While setting up a goal, the flow led users to set a spending budget.
Test participants reported setting up a budget felt “abrupt” and “interrupted” the process to create a savings goal.
As such, creating a budget was removed from the Setting Up a Goal user flow.
Feedback #2
Testers described the data as not providing enough information to make saving goals nor provided an adequate snapshot of their finances.
As a result, I added data on spending and income over time, and an indicator to show money transferred into CacheGoals. I also displayed the amount of money saved (difference between income vs amount spend) for the month.
Feedback #3
I conducted another round of testing after implementing the first set of changes.
Participants expressed wanting to know what’s left of their income to put aside towards Cache Goals. They also expressed confusion on the meaning of “Savings”, and how it'd calculated.
As a result, I put “Savings” front and center, and included an info icon so users can check what exactly savings mean.
After the first two rounds of usability testing, I added color and UI elements to the high fidelity wireframes. From there, I had the same 3 participants run through the onboarding process, create a goal process, and had them review all other screens from the app in their high fidelity form. It was from this point I consulted a product manager for additional feedback and insight on the app when it was close to being in the final design stages. Their feedback and implemented changes are outlined below.
Feedback #1
Feedback #2
Feedback #3
The visual style of CacheMoney is clean, modern, and inspires not only trust and confidence in the user but also prosperity. Users should feel confident that CacheMoney will guide them through personalizing and achieving their goals with no hidden fees or complicated steps, and the combination of customized, clean UI elements and color scheme will encourage such behavior.
01 BRANDING & LOGO
The name CacheMoney comes from “cache”, which is a computer processing function that stores away data for future use. In lieu of data, this app will help users store money for future goals, so the name cache felt appropriate. There is a play on words as well since cache is pronounced as “cash”. I also added “Money” to the title for clarification that this is a money saving tool.
The logo is a circle graph with a chunk of the graph sectioned off and colored. The circle graph logo also resembles a C for CacheMoney.
02 COLOR PALETTE
Blue is the color of trust, confidence, and security and is commonly found in banking apps. CacheMoney uses a deep, midnight blue throughout the app and icons to reaffirm trust and a level of seriousness within the user. Blue is also compatible for those who have green-red colorblindness, and studies show male and females alike react faster to blue contrast compared to other colors.
Green is the color of wealth and abundance and complements blue within the app. Green is also considered humble and accessible, which will make financial and saving goals feel more approachable in CacheMoney.
03 TYPOGRAPHY
CacheMoney employs the typeface Monserrat throughout the app. Montserrat is versatile, clean, practical and the roundedness is friendly. Whether it’s corporate, retail, editorial, Montserrat is found in a multitude of settings. As such, it is a familiar and approachable font. It is important to use a welcoming font with a fintech app since finances can be complicated and overwhelming. By using Montserrat, CacheMoney is creating a welcoming yet modern feel for the user to approach their finances.
03 UI ELEMENTS
Icons and illustrations were custom made for CacheMoney and colored such that they aligned with the overall brand look and feel. Icons and buttons are all green, blue, and blue green. Primary button changes from green to blue depending on background color in order to create contrast.
Buttons
Illustrations
Iconography
Segmented Controls
Navigation Bar
Progress Bar
04 IMAGERY
Images in the form of photographs and illustrations will be used throughout the app. Photographs are effective in helping users visualize their goals. When setting up a goal in the app, users will select an image associated with the goal in mind. Photographs in the app should be aspirational and instill a sense of inspiration and achievability.
Working on CacheMoney was a great exercise in learning about design in fintech and how to build trust in a user through design. I learned how there are a plethora of money saving apps out there because there is no singular way to handle personal finance. Finances need to be customizeable and that customization fosters a market full of different money saving tools that all share the same goal - help users save money - and take different approaches to get there. Everyone is different and needs a variety of tools to choose from.
Building Trust
A common sentiment shared by test users was that they don’t trust 3rd party finance apps with their banking information. My research taught me that creating an app with seamless UI, UX, and an emphasis on security (setting up a passcode, verifying the passcode is difficult enough, setting up Face ID, offering insurance protection up to $250,000 etc.) can make users feel more confidence using a money saving tool. As such, I went through 3 rounds of testing to weed out all the UI and UX roadblocks and made various rounds of adjustments in an effort to have a polished, refined, trustworthy product.
Power in Prototyping
Previous projects taught me the importance of usability testing with high-fidelity prototypes so I made sure to have a refined prototype with transitions/animations in time for usability testing. By using high-fidelity prototypes in testing, users were able to become immersed in the product and give feedback that had huge impact on tightening the overall design. One example was adjusting the color scheme to be less playful and more cohesive, which would therefore evoke more trust from the users.
Designed by Jennie Amrine · 2021
