Tracksy

About

Tracksy is a mobile app that helps users track their subscriptions and help them better understand their finances.

The project was made in dark mode to reflect the popularity of dark UI in the tech world. It was also prototyped for Android devices so I could dive into learning more about Material Design Systems

Tools used

  • Figma

  • Illustrator

  • Procreate

  • Excel

The Problem in 1, 2 ,3

1. Understanding the Need for a Subscription Tracker

In today's digital age, the prevalence of subscription-based services has significantly increased. Especially when many companies have opted in to include subscription services alongside their online storefront.

As subscription economy continues to grow as an integral part lives, managing the multitude of subscriptions can quickly become overwhelming, confusing, & even costly.

2. Financial Strain

With a plethora of services available, it is easy to lose track of recurring payments. As a result, people may continue paying for subscriptions they no longer use or require. This leads to wasted expenses and unnecessary strain on personal finances.

3. Information Overload

The sheer number of subscriptions that an individual can accumulate can quickly turn into an information overload. Remembering renewal dates, login credentials, and even the existence of each service can easily become a challenge. Without a centralized system to manage subscriptions, users may find themselves spending significant time and effort trying to keep track of their subscriptions manually.

Competitors

Subscription and financial tracking apps are not a new idea. To create a unique product that stands out, I extensively researched competitors to understand what users valued VS what they disliked.

Trackmysubs

  • 10+ screens to fully complete signup

  • Large amount of customization options

  • Busy & overwhelming UI

Rocket Money

  • Easy to customize to fit individual needs

  • Components clearly organized

  • Long signup process & setup wizard

Bobby

  • Manual entries for all subscriptions

  • Simple to organize & edit each subscription

  • Not all UI pass web acesibility

Developed a Persona profile to synthesize my findings so I could better understand the target audience.

click to enlarge

User Flows

Creating user flows I kept simplicity and accessibility in mind. I wanted to ensure Tracksy was a seamless experience for users to navigate through. After brainstorming ideas and sketches, I designed the user flow to eliminate any unnecessary steps or complexities.

Additionally, I wanted actions within the app to work for the user, not the other way around. This way, users can quickly understand and complete desired tasks without any confusion of getting lost within the app or experiencing information overload.

click to enlarge

Sketching & Prototyping

After solidifying user flows I created sketches and initiated a quick round of usability testing to ensure my ideas were going in the right direction.

Wireframes

I created wireframes with more detailed features. By incorporating more details in the beginning I was able to get solid feedback during testing.

Usability Testing

5

7

20

minutes each

users

tasks

Takeaways

  • Tasks were straightforward & easy to complete

  • Users were looking for more familiarity, some elements felt out of place

  • Buttons needed to be larger & reiterated to encourage users to use them

  • Calendar should be more comprehensive at a glance and match Android UI

Style Guide

I decided to design my project in Dark Mode to reflect its popularity in the tech industry. It provides a sleek, modern feel that also helps important components pop out.

I selected lavender and cyan as complementary colors to ensure users do not get overwhelmed by a single hue. Both colors are subtly muted to avoid causing eye strain in the dark background. Tracksy aims to provide a user-friendly and trustworthy experience with this color palette.

Components and icons follow Android’s Material Design for a universal feel.

click to enlarge

Hi-Fidelity prototype - version 1

The Home page offers a comprehensive overview of the user’s finances at a glance.

The Reports page breaks down details of the user's spending so they may better understand their own patterns & habits.

The Calendar feature lets users know when to expect upcoming payments as well as create reminders for themselves.

Usability Testing- again!

Before finalizing anything I conducted another round of testing with new participants to ensure everything was intuitive & polished as possible within my projects’s timeframe.

5

10

30

users

tasks

minutes each

Takeaways

  • Side scroll graph not immediately clear

  • Graphs and charts were easy to understand and highly valued to users.

  • Users liked option to explore competitors but distinguishing which one was selected wasn’t clear at first

  • Option to cancel subscriptions from app would help support the idea of a centralized space to manage subscriptions

Reiterations

1. Revised Home screen

  • Added side-scrolling bar

  • Added ‘Manage Subscriptions’ button

  • Updated icon for ‘+Add reoccurring payment’ to for consistency purposes across app

Updated Version
Previous Version

2. Added ‘Manage Subscriptions’

In order to create a truly centralized space for users to manage subscriptions I added a feature that helps users do just that. Instead of having to leave Tracksy to update subscriptions, users can now cancel or adjust their plans within the app.

Screen input
Screen Page

3. Selection Usability

Selection of an icon was low visibility for lighter backgrounds. I wanted to ensure it was clear for users to tell what they were clicking on so I updated it to have higher contrast.

Updated Version
Previous Version

Final Product & Lessons Learned

Throughout the development of Tracksy, I embarked on a valuable journey of designing using Android’s Material Design guidelines. As somebody more familiar with IOS, this project required plenty of discusions & revisions to adapt to Android’s UI patterns.

This project was very rewarding because alongside learning more about Android, I got to exercise my love for data visualization. I had not previously created data visualization within an interactive space. It was a great experience to combine graphic design alongside User Centered Design.

Another challenge I enjoyed working with was designing with small, technical details. When so much information is being communicated, it’s with the most importance that everything is thoughtfully arranged and executed with precision. Otherwise users can easily get lost, entirely defeating the purpose of the application. I am excited to have practiced these technical skills as it paves the road to future projects. I had a lot of fun with this, and thanks for checking it out!