Louis Lai Portfolio

SubTrack

UX Design

Mobile App

SubTrack is your e-commerce subscription tracking and managing app that will help you stay on top of both your e-commerce subscriptions and your budget.

Project Context

How long did it take?

3 weeks, work with 3 UX designer

What are my Responsibilities?

UX research, UX design, Wireframing and prototyping, Usability test

What tools did we use?

Figma, Google Doc, Adobe Creative Suite

The Problem

Users find it difficult to manage and track their e-commerce subscriptions and feel frustrated when they become aware of their overspending, even more so when trying to find the time to track them all with the current methods available.

How can we help them?

Create a clear and more organized tracking app that automatically lists down all the subscriptions connected to the user’s email address and how much each subscription costs, giving the users a sense of control and peace of mind.

Research

User Research

We started with conducting 5 interviews, all from random participants of ages 17 and above, of all genders, statuses, and backgrounds. This is to gather unbiased information on what greatly impacts people’s decision-making, thought processes, and challenges regarding their e-commerce subscriptions.

At the same time, we launched an online survey with 50 Participants to discover their behavior on e-commerce subscriptions, like how much they spend on e-commerce subscriptions, how to keep track of their subscriptions, etc.

Research Findings

Most of the participants do not keep track of their subscriptions due to the time-consuming and complicated nature of the manual tracking process. This leads to frustration as they frequently find themselves billed for automatic renewals, which they only become aware of upon receiving notifications.

Also, we find that the majority of ways to keep track of subscriptions are email notifications (46%) and checking bank statements (22%). However, it’s important to note that not all subscriptions provide email notifications or send them on the billing date, leading to participants overlooking some subscriptions or losing track, which can result in exceeding their budget.

Interestingly, some participants mitigate this by sharing subscriptions with family or friends and dividing the cost, a strategy that helps keep their expenditures within budget.

Meet Budget Bucky

Budget Becky is budget-conscious and says she only has 5 subscriptions that she is aware of. However, she is not aware of her passive or annual renewal subscriptions, like her Applecare+ and the Grammarly software that she uses for business use.

Also, she is constantly worried about auto-renewal payments, managing her subscriptions, losing track of how much she’s paying, and not reaping all the benefits of what she’s paying. Since she’s conscious of her finances she finds ways to lessen the cost by sharing subscriptions with friends and family.

Definition and Ideation

During user interviews and survey, we discovered that our users, Budget Becky is frustrated of managing her online subscriptions, and need a more organized and effective way to keep track her online subscriptions activity. We create a User Insight Statement and Problem Statement to develop a deeper understand of our users, clarify the problem and identify the root cause.

User Insight

Budget Becky needs to manage and track all her subscriptions because she easily looses track of all subscriptions and goes over budget. Therefore, we believe that a clear and more organize tracking app will help users like Budget Becky to feel less frustrated and worried when it comes to her reoccurring subscriptions and that we might be able to help if we provide a platform that can help to be on track with all her subscriptions .

Problem Statement

SubTrack was designed to manage and track online subscriptions for subscribers of multiple online subscriptions. We have observed that the existing subscription menage and tracking service/app doesn't provide a simple, convenient, and accurate method for users to track and manage their subscriptions, like cancel, pause, resume, and change their subscriptions, which is causing potential our users loose tracking on their subscription and go over their budget.

How might we improve subscription menage and tracking service/app so that subscribers of multiple online subscriptions are successful based on reduced time on tracking and managing their subscriptions, accurate integration of multiple subscriptions on difference platforms or providers, success rate on keeping spending within budget, and user feedback?

Brainstorming

Our team used the "I like..., I wish..., What if..." method to brainstorm ideas for our design solutions. After that, we do a dot voting to find out the ideas that are stunning and beneficial to users. Based on the vote result, we prioritize those ideas and generate the Feature Prioritization Matrix. In this case study, we will first focus on the ideas that are high impact & low complexity, those are high impact & high complexity will be in second priorates.

Feature Prioritization Matrix

User Journey map

User Flow Chart

Prototyping and Testing

Low-Fi Prototype

We created our Low-Fi prototype by transforming our user flow chart into a wireframe, then used Figma to develop the clickable prototype.

Usability Test

We conducted a remote moderated usability test to observe user interaction with our prototype. We aim to determine whether users can complete tasks in a straightforward, seamless manner without experiencing any confusion.

The Tasks

1. Sign up by using email and set up a password
2. Use the sort feature to find out specific subscription
3. Pause a subscription and share another subscription with others

2x2 Prioritize Matrix

Iteration

Based on the test result, we iterated our prototype and resolved the issue we discovered by the usability test, and applied color and image to the prototype. The issue that is high impact and low complexity will be in the first priority. Here are some of the highlights of the iteration.

First, we rearranged the layout of the homepage. We move the total spending section to the bottom, increase the size, and combine it with the budget pie chart. It makes it easier for users to know their spending and whether it is still within their budget. Also, we added an arrow in the total spending section to prompt the user that there are more options to show their total spending, like monthly, weekly, or yearly.

Second, after the usability test, we realize that we mix up a filter and sort function. So we recreate the sort function page, and show which category the users are selected in the sort button.

Mid-Fi Prototype

We created our Low-Fi prototype by transforming our user flow chart into a wireframe, then used Figma to develop the clickable prototype.

Conclusion

Final Thoughts

SubTrack involved a considerable amount of research and analysis, leading us to discover a balance between the research and design phases.
The brainstorming stage was particularly enjoyable, as it provided a platform for me to contribute various ideas that significantly shaped our case study.
Given my experience in Figma before the boot camps, I assumed a larger role during the design phase. One of the challenges we encountered was collaborating with team members who had different styles and harmonizing these into a unified style.

Our Next Step

1. Do a usability test on our Mid-Fi Prototype, and keep iterating.
2. Discover the syncing feature.
3. Get into UI Design stage, create UI style guide for SubTrack.