Subtrac

A mobile solution to track, manage, and reduce expenditure behind subscriptions.

Role
UX Researcher & Designer
Duration
Jan ‘21 - Feb ’21
tools
Figma, Miro, Draw.io, Miro, Apple iWork, Google Workspace.
Key skills
Research, User Interview, Ideation, Information Architecture, Sketching, Wireframing, Design System, Visual Design, Prototyping, Usability Testing.
Context
The Problem

In our fast life, we hop on to free trials, intending to cancel before it starts charging, or subscribe to a service to watch some popular series or movies, planning on canceling it later on, or, even worse, don't use a service anymore but are still subscribed to it thinking that we will unsubscribe /cancel it before the next cycle begins.

However, most of us forget to actually act on those intentions! After all, we are humans and it's not so surprising to forget things. What comes as a surprise is when we look at the bank statement and realize what we forgot to act on.

Hence, it is safe to say, keeping track of all the subscriptions can quickly get out of our hand, leading to "avoidable" expenditure.

The Process
Image of process followed during the project
Research & Discovery
User Interview Takeaways

5 candidates, age ranging between 25 to 35 years old, were interviewed to study their go-to process to manage subscriptions and to understand their desired goal behind tracking and managing subscriptions.

Affinity map from the user interview
Ineffective Alerts
Getting notified about the deduction is futile if you plan on unsubscribing that service before billing.
Manual Input
No matter how helpful it is to track, I never get down to manually feed my subscriptions into a system.
Element of Surprise
Distressing to go through bank/credit statements and realize you forgot to unsubscribe from something, and now you’ve been charged.
Wishful Reminders
Taking screenshots or making a note regarding the services you need to unsubscribe from, but then forgetting about it the next day.
Personas

The Forgetful Engineer

Persona One: Arjun

The Industrious Student

Persona Two: Alex
How Might We ....
facilitate effective subscription tracking, management, and cancellation?
Clear, and minimal information with quick yet effective actions.
Visuals to reflect cancellation / expiration can be a positive thing with positive results.
Easy CTAs to perform expenditure reductions if desired by the user.
keep users ahead with comprehensive information without creating confusion?
Dependency on colors and visuals to engage attention to important information.
Provide enough breathing room to process important information without feeling overwhelmed..
Reduce interactions leading to jumping between pages to stay on the information without having to break attention.
Goals
Streamlined

Ensure maximum information, minimal interaction, and quicker access to task completion.

Friendly

Create a process that requires less involvement from users while assisting them in completing tasks.

Dependable

Deliver a uniform, clarity-driven information interface to minimize confusion and facilitate ease, creating a trusting environment.

Casual

Create an easy-to-understand and less conscious reasoning flow.

Market Study & Inspiration

To obtain a clearer picture of the envisioned solution and ensure my ideas match the users’ needs, I spent time looking at various related and unrelated products for inspiration.

While browsing, I discovered multiple interfaces and interactions, which facilitated in filtering through all the amassed ideas and giving shape to a blurry solution.  

Information Architecture & Ideation
As a user, ....
I want to get a comprehensive view of my spending on subscriptions.
I want to unsubscribe from a subscription to reduce needless spending.
I want to be notified prior subscription renewal so that I can decide if I want to renew the subscription and continue spending money.
Sitemap
Sitemap of the interface
Critical screens

I played with multiple viewpoints and decided to move forward with a combination of inspired ideas for the critical screens that would provide a clear, comprehensive, and approachable presentation of information that users can select and navigate through.

User Flow

Once I narrowed down the critical screens, I tried to visualize how the users would interact and flow through the interface, what results from their interactions, and what the user would do next.

Guerilla User Testing

A quick guerilla usability testing was performed to understand if the early-stage hypothesis aligned with the users’ mental model, which helped capturing a few critiques and suggestions to structure my next iteration process.

Payment information would be helpful.

Subscription history is better than having latest receipt.

Reminders are definitely useful.

Categorized visuals for subscriptions do grab my attention.

Design System
Branding

The idea was to be a trusted friend who is helping you save money through the brand. It needed to be simple and casual to reflect care and friendliness; attributes which I picture the users to intrinsically feel while using the app. 

Subtrac is a truncated version of the term “subscription-tracker” as well as of the term “subtraction”.

As a brand name, it is simple and direct to its purpose; tracking subscriptions and assisting to subtract unnecessary spending behind subscriptions.

Style Guide

The interface should be simple yet fun and vibrant to use so that it is less mentally intensive, avoids overwhelming users, and eases the task completion process. Whether it's their first time using it or the hundredth, the user should feel in control and at ease while using it.

The experience needs to reflect the attributes mentioned above, act steadily, and function together seamlessly. An intuitive experience helps establish trust, and a product that its users can trust builds confidence and dependency.

Color Palette
Typography
TypographyTypographyTypography
Components
Visual Design
Onboarding
One of the main tasks was to enable users across the globe to track and manage their subscriptions. 

Furthermore, privacy is a huge concern when it comes to money. Hence, users prefer to have the option to choose between connecting their payment source(s) to automatically gather subscription information and skipping the connection process to manually feed subscription information. 
Splash Screen
Final Visual: Standby
Log In / Sign Up
Final Visual: Homescreen
Sign Up
Final Visual: Instant
Country & Currency
Final Visual: Timer
Phone Number
Final Visual: Timer
Critical Screens
Focused, consistent, and sectioned content with minimal critical data to communicate maximum information.  

Vibrant colors to produce the essence of approachability and easy information consumption.
Dashboard
Final Visual: Standby
Calendar
Final Visual: Homescreen
Report
Final Visual: Instant
Account
Final Visual: Timer
Manual Input
Option to opt-out from connecting payment sources, leading the users to input subscription information manually. 

Additionally, the interface facilitates users to feed in any unrecognized subscription manually later on as well.
Landing Screen
Final Visual: Standby
Input List
Final Visual: Homescreen
Input Name
Final Visual: Instant
Input Category
Final Visual: Timer
Input Status
Final Visual: Standby
Input Payment
Final Visual: Homescreen
Input Start Date
Final Visual: Instant
Input Frequency
Final Visual: Timer
Subscription Screens
Brand-based page color for ease of brand recognition and to sprinkle a dash of fun and friendliness.
Splash Screen
Final Visual: Standby
Log In / Sign Up
Final Visual: Homescreen
Sign Up
Final Visual: Instant
Country
Final Visual: Timer
Phone Number
Final Visual: Timer
Subscription Information
Itemized information to furnish the users with all the details required to take any desired action.

Expanding scrollers/options in cards to avoid jumping between screens, assisting the users to remain focused through any desired task completion process.

Brand-colored call-to-action button for cancellation along with potential savings reflect the idea that expiration/cancellation can be a positive feature.

Yearly instead of monthly savings suggests a higher figure, motivating users with the effectiveness of the potential savings.
Landing Information
Final Visual: Standby
Edit Renewal Receipt
Final Visual: Homescreen
Edit Reminder
Final Visual: Instant
Edit Subscription
Final Visual: Timer
Notifications
Clear and concise notifications with dynamic actions to provide users with maximum utilization of the push notifications.
New Charge
Final Visual: Standby
New Charge Action
Final Visual: Homescreen
Trial Expiration
Final Visual: Instant
Expiration Action
Final Visual: Timer
Renewal Action
Final Visual: Timer
Usability Testing & Prototype
Testing & Iteration

At this stage, assessing the interface's usability was crucial to evaluate the interface's design and ensure that it is intuitive and easy to use.

For the usability testing sessions, I decided on conducting two rounds with five users in each round, to validate issues and test solution iterations. All the interviews were conducted in person on my laptop, and each interview lasted about 30 minutes.

The testing shed light on some critical, major, and minor issues, which helped shape the next iteration process.

Users felt safer choosing between connecting payment sources and manually feeding information due to privacy concerns.
Before
Final Visual: Standby
After
Final Visual: Timer
Users didn’t prefer having bank/credit balance information.
Users confused balance utilization with subscription utilization.
Before
Final Visual: Standby
After
Final Visual: Timer
Users preferred categorization-colored dots instead of monotone-colored dots.
Before
Final Visual: Standby
After
Final Visual: Timer
Users didn’t realize the Reminder and Renewal options to be clickable until mentioned.
Before
Final Visual: Standby
After
Final Visual: Timer
Some users confused the tab “Reports” to display complaint reports.
Before
Final Visual: Standby
After
Final Visual: Timer
Users expected to have card sorting options.
Before
Final Visual: Standby
After
Final Visual: Timer
Things users appreciated
Home screen
Display of payment source and total utilization information.
Option between automatic and manual subscription feeding.
Saving name for a new foodSaving name for a new food
Auto Cook/Defrost
Minimal and self-explanatory interface and information flow.
Final Prototype
Click on the interface to start interacting.
Concluding thoughts
Learnings

My last two projects equipped me with a better understanding of time management, which allowed me to plan out this project efficiently.

As mentioned in my design sprint project, Post Up, I wanted to integrate the sprint process in some essence into my future projects. In this project, I incorporated the inspiration and sketching phase from the design sprint process. Thoroughly planning the project allowed me to streamline the process and distribute time judiciously. Furthermore, in this project, I continuously involved the users throughout the research and design process, which equipped me with the necessary ingredients to iterate faster and more effectively.  

Subtrac’s primary vision was to provide users with core functionalities that would enable them to track, manage, and reduce their subscription expenses effortlessly. The need was to link users to their desired goal/intention with minimal interaction and maximum information while focusing on trust, simplicity, and efficiency. The involvement of users throughout the research and design phase resulted in bringing success to the design solution.

What's next?

If I were to continue on this project, I would love to learn variation in data visualization, study further simplification in the task completion process, and enable higher accessibility.

Moving forward, I would love to keep practicing streamlining the research and design process.

Subtrac
Section separator
Context
Section separator
Research & Discovery
Section separator
Information Architecture & Ideation
Section separator
Design System
Section separator
Visual Design
Section separator
Usability Testing & Prototype
Section separator
Concluding Thoughts
Subtrac
Context
Research & Discovery
Information Architecture & Ideation
Design System
Visual Design
Usability Testing
Concluding Thoughts