Budget App
Lead UX Research & Design (solo)
Figma, WCAG plug-ins
Problem:
Budgeting apps on the market are complex, provide little guidance to novice budgeters, and lack in-app customization of accessibility features.
Goal:
Design a budgeting app that meets the needs of novice budgeters while encouraging the development of broader financial management skills. The app should increase user satisfaction scores when comparing with other budgeting apps.
Solution:
A budgeting app that is intuitive, easy to navigate, and accessible, allowing users to level up the complexity of their experience as they acquire finance management skills using in-app education features.
User Quote:
"It was really easy and intuitive to figure out how to make a new budget." (Hale)
Note about constraints:
Work for this project was done part time, after work hours and on weekends, as part of the Google UX Certificate
Methods
4 user interviews
Competitive audit of 5 apps
Key insights
How might we…
design a budgeting app that delivers scaffolded education, AI-powered personalization, and fully adjustable accessibility settings so novice budgeters and users with disabilities can set and achieve their financial goals with less stress and fewer obstacles?
Quantitative Goal:
≥ 80 % of first-time users create their first budget within 3 minutes
Results:
100% of interviewed participants created a budget within 3 minutes.
Qualitative Goal:
User Satisfaction Scores ≥ 85
Results:
100% of interviewed participants describe the app as “easy to use,” "easy to navigate," and express confidence using the app in post-study debriefs.
Second round of usability studies yielded USS = 90%
I kicked off with Crazy 8s to generate creative ideas in just a couple of minutes. This rapid brainstorming paired with a quick Close Up/Big Picture storyboard led me to the following design decisions:
1. give users the ability to "level-up" their in-app experience as they learn and
2. allow personalization of accessibility features early on.
Based in an 8 pt grid, my lo-fi wireframes limit scroll fatigue with minimal information per page. All screens are a max of two clicks away via a bottom tab bar, easy to reach for mobile users.
First round of unmoderated, remote usability studies revealed that labels that did not meet users' expectations.
Relabeling the following:
1. accounts-->transactions, 2. planning--> budgeting and 3. help -->FAQ improved navigation ratings from 70% --> 90%
My initial choice of Glassmorphic style made WCAG compliant contrast challenging and also felt disconnected from current design trends, especially within banking apps.
Using atomic design to establish building blocks made the redesign process quick.
The redesign hits 60:30:10 rule and uses iOS design libraries to create an experience at home within Apple products.
Using a combination of Stark, A11y, and Able plug-ins I verified color contrast requirements for all text and important elements on all frames.
I changed "skip all tutorials" and "home" labels to navy to improve readability.
Building Responsive Site
(days 67-87)
The site was built with many of the same components and styles as the app with some improvements to the layout and navigation, allowing for the inclusion of additional features.
To maintain consistency and speed up cycles of iteration, I quickly started compiling all reusable components and their variable states. This sticker sheet is from the original mobile app design stage, with some modifications that came naturally as I moved into later design stages.
This project grew me immensely as a UX designer. Working through all stages of design as a team of one stretched my skills in all directions and taught me the value of deliberate planning and decision making at every step.
The most crucial wins came from: