Budget App
Accessibility-first budgeting for novice and visually impaired users.
View Prototype →
Understanding Users
This is Edgar, a 42-year-old HVAC Manager from Omaha, Nebraska. He attempted to budget in his 20s but became stressed as adult responsibilities increased and gave up. Now settled in his career and thinking about retirement, he needs a budgeting app that is accessible, easy to use, and simple — because the stress of usual tools makes it difficult to get started. As Edgar puts it: "I've always wanted to be better with money, but it always seems too complicated, and apps that are supposed to help don't make it much easier."
A sneak peek into how the design helped users like Edgar!
Journey Map
Make a Budget to Prepare for Retirement
Edgar is overwhelmed by budgeting and does not know where to start. He has a lot of research and learning to do before he starts to see progress.
- Tasks
- Research online; Find resources and tools; Record target amount
- Feeling
- Confused, Overwhelmed
- Improvement
- Auto-calculate using data; Plain language explanations
- Tasks
- Log into all accounts; Calculate total assets; Track contribution methods
- Feeling
- Frustrated, Hopeless
- Improvement
- Bank integration via SSN; Auto-sum all accounts; AI contribution summary
- Tasks
- Research strategies; Calculate gap amount; Define spending categories; Allocate funds strategically
- Feeling
- Conflicted, Determined
- Improvement
- AI-powered calculation; Banking app integration; AI budget suggestions
- Tasks
- Set review schedule; Choose tracking method; Plan for setbacks
- Feeling
- Nervous, Determined
- Improvement
- AI coaching suggestions; Automated reminders/alerts
Defining the Challenge
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?
Accessibility Decisions
Key Research Insights and design decisions arrived at after 4 User Interviews and a Competitive Audit of 5 existing budgeting platforms.
Competitor Audit
Competitors fail accessibility basics with unlabeled icons & charts, sub-4.5:1 contrast, fixed 12px text, no keyboard path. Tutorials are hidden in help centers. Screens feel cluttered.
Educational content pay-walled or not included at all. Information overload in apps overwhelms novices, while simpler apps are outgrown as confidence increases.
Design Decisions
Build for WCAG 2.2 AAA from day one — at least 4.5:1 contrast, built-in suite of accessibility features.
Optional tutorial at onboarding, clear CTA button in FAQ page (easy access in main tab bar).
Introduce free "Learn" hub and level switching to manage information density and complexity.
Mobile-first, minimalist layout for visual and cognitive accessibility featuring clear hierarchy, fewer elements, and progressive disclosure.
Design Process
I scoped the MVP around the single most stressful moment for novice budgeters — creating that first budget — and built outward from there, layering in education and personalization only after the core flow tested well.
Ideation (Day 1)
Crazy 8s and a quick Close Up/Big Picture storyboard led me to the following design decisions:
- Give users the ability to "level-up" their in-app experience as they learn
- Allow personalization of accessibility features early on
Wireframing & Usability Study (Week 1–3)
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 did not meet users' expectations.
Changes: Accounts → Transactions, Planning → Budgeting, Help → FAQ. These changes raised navigation ratings from 70% to 90%.
Interaction & UI (Week 4–6)
My initial choice of Glassmorphic style made WCAG compliant contrast challenging and also felt disconnected from current Fintech trends.
The redesign hits the 60:30:10 rule and uses iOS design libraries to create an experience at home within Apple products.
Before Redesign
After Redesign
Accessibility
Using a combination of Stark, A11y, and Able plug-ins I verified color contrast requirements for all text and important elements on all frames.
These tools revealed that the brand color, teal, when used on white was far too low contrast. I changed "skip all tutorials" and "home" labels to navy to improve readability.
Outcomes
Five volunteer participants completed both a lo-fi and a hi-fi usability study. In post-study debriefs, all five described the app as "easy to use" and "easy to navigate," expressing confidence in their ability to manage a budget with the tool.
Sticker Sheet
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. Components are grouped by category and state, making it easier for a developer to inventory UI elements and translate them into a component library.
What I Learned
This project grew me immensely as a UX designer. Working through all stages of design solo stretched my skills in every direction and taught me the value of deliberate planning and decision making at every step. I learned to swiftly compile reusable components to make iterative design even faster, and I gained a profound appreciation for the value of feedback and user participation in the design process — the product is for them, not for me, after all. Most importantly, I learned what it means to center accessibility from day one: selecting high-contrast palettes, readable fonts, a clear hierarchy, meaningful labels, and wise application of Gestalt principles.