Budget App
ComBoard
Svetim Logos
View all 1-Pagers
About Me
Resume
Budget App
ComBoard
Svetim Logos
Lidia's Logo; a two tone teal "L" shape with an orange arc over the right side create a capital "D" shape.
Lead UX Research & Design (solo)
Figma, WCAG plug-ins
Feb-June 2025
Budget App
Problem: Novice budgeters and assistive tech users struggle with complex financial apps that lack accessibility features and educational support
Animated preview of creating a budget in three taps on the desktop site
Responsive Site on Tablet (click to see prototype)
Content
Understanding Users
Name
Edgar
Age
42
Education
Trade School
Hometown
Omaha, Nebraska
Family
Married
Occupation
HVAC Manager

User Story

Edgar lives with his partner and their pet husky. Edgar attempted to budget in his 20's, but became stressed as adult responsibilities increased and gave up on the budget. Now that he is more settled in his career and is thinking about retirement, he wants to find a way to plan his finances better and with minimal stress.

Problem Statement: Needs a budgeting app that is accessible, easy to use, and simple because he wants to plan for retirement but the stress of usual tools makes it difficult to get started

Goals
Frustrations
Plan for retirement effectively
Spreadsheet budgets are confusing
Create simple budgets easily
Apps hide core actions in menus
Learn financial management basics
Visual impairment makes many apps unusable
Overwhelmed by financial jargon
Goals
Plan for retirement effectively
Create simple budgets easily
Learn financial management basics
Frustrations
Spreadsheet budgets are confusing
Apps hide core actions in menus
Visual impairment makes many apps unusable
Overwhelmed by financial jargon

Quote: "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."

Key Research Insights (User Interviews n=4; Competitive Audit n=5)

Competitors fail accessibility basics with unlabeled icons & charts, sub-4.5:1 contrast, fixed 12 px text, no keyboard path.
Design decisions:
Build for WCAG 2.2 AAA from day one, ≥ 4.5:1 contrast, built-in suite of personalizable accessibility features. Spreadsheet budgets are confusing; menus in apps and websites hide core actions.
Tutorials are hidden in help centers.
Design decisions:
Optional tutorial at onboarding, clear CTA button in FAQ page (easy access in main tab bar).
Apps pay-wall educational content, or don't include it at all.
Design decisions:
Embed a free “Learn” hub on all main screens with AI curated content
Information overload in apps overwhelm novices, while simpler apps are outgrown as confidence increases.
Design decisions:
Users can switch between levels of complexity at will, based on self-assessed comfort and readiness.
Rival mobile screens feel cluttered
Design decisions:
Mobile-first, minimalist design focused on displaying only the most essential information.
Journey Map: Make a Budget to Prepare for Retirement

Summary:
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.

Calculate Retirement Needs
Tasks
Feeling
Improvement Opportunities
Research online
Confused
Auto-calculate using data
Find resources and tools
Plain language explanations
Record target amount
Overwhelmed
Audit Current Savings
Tasks
Feeling
Improvement Opportunities
Log into all accounts
Frustrated
Bank integration via SSN
Calculate total assets
Auto-sum all accounts
Track contribution methods
Hopeless
AI contribution summary
Set Monthly Saving Target
Tasks
Feeling
Improvement Opportunities
Research strategies
Conflicted
AI-powered calculation using collected data
Calculate gap amount
Open investment accounts
Motivated
Design Realistic Budget
Tasks
Feeling
Improvement Opportunities
Define spending categories
Skeptical
Banking app integration
Analyze current habits
AI budget suggestions
Allocate funds strategically
Determined
Create Accountability System
Tasks
Feeling
Improvement Opportunities
Set review schedule
Nervous
AI coaching suggestions
Choose tracking method
Automated reminders/alerts
Plan for setbacks
Determined
Calculate Retirement Needs
Tasks
Research online
Find resources and tools
Record target amount
Feeling
Confused
Overwhelmed
Improvement Opportunities
Auto-calculate using data
Plain language explanations
Audit Current Savings
Tasks
Log into all accounts
Calculate total assets
Track contribution methods
Feeling
Frustrated
Hopeless
Improvement Opportunities
Bank integration via SSN
Auto-sum all accounts
AI contribution summary
Set Monthly Saving Target
Tasks
Research strategies
Calculate gap amount
Open investment accounts
Feeling
Conflicted
Motivated
Improvement Opportunities
AI-powered calculation using collected data
Design Realistic Budget
Tasks
Define spending categories
Analyze current habits
Allocate funds strategically
Feeling
Skeptical
Determined
Improvement Opportunities
Banking app integration
AI budget suggestions
Create Accountability System
Tasks
Set review schedule
Choose tracking method
Plan for setbacks
Feeling
Nervous
Determined
Improvement Opportunities
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?

Quantitative Goal

Target

≥ 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

Target

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%

Design Process

A pencil on paper sketch with 8 loose brainstormed ideas for designing a budget app that is educational and delightful for users with impairments.

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
A11y-Color contrast checker plug in on figma says "all texts meet AAA color contrast requirements"

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 that did not meet users' expectations.
I applied user input by renaming several sections.
Accounts -> Transactions
Planning -> Budgeting
Help -> FAQ
These changes raised navigation ratings from 70% --> 90%.
I applied user input by renaming several sections.
Accounts --> Transactions
Planning --> Budgeting
Help --> FAQ
These changes raised navigation ratings from 70% --> 90%.
A gif showing the first hi-fi design with a purple background  and glassmorphic style cards.
A gif showing the first hi-fi design with a purple background  and glassmorphic style cards.

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 60:30:10 rule and uses iOS design libraries to create an experience at home within Apple products.
A11y-Color contrast checker plug in on figma says "all texts meet AAA color contrast requirements"

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.

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.

Learnings

Learning to swiftly compile reusable components to make iterative design even faster.
The profound value of feedback and user participation in the design process. The product is for them, not for me, after all.
Centering accessibility from day 1 by selecting high contrast palettes, readable fonts, a clear hierarchy, and labels, and wise application of Gestalt principles.
This project grew me immensely as a UX designer. Working through all stages of design solo stretched my skills in all directions and taught me the value of deliberate planning and decision making at every step.

Next Steps

Accessibility Fixes

Build in alt text built in ASAP and ensure al touch points are 48px minimum.

Sticker Sheet

Update design system for dev-handoff. In future projects, maintaining this system as I work will make me a better team member.

Usability Test 3

My usability research participant pool did not include assistive technology users. Further studies or interviews are needed.

Consult Experts

Continued learning about assistive technology integration. Consult data security and finance experts to ensure the product is safe and beneficial to users.

Data Collection

Task completion and retention data as well as measurements of actual goal attainment by users as a result of the product.
Previous
Svetim Logos
Brand Design
Next
ComBoard App
Always open to new connections, engaging conversation, and opportunities in art and design!
Designed by Lidia Ochoa; Powered by Webflow
2025 UXbyLidiaOchoa. All rights reserved.