Budget Buddy
UX/UI Designer
Web Developer
Mobile App
2 months
Figma
Figjam
React Native
Typescript
overview
context
As an expatriate or frequent traveler, managing a budget across multiple currencies can be frustrating. Tracking spending, fixed expenses, and bills becomes even more complex when exchange rates fluctuate daily.
brief
Budget Buddy is your multi-currency budgeting companion, designed to help you stay in control wherever you are. The app brings together:
With its clean interface, dual light/dark themes, and offline-friendly design, Budget Buddy makes financial management effortless — so you can focus on living, not calculating.
- Custom budget creation with support for multiple currencies
- Automatic currency conversion updated daily (or offline using saved rates)
- Expense and bill tracking with categories and detailed history
- Clear statistics showing budget usage and category breakdowns
- Full reset or targeted data deletion to keep your finances organized
With its clean interface, dual light/dark themes, and offline-friendly design, Budget Buddy makes financial management effortless — so you can focus on living, not calculating.
Design process
ITERATIONS & TIMELINE
Phase 1 : Discover & define
// Understand the user flow
// Research
// Benchmarking
Phase 2 : Design
// Manual sketches
// Low & mid Fi wireframes
Phase 3 : Iterate
// Design iterations
// Usability test with real users
// Design system & Ui Kit
Phase 4 : Delivery
// Visual Design
// Prototyping
// Developers cheat sheet
PERSONAS
DESIGN SYSTEM & ART DIRECTION
To ensure visual and functional consistency across Budget Buddy, I developed a comprehensive design system. It includes typography, a currency-friendly color palette, UI components, and branding guidelines to support clarity, accessibility, and a seamless user experience.
Typography and Colors
I selected modern, highly readable fonts (e.g., Outfit) to create a clear hierarchy, ensuring legibility even with small numeric data.
The primary blue #3366FF—paired with a clean grayscale range—reinforces trust and professionalism, while maintaining a friendly, approachable feel.The palette adapts for both light and dark themes, ensuring comfortable viewing in any context.
The primary blue #3366FF—paired with a clean grayscale range—reinforces trust and professionalism, while maintaining a friendly, approachable feel.The palette adapts for both light and dark themes, ensuring comfortable viewing in any context.
UI Components
To maintain consistency, I designed a reusable component library, including transaction cards, budget summary modules, currency selectors, and category icons. The system supports multi-currency formatting and responsive layouts for mobile use, making the app intuitive and efficient across devices.
User testing
To validate Budget Buddy's usability and feature set, I conducted a remote usability test with a small group of expatriates and frequent travelers.
The goal was to observe how users interact with the app, identify friction points, and gather suggestions for improvement.
Questions asked during the test:
- How easy is it to set up your budget and currency preferences?
- Is the onboarding process clear and intuitive?
- How do you find the process of adding a new expense or bill?
- Are category and currency selectors easy to use?
- Is the statistics section understandable and useful for tracking your budget ?
- How do you feel about the overall design and readability in both light and dark modes?
On the expenses screen, I would like to directly see what I've spent, upcoming amounts, and what I have left.
It should be possible to choose the language and light/dark mode right at the beginning of the onboarding.
Choose the budget during onboarding to go straight to the expenses screen.
I would like to be able to see month by month whether I am positive or negative.
It's not very clear how to go back when selecting currencies.
Delivery
Prototype
Find us
BuddetBuddyByMonth
Budget Buddy Monthly
