Back to Main
02Figma, FigJam, Canva

Money Tracker App

Role
UI/UX Designer
Duration
4 Weeks
Tools
Figma, FigJam, Canva
Money Tracker App

Overview

Project overview.

Money Tracker is a mobile application designed to help users manage their finances by tracking income and expenses, setting financial goals, and analyzing spending habits. The goal was to create a simple and intuitive experience that helps users stay financially organized without feeling overwhelmed.

Problem

The problem.

Many people struggle to track their daily spending and often forget small purchases, making it difficult to understand their financial habits. Existing solutions can feel complicated or fail to support budgeting goals, leading to impulsive spending and poor financial awareness.

Goals

What success looked like.

  • 01Enable users to record income and expenses quickly and efficiently.
  • 02Provide clear visual comparisons of income versus expenses for the current month.
  • 03Allow users to set financial goals and limits for better budgeting.
  • 04Offer a detailed transaction history categorized by months for better insights.
  • 05Ensure an intuitive and user-friendly experience to cater to a wide audience.

Research

Listening before designing.

To better understand users' financial habits and challenges, I conducted interviews and research to explore spending behaviors, budgeting practices, and financial goals. The findings helped identify key user needs and pain points. Based on these insights, I created Information Architecture (IA) and User Flows to organize the app structure and ensure a smooth and intuitive user experience before moving into wireframing and visual design.

Design Systems

From sketches to system.

To maintain consistency and scalability throughout the application, I created a design system that included color styles, typography, buttons, icons, vectors, logos, and reusable UI components. This helped establish a cohesive visual language and ensured a consistent user experience across all screens.

Money Tracker App process

Wireframes

Structure first, polish later.

Low-fidelity wireframes were created to define the app structure, explore screen layouts, organize content, prioritize key information, and validate user flows before moving into high-fidelity designs.

Decisions

Design decisions that mattered.

  • Quick Add for faster expense entry
  • Clear visual charts for financial insights
  • Goal tracking to encourage saving habits
  • Simple navigation for accessibility

Solution

The final solution.

A mobile-friendly solution was designed to help users easily track income and expenses, monitor financial performance through visual charts, set budgeting goals, and review transaction history for better financial decision-making.

Money Tracker App process

Outcomes

Results that mattered.

Clear overview of income and expenses.

Faster transaction recording and management.

Goal setting and spending monitoring.

Reflection

What I'd carry forward.

"This project taught me the importance of balancing financial data with simplicity. Through research, wireframing, and iterative design, I learned how thoughtful UX decisions can make personal finance management feel approachable and less intimidating."

Next Case Study

GiyaPay Dashboard

03 · Figma, Canva