Save Up

Ever tried to save up for a big-ticket purchase like a vacation or car? Without a system to help track money-in versus money-out, it can be quite difficult for individuals to make a plan and track their expenses for a specific financial goal. That's where Save Up comes in. It is a goal tracking app designed to give users an easy-to-use interface for checking their financial progress.

Role:

Researcher/ Designer

Duration:

~8 weeks

Type:

Google UX Course Project

Overview

Financial tracking can be time-consuming and confusing for individuals. People saving for something specific (new home, vacation, etc.) would like a simple, targeted, and flexible way to track their financial progress. This project involved defining the user, creating user personas and stories, conducting competitive research, and developing wireframes and high-fidelity prototypes.

Research

To understand user frustrations and needs, I relied on secondary research and conducted usability studies during the process to gather feedback on how the application functioned and possible areas for improvement. The research determined there were 4 specific user pain points when it came to existing goal tracking:

  1. Time Consuming — Expense tracking takes time

  2. Too General — Most apps only focus on spending habits but aren't geared toward a specific goal

  3. Security Concerns over Syncing — Syncing credit card or bank info is risky

  4. Flexibility — Current apps are too rigid in how they display information

User Personas

Using the initial research, I was able to develop two user personas. One for a working mother and wife who is looking to save for a new home and another persona for a 23-year-old single individual planning for an upcoming 2-week international trip.

SaveUp Persona for married woman
SaveUp Persona for single man

Goal Statement

The goal tracking expense app uses a visual interface that allows users to track their spending habits, which will allow them to clearly see and adjust their progress to meet specific financial goals. We will measure effectiveness by tracking the number of times a user marks a financial goal as completed.

Ideate

After creating a journey map of the user's step-by-step process, I was able to define some possible issues users may encounter with existing apps and opportunities for additional enhancements. This provided the foundation for my information architecture and how to structure the application for a better user experience. From there, I was able to start the ideation phase with storyboards and paper wireframes.

Homepage Paper Wireframes
New Goal Paper Wireframes
New Transaction Paper Wireframes
Review Goal Paper Wireframes
Past Goals Paper Wireframes

Digital Wireframes

Each paper wireframe consisted of 5 different design ideas. I reviewed each wireframe design and extracted elements from the different design ideas to create a final wireframe for a page. This allowed me to move from pen and paper to digital designs in Figma for a cleaner representation of the application. The digital wireframes consisted of both mobile and desktop versions to ensure responsiveness.

I conducted 5 interviews both in-person and via Zoom with users ranging in age from 22 to 75. Some users had difficulty creating a new goal from the homepage and expressed confusion about entering info into the form fields. This feedback provided valuable insight on how to refine certain areas of the wireframe to improve the experience.

Wireframe for Nav
Wireframe for Homepage
Wireframe for Creating Goal
Wireframe for Manual Transactions
Wireframe for Reviewing Transactions
Wireframe for Goals Page
Wireframe of Desktop Homepage
Wireframe of Create Goal Page
Wireframe of Goal Created Page
Wireframe of Individual Goal
Wireframe of Transactions Page
Wireframe of Review Goal Page

Prototypes

After iterating on the low-fidelity wireframes based on user feedback, it was time to move onto the high-fidelity wireframes and prototypes. This was where I was able to explore different fonts, colors and iconography for the app. I incorporated a green color palette to connect with the financial aspect of the app and chose a pink accent color for buttons and other highlighted items. I focused on mobile designs first and then expanded to the desktop version.

** Scroll through the slides to see prototypes of both the desktop and mobile versions. Double click to zoom on areas.

Hi-fi prototype on Desktop
Hi-fi prototype on Mobile

Stickersheet

The Stickersheet defines the primary headings, fonts, colors and components used in the application. It provides a quick overview of the design elements for development and a starting point for a larger design system.

Image of the Stickersheet

Reflection

In an effort to create an application for users saving for a specific financial goal, this app gives users options for how they track their spending as well as how they view that information over time. This app is particularly relevant for individuals who don’t currently have a good budgeting system and may be starting out in their professional careers.

As a UX designer, I learned the importance of empathizing with the user and conducting usability studies to obtain real-life feedback. Some key learnings, include:

  • The process is never finished – iteration is continual
  • Start with pen and paper before moving to digital versions
  • Identify your own biases and listen openly to users