[UI/UX Design Case Study] Montrack — App that helps achieve your financial goals

Photo by Markus Spiske on Unsplash

“A budget is telling your money where to go instead of wondering where it went.” — Dave Ramsey

📌 Overview

As someone who is just starting out in the workforce, sometimes we don’t know where our money is going, like it always disappears so quickly. This is where this platform comes in. Montrack is an app for managing finances in a fun way. I used the Design Thinking method to build this design and SEQ for testing.

Timeline : Less than 2 weeks

Tools : Miro, Figma, Google Form, Google Meet, Notion, Affinity Designer

📃CHAPTER 1 — THE PROBLEM

📌 Background Story

The story begins when I was pursuing my D-3 degree in Visual Communication Design at the School of Vocation, Sebelas Maret University. At that time, I was still receiving an allowance from my parents. I found it challenging to manage my personal finances effectively. I’m the type of person who likes structure, so I started looking for ways to manage my finances in an organized manner.

I once tried the manual method by recording every expense and income in a physical ledger, but I found it to be less flexible and not very effective because I had to carry the ledger everywhere. I also attempted budgeting by dividing my money and putting it into different containers, but I didn’t find this method very efficient either.

I searched for a personal finance tracking application and came across one called “Buku Kas.” It was decent, but the application was quite complex as it was primarily designed for businesses rather than personal use. Moreover, it lacked budgeting features.

Not long ago, I found an application that better suited my needs called “Kelola Uang Pro.” This app offers convenience in recording income and expenses. Additionally, it has features for dividing money from various sources and generating reports. However, it lacks budgeting features, so I still felt something was missing.

So, I decided to create a case study based on this story. Happy reading.

📌 Validating Problem

I tried to validate the financial management issues I encountered with others to see if they had similar or different problems. The goal of this validation was to gain insights. I created a survey and sent it to people. From the validation I tested, I found that the majority of respondents had the same financial management problems as I did.

📌 Define the Problem

Based on the validation that has been conducted, the pain points faced by users are:
1. Difficulty in managing finances because:

• They haven’t found an effective and efficient way to do it.
• It’s challenging to control themselves from buying unnecessary items.
• They often forget to record their finances.
• They are reluctant to record their finances, leading to sudden increased expenses.
• Lack of accuracy in their planned estimates.

📌 Problem Statements

Then, these pain points can be narrowed down into problem statements, including:

📌 Affinity Diagram

📃CHAPTER 2 — THE SOLUTION

📌 How Might We

📌 Competitor Analysis

📌 Emphaty Map

📌 Define the User — User Persona

📌 Define the User — User Journey Map

📌 Priority Feature

1. Tracking income and expenses
2. Budgeting
3. Set goals
4. Push Notification
5. Financial quotes of the day

📌 User Story and User Journey

📌 Information Architecture

📌 Userflow

📌 Branding

📌 App Moodboard

📌 Skecthing

📌 Wireframe

📌 Design Systems and Components

📌 Mockup

📌 Prototype

📃 CHAPTER 3 — THE IMPACT

📌 Testing

At this testing stage, I used the Direct UT and SEQ (Single Ease Question) methods. The following is a list of tasks that must be completed:

📌 SEQ Result

📌 Improvements

📌 Closing

So that was the process from start to finish where I created this Montrack application design, I learned a lot of lessons and they were all valuable. Thank you for reading to the end and have a nice day.

Want to get the Figma file? get it here

For more awesome stuff check my website at Sahid — Freelance UI/UX Designer (webflow.io)

Thank you 👍