OnTrack: Financial Clarity for Young Professionals

Empowering users on their financial journey

Client Name
OnTrack
Tools
Figma
FigJam
Miro
Google Workspace
Team
User Researchers
UX Designers
UI Designers
My Role
User Research
UX Design
Wireframing/Mockup
Visual Design
Usability Testing
Timeline
Overall: 4 Weeks
Discovery & Research: 2 weeks
Design & Testing: 2 weeks
About

OnTrack is a digital solution designed to empower young professionals in their early careers who struggle with managing their finances. For many, managing monthly expenses can be overwhelming, and small, frequent purchases often go unnoticed, leading to overspending. OnTrack provides a clear overview of spending patterns, enabling users to set customized reminders for due dates and track expenses by category. By offering insights into where their money is going, the app empowers young professionals to make informed financial decisions and maintain a stable financial life.

Problem

Young professionals early in their careers often need support in managing their finances as they face challenges in monitoring and controlling their spending habits. With the pressures of navigating new financial responsibilities and the tendency to overlook small, frequent purchases, it can be difficult to maintain a balanced budget.

Solution

OnTrack is an expense tracker app designed to help users easily manage their finances. The app provides clear insights into spending habits, allowing users to track their expenses and adhere to their budget effectively.

User Research

I want to understand the behaviors of individuals who struggle with managing their finances, particularly in planning and tracking their payments. To address this, I am developing an expense tracker app that helps users enhance their money management skills and overall financial health. The app will feature customizable reminders, enabling users to organize their payments by due dates, ensuring they stay on track with their financial commitments.

  • I want to understand the process by how people manage their money for their payments and expenses in their daily lives.
  • I want to identify what kind of actions people take to record and track their expenses by amount and due date.
  • I want to figure out what specific difficulties people encounter about how they simplify their expenses when getting their finances in shape.
  • Why do people overspend? Why do people miss their payments?
User Interview

These insights provided valuable information on how users manage their finances and directly informed the design decisions and priorities for creating a more intuitive and effective expense tracking system.

To gain a deeper understanding of user pain points and behaviors in financial management, I conducted a series of user interviews to uncover the challenges individuals face when tracking their expenses, especially small, frequent purchases.

  • Managing finances manually are complex and daunting. During the interviews, 80% users have a hard time monitoring what their monthly spending are and when the due dates are.
  • 80% users pay less attention to small amount purchases (coffee, food or subscriptions) that they spend on daily and not realizing how small purchases accumulate over time.
  • 60% users mostly struggle to track their unnecessary purchases especially on special occasions or when they go out to socialize with friends, they are less likely to visualize the overview of their spending.
  • 60% users validate the value of the expense tracker app that they would be able to make more well informed choices based on their potential spending habits while tracking their expenses closely.
Affinity Diagram

According to the research findings, users manage their expenses using a variety of methods such as setting reminders, using Excel, and relying on a single credit card to simplify tracking. However, they often struggle with impulse spending, financial stress, and confusion when using budget tracking apps, particularly due to excessive information requests and categorization challenges.

The full version of the Affinity Diagram can be accessed by clicking on the button on the side.

Empathy Map

By creating an empathy map, a comprehensive overview of the users and their experiences was obtained, highlighting their struggles with managing multiple payments, especially subscriptions, and frustration with miscategorized expenses in existing tools like Mint.

The full version of the Empathy Map can be accessed by clicking on the button on the side.

User Insights Statement

Young professionals in the first few years of their careers NEED to keep track of all their expenses to stay within budget BECAUSE they want to gain control and become aware of their monthly spending in order to maintain a financially stable life.

How Might We

create a digital solution that provides users with greater control and awareness to visualize their monthly expenses, particularly for those who struggle with sticking to their budget, in order to improve their financial well-being?

I Like, I Wish, What If

I wanted to explore additional methods during my ideation phase, so I incorporated the "I Like, I Wish, What If" framework. This approach allowed me to better understand user preferences, desires, and potential opportunities for improvement. Based on this phase, I identified features users value, such as tracking expenses and viewing upcoming bills, while also uncovering wishes for enhanced budgeting tips, secure data handling, and features like in-app payments and debt management assistance. These insights helped shape the direction for a more user-centered solution.

MoSCow Matrix

Additionally, I used the MoSCoW matrix to prioritize features for the expense tracking app, ensuring a clear focus on essential functionalities. Core features like expense tracking, budget overviews, and data privacy were classified as "must have," while enhancements like spending categorization and dashboard customization were deemed "should have." Potential features such as automated reports and subscription management were categorized as "could have," and elements like in-app purchases and advertisements were excluded to maintain a streamlined user experience.

User Scenario

I continued doing a user scenario to better understand the user John’s daily challenges with managing his expenses while balancing a busy work schedule. This scenario helped highlight his frustrations with keeping track of bills and the importance of having an organized system to manage his finances. Through this, I identified key goals, such as tracking expenses by due date, recording transactions, and gaining control over his spending habits.

Competitive Analysis

In my competitor analysis, I found that many existing apps fail to provide solutions for users who rely on cash or unlinked bank accounts.

Additionally, competitor apps often complicate the user experience with confusing layouts or intimidating financial terminology. Most apps also feature premium pricing and in-app advertisements, which can disrupt the user experience and limit accessibility.

User Flow Diagram

I designed a user flow to streamline the process of managing bill payments within a financial dashboard. The flow guides users through adding bank accounts or manual bills, providing clear steps for both automatic and manual entries. It also incorporates notifications and a simple process for marking bills as paid, enhancing user experience by minimizing friction. Additionally, the design allows users to categorize, save, and set recurring expenses, ensuring comprehensive financial management with ease.

Low-Fidelity Wireframes

I created low-fidelity wireframes to visualize the core functionality of the expense tracking app. The design includes a simple dashboard to display recent activities, a selection screen for adding accounts or bills, and detailed expense entry forms. Additionally, a notification feature alerts users of upcoming bills, helping them stay on top of their financial obligations in an organized and intuitive way.

Usability Testing

I conducted usability testing on low-fidelity prototypes to understand how users were interacting with the design. The testing revealed key issues, such as users struggling with navigation, icon clarity, and the ability to quickly edit expenses. Additionally, users wanted a more detailed view of their transactions to easily identify and track their spending. These insights informed the next steps in refining the design for a better user experience.

I incorporated the feedback from users and applied it to create iterated mid-fidelity wireframes, refining the design based on their insights.
High-Fidelity Mockups

With the high-fidelity design, I focused on refining the visual aesthetics and user interface to ensure a smooth and intuitive experience. The design includes detailed expense reports, a calendar view for tracking bills, and a notification system to alert users of upcoming payments. These elements were developed to help users easily manage their finances while maintaining a visually appealing and user-friendly layout.

Key Takeaways
Research is a fundamental part of the UX design process and is crucial for empathizing with users. Taking the time to outline research goals thoroughly is essential, as feedback from interviews will form the foundation of the design.
Designing technology that is accessible and equitable for users of all backgrounds is a key priority. This approach ensures that solutions are inclusive and meet diverse needs.
More time would have allowed for additional user research, which would have provided a broader range of opinions and potentially more effective design solutions for the mobile app.
What I Learned

Comprehensive research provides invaluable insights that guide the design process, emphasizing the need for detailed user feedback to inform design decisions.

Accessibility and inclusivity in design are crucial for meeting the needs of users from various backgrounds and ensuring equitable technology access.

Ongoing user engagement and research are vital for refining design solutions and addressing evolving user needs. More extensive research enhances the understanding of user pain points and preferences.

Next Steps
01
Conduct another round of usability studies to verify whether the identified user pain points have been effectively addressed in the design.
02
Gather additional feedback from a broader user base to ensure the design meets diverse needs and improves the overall user experience.
03
Iterate on the design based on insights from follow-up research, making necessary adjustments to enhance usability and address any remaining issues.
What's next?
Hero Image Walmart
Walmart Project
Revolutionizing Customer Care Experience
Hero Image FAJ
Filipino Advocates for Justice
Non-Profit Organization Website Redesign