ROLEUX Designer
Know before you spend
Spring is a mobile-first budgeting app for first-time budgeters. Its designed to help people make smarter spending decisions before the money leaves their wallet.
TIMELINE2026
WEBSITEMobile App
METHODSCompetitive audit · Moderated testing · SUS scoring
T H E P R O B L E M
Budgeting apps assume you already know how to read your spending history and translate it into better decisions
A competitive audit of seven leading apps confirmed the same pattern — every home screen is built around reviewing what already happened. Your spending last month. Your budget categories. Your net worth. All useful after the fact, but none of it helps you answer the question that actually matters: can I afford this right now?
Spring was designed to answer that question before the money leaves your wallet.
W H O T H I S I S F O R
Two people. Two different reasons they struggle with their finances.
Maya
26 · Marketing · Atlanta
"I've downloaded three budgeting apps. I always get through setup and then just stop opening it."
She sees her spending data but doesn't know what to do with it. She needs the app to tell her what action to take — not just show her numbers.
James
31 · Teacher · Seattle
"I check my bank account but I never know if what I'm seeing is good or bad."
He has limited time and limited patience. If the app doesn't give him a clear answer in the first 30 seconds, he's gone.
D E S I G N D E C I S I O N S
Three key problems I iterated through. Here's the thinking.
Each decision came from something a real user said or did. Design solutions are backed by testing.
C H A L L E N G E 01
The home screen should answer: can I afford this?
Standing in the store. Getting the dinner invitation. That's when people need information, and that's when every existing app makes you dig for it.
T H E I S S U E
It’s giving you the status of EVERYTHING.
How is this different than a Reports tab or a Budget tab?
Why is this page valuable?
I talked to users. People don’t want everything. They want focus— a few categories that they personally struggle with, surfaced immediately.
One participant put it directly:
"I just want to know if I can afford this. I don't want to think."
New Home Screen widget design
W H A T P R O V E D I T W O R K E D
First attempt at the Home Screen widget
T H E S O L V E
So, I added customizable insight widgets, showing remaining budget in the categories the user flags as important, with one actionable sentence of context.
Just "$32 left in dining out." isn’t helpful without context.
But "$32 left— your usual spots run about $45 a meal. One more dinner this month."
Now when you view widgets on the Home Screen, you’ll see an “Overall budget” widget comes first, followed by up to categories of personal concern.
But what if you still want to learn more about the widget’s budget category?
Tap the widget and you’ll open its expanded budget card for more details on the category’s status.
"this is useful" "this is helpful" "I could just consult this"
What participants said during usability testing, participants reached the home screen unprompted:
Budget card for dining out
C H A L L E N G E 02
If a user can't find a feature, the feature doesn't exist.
During the first round of testing, a participant was on the reports tab. I asked her to navigate from the overall spending view to a specific category.
She said "I'm sorry, I can't find it".
T H E I S S U E
The toggle that switched views was an unlabeled icon in the corner of the graph — two pie chart icons, one whole and one sectioned. It communicated nothing to someone seeing it for the first time.
FIRST ATTEMPT AT HOME SCREEN WIDGETS
Overall view to section view icon. Once switched to section view, the list of categories populated under the graph.
First I restructured the page — moving categories to a list below the graph so users could always see and easily select
But that created a new problem: the category list now is where the insights used to be.
So I added a slider to give insights their own space.what they wanted to view.
W H A T P R O V E D I T W O R K E D
Labels added and iteration tested
R O U N D 0 1
P A R T I C I P A N T 0 1
55
Then I remembered what might have also tripped the participant up — the original toggle had no label.
I tested this version with two participants. And found that there was no friction to find the insights or categories
Color added
T H R E E I T E R A T I O N S
Original
Wins and watch outs moved + toggle deleted
Post interview SUS scores increase across rounds by over 47% after iteration
R O U N D 0 2
P A R T I C I P A N T 0 2
90
Once the interaction was clear, I moved to a third iteration and added color to make the active state visually obvious at a glance.
72
R O U N D 0 2
P A R T I C I P A N T 0 2
C H A L L E N G E 03
Rolling over vs saving
During testing, a participant said: "Wouldn't whatever you don't roll over automatically go to savings? You probably only need one of these."
True— the screen was asking the same question twice.
T H E I S S U E
People liked the roll-over feature. I knew I had to keep it.
But some users want to roll over and some want to save, and both words needed to be present depending on a person's goals for them to understand where they money is going.
A slider solved it. Whatever you're not rolling over is automatically being saved, and vice versa. Users have a more intuitive visual of where they money is going.
During this same iteration I noticed users had no reference point for how much they had left to actually budget when setting a limit.
I added a disclaimer showing that figure.
O N E I T E R A T I O N
First attempt
W H A T P R O V E D I T W O R K E D
Old roll over flows
Latest iteration
When a participant saw the slider they said "that's cool — I can choose how much to roll over versus save" and moved on without confusion. When she saw the unbudgeted income disclaimer they said "oh that's a helpful reference, I won't overspend." No friction means it worked.
Key Learnings
What I’d do to improve as a designer for the future.
I made a user flow diagram for this project but in the future I would make a product flow diagram as well. Understand what was happening to the money in this would’ve really helped me set up features like adding a new budget
1.
2.
Userflow diagram
Dont put everything on a screen at once.
If you’re expecting money back— maybe you covered someone — you can set up an alarm for how much you’re expect and for when you should check.
While sorting, if you change the auto categorized category, then it prompts you if maintain this change for the vendor in the future.
With more time, here’s what I do with Spring
W H A T W O R K E D
Setback recovery flow A warm re-entry experience for users who fall off track. No guilt, no missed streak counter. Just a neutral summary and a choice to reset or continue.
A Learn tab Eight financial literacy modules, each under five minutes. Plain English, swipeable cards, with a "try it" action that connects directly to the user's real data. Competitors didn’t have infrastructure to teach user about their finances.
Next Project
( Budgeting App )
PRODUCT DESIGN
The Credibility Gap
Explore how physicians make referral decisions through interviews and qual + quant research, to write clear, effective messaging for a oncology clinic- Atlantic Health.
