Traq

Traq

Tracking subscriptions and improving financial health

Springboard | Fintech | Capstone Project | Mobile

Product Impact

Improving people's financial health and awareness on excessive subscription spending.

UX Designer

Served as the primary UX Designer where I researched, created roadmaps, style guides, and design.

Figma

Project Goals

Create high fidelity designs in 2 weeks
Establish an information architecture
Create a responsive design that is adaptable to an apple watch.

Problem

A fictional company wants to solve people's problem that are struggling to track their subscription expenses and improve their overall financial health.

I. DISCOVERY

Preliminary Information

As my second capstone project, I was given the following information:

Users may not be getting effective communication about the upcoming events
Users need an incentive to attend but this incentive would need to be cost-effective for the company
Target users are between the ages of 32–55 years old
The user base is an equal split between men and women
Use phones and desktop applications equally
Brand personality: trusted friend that cares about helping people and making a difference in the world
Brand attributes: caring, familiar, humorous, optimistic

II. DEFINE

Day 1: Research Plan

On the first day of this project, I created a research plan to finish my project in 90 hours spread across 19 days.

Style Guide

Day 2-3: Competitive Analysis

As soon as I established the product’s brand and style guide, I moved to choosing three heuristics that would help me identify UI elements that ensure the users’ security, knowledge, and understanding for the product.

The heuristics were scored by using the following metrics:

Identify elements meeting one of Nielsen Norman's heuristic
Score a heuristic out of 5 by counting how many times a heuristic is successfully demonstrated on a page
A score of 4 out of 5 means that the competitor design is usable.

Day 4: Information Architecture

Day 5: Userflow

III. DESIGN

Day 8: Wireframes

Low Fidelity Usability Testing

Problem:

In the dashboard page, the users were confused about the fraction “$109/$150” where “$150” is in a smaller text.

Solution

Remove “$150” and change the header to “$109 due this month”

Problem:

In the subscription page, users did not understand the graph being illustrated.

Solution

Provide a description about the graph being displayed.

Day 11-15: Mockups

Day 16: Prototype

Watch Video

Day 17-19: High Fidelity Usability Testing

Enlarge the texts and card size of the Financial Resources card.

Move the "Keep an eye on all of your subscriptions" card lower in the subscription page.

In the subscription page, darken the texts under each subscription icon.

In the dashboard, remove the "+1" from the "new subscription this month" notification.

IV. DELIVER

This project was not handed-off to a development team as this was a capstone project for my UI/UX Design bootcamp.

Lessons Learned

This second capstone project was unique compared to the other projects I encountered through Springboard because the project provided me with user research, brand personality, and a target audience. In this situation, I needed to take the fictional company’s information and relate it to a mobile app design that best fits the company’s idea and goals. This time around, I took advantage of UI kits by putting different kits together in order to form Traq’s design. I learned the value of usability testing and how it was a crucial element to help adjust UI elements to improve the overall user experience, and also took in feedback from participants in order to help establish future goals for the product.

Next Steps

In addition to the mobile prototype I designed, I also dove into designing a few high fidelity frames for the apple watch! Here you can see a mockup I designed for the dashboard, subscriptions, and unsubscribing screens.