Trackl

Case Study

Mobile phone on table

Role

UI Designer, UX Designer

Tools

Figma, Miro, Photoshop, Illustrator

Methods

Wireframing, Prototyping,  Affinity Mapping, User Flows, User Personas

Overview

A company has a product that keeps track of all of your subscription fees on websites, apps, services, etc. over the years. This company has only launched a desktop-only website that is not mobile-friendly and now needs to create a mobile version of its product that can be used by a broader audience. Right now the company only benefits from desktop users but they know that adding a mobile-friendly version of their product will significantly increase their market reach (with more than half of potential users on mobile devices). This will ultimately result in more users and more business.

View Prototype

Problem Statement

It’s hard to keep track of all the products and services that we subscribe to each month. All we see is money deducted from our accounts for services that we might not even need or want anymore.

Goal

Create a mobile application that allows users to see all their subscriptions in one place, easily cancel subscriptions and ultimately feel like they have control over their subscription spending. 

What's the Game Plan

I began with a road map to make sure I would stay of track. I started with a competitive analysis to gain a broader understanding of current apps. Then I conducted user interviews to discover what users really want.  

What I learned from market research

  • Users are mostly likely to engage with an app within 24 hours of receiving a push notification when they are sent at mid-day on weekends.
  • Subscriptions are excellent because it gives user convenience, access to high-ticket items and no late fees.
  • Must build trust with a customer or you’ll lose the customer.

Talking to the user

I identified potential users to chat with and discover what features they would want and identify their pain points in their current subscription management method.

“Sometimes I forget to cancel a subscription and ended up getting charged more than I want to”

What did I uncover?

  • People can forget to stop trial subscriptions and spend more money than intended
  • Unaware of monthly spending.
  • Users like reminders before a due payment to be able to make changes.
  • Deleting a subscription can be difficult and frustrating

Think like the user

Based upon my findings I developed an example user to design for.

Laying it all out

How are users going to complete the tasks? I identified the main MVP routes and started building the app up from there.

Putting it all together

Then took the flow chart and translated these red routes into wireframes

The money look

I selected the color palettes and button styles to have both a friendly feeling while reminding the user the app is geared toward finances and due bills. All the buttons and icons are rounded and everything is designed on a soft gray or white background. The accent color, red, is used sparingly to remind the user when bills are overdue.

MVP: How does a user easily track spending
Red Highlight

Issue:

  • Switching between months is not obvious.

Recommendation:

  • Make larger and give more space.
Yellow Highlight

Issue:

  • Screen failed accessibility test.

Recommendation:

  • Create a Colorblind Mode.
Blue Highlight

Issue:

  • Users would like freedom to change sub. category. One user stated it would be enough of an issue to not want to use the app.
  • What if someone just wants to make their own category

Recommendation:

  • Add a way to add a category in the Insights tab
  • Also add a Change Category feature.
Revised High fidelity user flow

After making the suggested changes, the second round of usability testing solidified the ease of use throughout the website. Users felt like they could quickly and easily move throughout the website. There weren’t any surprises or unknown functions. Spacing, aligning and sizing was addressed through and formatted to maintain consistency. Many users did express wanting to see more collaboration, they wanted to feel more confident with selecting the recipes and making plans with friends on the same plan. 

Clickable Prototype
Next Steps
I would want to conduct a final round of testing and then create a DARK MODE version of the app.

Conclusion
I learned that as I discovered and tested the prototype more questions would arise. It was difficult to account for these changes but would try to validate the redesign in multiple rounds of testing. If I had more time I would love to test individual flows more thoroughly versus the entire mobile app. I learned that notifications can be difficult to make sure each individual understands the use and function and I would retest this feature. I learned how important the use of color and spacing is as well as making sure the app passed an accessibility audit.

More projects