Jajanku Smart Expense Tracker

A smart expense tracking app designed to help users manage their daily spending habits, especially for impulsive purchases.

Jajanku
Tech Stack :
FigmaFigJamUserFlow DesignWireframe

My Role

UI/UX Designer

UI/UX Designer

User Flow & System Design

User Flow & System Design

Problem & Solution

In today’s digital era, many people especially Gen Z tend to spend money impulsively on small, frequent purchases without realizing how much they have spent. Existing expense tracking apps often feel too complex or require manual input, which discourages users from consistently tracking their spending habits.

To solve this problem, I designed Jajanku, a smart expense tracking application that simplifies the process of recording daily expenses. The app introduces multiple input methods such as manual entry, receipt OCR, and screenshot scanning, combined with user confirmation to ensure accuracy and trust. Additionally, users can set spending limits to better control their financial habits and avoid overspending.

User Flow Overview

This flow illustrates how users interact with the app from recording an expense to tracking their spending. The process is designed to be simple and efficient, allowing users to input data through multiple methods such as scanning receipts or manual entry, followed by a confirmation step to ensure accuracy.

User Flow Diagram 1

Design Goal

The main objective of this design is to simplify the expense tracking process and reduce friction when users record their spending.

The app is designed to encourage consistent usage while providing clear and actionable insights into users financial habits.

Key Features

• 📸 Receipt Scanning (OCR) — Automatically extract expense data from receipts

• 🖼️ Screenshot Detection — Easily import digital transaction proofs

• ✍️ Manual Input — Quick fallback for flexible data entry

• ⚠️ Spending Limit Reminder — Helps users stay within budget

• 📊 Expense Overview — Clear visualization of spending behavior

UI/UX Approach

The main focus of this design is reducing friction in the expense input process. Instead of relying solely on manual input, I explored alternative methods such as OCR and screenshot scanning to make the experience faster and more convenient. I also designed confirmation steps to ensure users trust the system, especially when dealing with automatically extracted data.

The interface is designed to be clean, minimal, and easy to navigate. I focused on: clear hierarchy, readable typography, intuitive layout to ensure users can quickly understand and interact with the app without confusion.

Wireframe

The wireframes represent the initial structure of the application, focusing on layout and user flow without visual distractions. At this stage, the goal was to organize key elements and ensure a clear and intuitive navigation experience.

Wireframe 1
Wireframe 2
Wireframe 3
Wireframe 4
Wireframe 5
Wireframe 6
Wireframe 7
Wireframe 8
Wireframe 9
Wireframe 10
Wireframe 11
Wireframe 12

Final UI Showcase

The final interface emphasizes a clean and intuitive user experience, with a strong focus on readability and visual hierarchy. The design aims to reduce cognitive load and make financial tracking feel simple, accessible, and engaging for everyday users.

UI Result 1
UI Result 2
UI Result 3
UI Result 4
UI Result 5
UI Result 6
UI Result 7
UI Result 8
UI Result 9
UI Result 10
UI Result 11
UI Result 12
UI Result 13
UI Result 14

Challenges

One of the main challenges was designing a system that balances automation and user control.

While OCR and screenshot scanning can speed up input, users still need confirmation to ensure data accuracy.

Designing this flow in a way that feels seamless and not overwhelming was a key challenge in this project.

Result

The result is a user-friendly expense tracking app design that simplifies how users record and manage their spending.

The design demonstrates a strong focus on usability, clarity, and modern mobile UI patterns.

What i Learned

• Designing for real user behavior (impulsive spending habits).

• Balancing automation and user control in UX.

• Creating intuitive flows for complex features.

• Improving UI clarity and consistency.