Mobile App feature
Budgeting Tool
Salary Hero is a financial wellness platform built for everyday Thai workers — people who want simple, stress-free access to their earned wages. While the app had a budgeting entry point, almost nobody was using it. This project set out to understand why, then design something that actually works.
Overview
My Role
Researched what features would drive budgeting engagement
Iterated on concepts and ran prototype testing across multiple rounds
Conducted user interviews and usability testing with real users at client sites
Finalised designs and led handoff, connected with PO, developers, business, sales, and customer success
Timeline
October 2025 - Ongoing
Team
Asama P.
Thongthod K.
Rawisara L.
UX/UI Lead
UX/UI Designer
UI Associate (Me)
Tools
Figma, Claude
Before & After
Before
A budgeting button existed on the home screen, but the flow behind it was complex and unfamiliar — requiring manual setup with no guidance. Users tapped it once and never came back.
After
A guided onboarding wizard with persona presets, an intuitive dashboard with category breakdowns, projections, and a shared household budgeting mode — designed around the pay cycle workers already know.
Background
Why we built this
Google Analytics told a clear story — awareness wasn't the problem. The budgeting button was visible and being tapped. But something in the journey was breaking down before users committed.
16,760 users tapped the home budgeting button (77.78% of budgeting events)
3,283 users actually added a budget (only 4% of total 80,302 users)
The goal wasn't just more budgets — it was helping users understand their own financial behaviour. Savings follow awareness. Awareness requires a tool that's worth returning to.
What we wanted to achieve
The project ran from February to May. We spent the first month planning and researching the right approach, then moved into building tokens and components in March. On 25th April we published the first version, and May was dedicated to working with developers on integrating the system into production.
Build financial awareness
Help users clearly understand their financial situation — tracking income, spending, and savings in one place — as a first step before optimising behaviour.
Encourage savings
Surface opportunities for savings naturally within the experience, without lecturing or overwhelming users who are new to active budgeting.
Drive more sales
Better budgeting adoption directly supports Salary Hero's revenue model — engaged users who understand their finances are more likely to use premium features.
Gather user data
Richer spending data helps the product team understand users better — enabling more personalised experiences and smarter product decisions.
Exploration
We ran a structured design sprint across a cross-functional team — MD, PM, CS, designer, dev, and QA. The session used HMW framing, affinity mapping, and Crazy 8s to generate a wide solution space before narrowing down.
Persona
We used one of our main personas — Aom, an office worker who usually depends on herself financially — to represent the Salary Hero user most likely to benefit from better budgeting tools. Designing through her lens helped keep decisions grounded in a real person rather than abstract user types.
How Might We
"How might we make budgeting look intuitive and less effort for the employees so that they know their money flow and can spot opportunities for savings?"
in We broke the HMW into two main pillars, each with subcategories explored by the team.
From the two HMW pillars — Know their own self behaviours and Improve financial literacy — the team generated ideas and voted on the most interesting directions. Three themes rose to the top:
Gamification
Points, savings leaderboards, streaks, spinning wheel rewards, build-a-town mechanic, daily/weekly quests, and badge systems to make logging feel rewarding.
Financial literacy
Persona-based presets, financial plan templates, contextual education, AI-style guidance, and quiz-based onboarding for first-time budgeters.
Community & social
Savings leaderboards, friend notifications, spending comparisons, and push-to-savings features drawing on social proof and peer motivation.
Crazy 8s
Five participants ran Crazy 8s and surfaced ideas across four categories. Each generated 8 concepts in 8 minutes — then the team voted on the most promising directions
Streak
Streaks create good engagement — encouraging users to log consistently by rewarding the habit of returning to the app every day or pay cycle.
Visual Representation and Character
users answer a few questions and get a character that suits them. Opens the door to personalised product recommendations in the future.
Quests
Daily and weekly quests keep users coming back consistently — saving daily, tracking expenses, building habits through small achievable goals rather than abstract financial targets
Exploration
We also gathering the main reference or the app that we heavily rely on
Flow & iteration
After the concept phase we mapped out the full flow — how budgeting would be structured from first setup through ongoing tracking. We then built a first version and began iterating, using each internal and external test to push the design forward.
The internal test was run with colleagues across sales, tech, and customer success — people who talk to end users every day. Getting their perspective helped us think beyond the designer's viewpoint and surface friction we hadn't anticipated.
After we get the first iteration concept we started to do the internal test to see what out college think. this will help us think outside the role of designer as we have sales tech to the customer success who contacted directly to the end users
The internal test was run with colleagues across sales, tech, and customer success — people who talk to end users every day. Getting their perspective helped us think beyond the designer's viewpoint and surface friction we hadn't anticipated.
User Testing
We ran three rounds of testing — each one surfacing something different and directly shaping the next iteration.
Round 1 — Internal concept test
User Info
Who: 2 CS team members
Method: Concept test
Key Finding
The flow was harder to use than expected — when recording an expense, users didn't know where to click
What Changed
Redesigned the UX/UI of how to record an expense
Round 2 — Client usability test (Security Industry)
User Info
Who: 4 HR users (2 already use Salary Hero, 2 new users) — all never seen this feature before
Method: Usability test
Key Finding
Users need a tutorial/guide before using the feature
Couldn't find the withdrawal auto-fill button on their own; expected auto-fill for salary side too
Suggested multi-select for category to record everything at end of day in one go
Streak and invite friends feature seen as strong motivation to use the app
Spin the wheel: they love it
Social features and rewards are the strongest point overall
What Changed
Added a multi-add menu to the logging flow
Round 2 — Client usability test (Food Chain Company)
User Info
Who: 4 HR users (2 already use Salary Hero, 2 new users) — all never seen this feature before
Method: Usability test
Key Finding
Users need a tutorial/guide before using the feature
Couldn't find the withdrawal auto-fill button on their own; expected auto-fill for salary side too
Suggested multi-select for category to record everything at end of day in one go
Streak and invite friends feature seen as strong motivation to use the app
Spin the wheel: they love it
Social features and rewards are the strongest point overall
What Changed
Added a multi-add menu to the logging flow
Results
From the user interviews, we realised that the wheel and streak rewards are what makes the feature more interesting and what would invite more people to come in and use it. Originally we planned to revamp only the current feature we had as Phase 1 — which is record income/expense — but based on what we heard, we decided to include the wheel and streak in Phase 1 too. Character and saving goals are good to have and moved to a later phase.
Results
Phase 1 — Budgeting Revamp
The core revamp of the existing budgeting experience. Based on user testing feedback, we knew the current recording flow was confusing — so we redesigned it from the ground up. We also added wheel and streak into this phase after user interviews showed these were the strongest motivators to get people to start and keep using the feature.
Record Expense/Income
Record from the last SOD (Salary on Demand) withdrawal
Budgeting summary
Streak
Get a chance to spin the wheel when completing the streak goal
Win the coupon
Wheel
Record expense daily/weekly
Notification reminder
Phase 2 — Character
Once users are comfortable with the core recording flow, we introduce the character system. Users can customise a character that represents them in the app — making the experience feel more personal and giving the product room to grow into personalised recommendations and guidance in the future.
Character
Get character customization
Phase 3 — Saving
The final phase extends the tool beyond tracking into planning. With saving goals, users can set intentions — not just record what happened — which moves them from awareness into active financial behaviour change.
Saving
Can set the saving goal
Set the daily/weekly saving
Reflection
Learning
Looking back now there are things I wish we had done differently. These are the lessons that stuck with me the most.
Test early, even when it's rough
The internal concept test exposed usability issues before any high-fidelity work was done. Catching that early — with colleagues from sales and CS, not just designers — saved significant rework and changed the entire onboarding approach.
Back up with data
The reward system almost got cut for being too complex. User testing round 3 gave us the evidence to keep it — users were genuinely interested. Data beats opinion in stakeholder conversations.
What's next
Design the motion in the feature
now that the core flows are defined, the next step is adding motion design to bring the experience to life — especially for the wheel spin, streak completion, and reward moments where animation can make the interaction feel satisfying and worth coming back for
Hand off Phase 1 to dev
finalise all specs, interaction states, edge cases, and content for Phase 1 and connect with the dev team to ensure a smooth build with no gaps between design intent and implementation
Measure post-launch
once Phase 1 is live, track adoption against the 4% baseline and gather usage data to inform what to prioritise in Phase 2 and 3