Track That: A Solution to Tracking Subscriptions
As the primary designer I conducted research, built a high fidelity prototype, and conducted usability tests for this case study.
Problem
It is hard to keep track of all the products and services we subscribe to each month. Every month we just see money taken out of our account for services we may want or services we might not need at all. TrackThat keeps track of all your subscriptions fees for websites, apps, and services.
Solution
Create a mobile app that tracks all user subscriptions.
Primary Research
I dove into research to start to explore the problem space. I started by studying industry leaders to see how other designers solved similar problems. I started by looking at TrackmySubs, TrueBill, and Trim. I looked at all the user interfaces and listed what I liked and disliked. Then I made a list of best aspects to incorporate them in my design solution.
I got some amazing ideas so I decided to look up two more of the top subscription apps in the app store: Billbot and Bobby.
After finding the top five subscriptions tracking services. I did an in depth dive of each service. I reviewed some of the case studies, read customer reviews, and learned all the unique features of each service to better understand exactly what users liked and disliked about each service.
Bobby and Billbot were the best I reviewed. They were both mobile apps that were super easy to use and free! They allowed you to add subscriptions, set reminders, and easily see your monthly expenses. All while using very few screens. This feels like exactly what I should be making. A simple easy way to track your subscriptions without the clutter.
Synthesis
How Might We Statements
After I completed my research I synthesized my research into three How Might We Statements.
How Might we help users see all their subscriptions in one place?
How might we help users easily unsubscribe from services?
How might we help users get notified about the bill date of current subscriptions?
UX Design
Once I had grasp on what my design solution I needed to deliver. I got to work on the User Flows. I kept it as simple as possible to focus on the key task users wanted.
User Flow
Initial Sketches
Once I had an idea of how users would move through the app. I got to work figuring out what it would look like. I made sure to keep the users in mind by making every step quick and efficient.
Usability Test 1
After I designed the key screens. I created a lightweight design prototype in Marvel. I planned to use this prototype to determine if a mobile app helped people keep track of their subscriptions.
I interviewed 5 participants via Zoom to determine if the primary function (Keeping track of subscriptions) of my design was practical.
Each participant was subscribed to multiple subscription services and had experience using mobile apps.
I gave my participants three task scenarios:
Add a new subscription
Set up notifications for an active subscription
Unsubscribe from a current subscription
Usability Test Findings
My testing showed me I still had some room for improvement. The key functions were there but they were not the most user friendly. While most users could add subscriptions there were issues with the button placement. Notifications had to be improved since it lacked options that 5/5 users requested. Overall I got great suggestions on how to improve and take my design solution to the next level.
UI Design
Once I completed the first usability test I used the feedback to iterate my designs and started building my high fidelity mockup. I created a new notification screen, bigger buttons, and added fun gamification elements to make the app more fun.
I created a style guide to help me add style and personality to the app. Once I selected my color scheme, I created my UI elements and selected the icons I wanted to use in my design.
Style Guide
High Fidelity Mockups
Once I completed the style guide I used it to create my final high fidelity designs.
Usability Test 2
Once the high fidelity screens were complete I did my second round of user testing. I created a High fidelity prototype in Marvel. I planned to use this prototype to determine if a mobile app helped people keep track of their subscriptions and addressed all the How We Questions I developed after I synthesized my research.
I interviewed 5 participants via Zoom to determine if the primary function (Keeping track of subscriptions) of my design was practical.
Each participant was subscribed to multiple subscription services and had experience using mobile apps.
I gave my participants three task scenarios:
Add a new subscription
Set up notifications for an active subscription
Unsubscribe from a current subscription
Usability Test Findings
This round of user testing showed me I went in the right direction. 5/5 of users were able to complete all three tasks. Users loved the UI and really felt the added gamification elements made a mundane task a little more fun. There were still a few kinks like the confusion between the remove and unsubscribe button, but overall a huge improvement from the first round of testing.
Recommendations and Future Iterations
To resolve some of the smaller issues I made the add button a bigger call to action button and even made the font thicker.
I also added a big unsubscribe button to the app information screen so users could clearly see the difference between the two buttons.
Reflections
Throughout this project I really focused on the user. I let user experiences and testing drive this design solution. Having an imperfect prototype really got the users talking about what they wanted to see in the design solution and honestly made the project more fun to develop.
In the beginning of this project I focused on building simple and expanding. This made the project so much more successful. It made me focus more on what the users wanted and less on what I felt the design solution should be.
I loved working on this project. I gained great knowledge on user testing and got to be creative with fun components like gamification elements. Overall I gained confidence as a designer and developed a fabulous design solution.