S mart

ubTracker
ubTracker
Makes life easier with subscriptions !

PROJECT OVERVIEW

Scenario
Now a days consumers are subscribed to so many services it becomes very difficult to
keep track of all of them. SmartSubTracker is an app which helps user manage their
subscriptions and keep track of their expenses.

The Problem
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. 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.

The Goal
Design an app so that users can see all their subscriptions in one place to get a
comprehensive view of their spending on subscriptions

To reduce needless spendings the users would be able to unsubscribe from a

subscription very easily

Users want to be notified if any of their subscriptions are about to be auto-renewed

so that they can make a decision about if they want to renew the subscription and
continue spending money.

My Role
As a UI/UX designer I was the one and only person responsible for the whole project. Since time was quite limited and there were no groups involved I chose
the faster methods to reach the goal of project. This project was completed in a months time and Figma was the primary software used to deliver the project.

DESIGN PROCESS

DISCOVER DESIGN VALIDATE

User Flow Usability Testing with

Study Industry Leader Wireframe
Wireframe
Secondary Research Usability testing with High
High Fidelity Mockups fidelity Mockups

DISCOVER
Study Industry Leaders

Likes Dislikes
You can enter the subscription value in any UI is very basic and does not grab
currency and it automatically converts into the users attention
local currency
There are too many action buttons
The subscriptions can be paused also instead inside the edit page, confusing the
Track my Subs of completely deleting them.
user.

The process to add a subscription is While deleting a subscription with a

very simple and easy, can be done swipe it fails to ask a confirmation
by any new user from the user

With the ‘Made Payment’ option one There is no option to set different
can also update their payment time for different subscriptions. One
Subscription Tracker status.
master timer can be set for all alerts
together.

The UI is very clear and neat The subscriptions are not arranged in
demarcation of each section order of payment date
The subscription can also be moved Multiple Selection to delete
to inactive section when the user just subscriptions is not available. It has to
Subly temporarily want to stop the service. be deleted individually.

Secondary Research

In 2020, the Better Business Bureau reported that customers lost an average of $140
and had lodged more than 58,000 complaints about free trials and automatic renewal
subscriptions over the past three years. - source Internet

Today most companies have a subscription model for users to

access their premium features. There are three types of services:
SaaS or software as a service, aaS or content as a service, HaaS or
C

hardware as a service. Every service now comes with a subscription.

It's the idea that software isn't just bought once and installed but it is
subscribed and always updating.

The subscription market has been up every year in every industry be it ecommerce, video
streaming, music etc. As the business era of subscription is slowly emerging, the users
need an efficient and effective medium to manage their subscription.

Keeping track of subscription plans is a challenge, particularly when it comes to knowing how much all
these recurring payments amount to, and knowing the date of renewal of subscription plans (due to the
lack of notifications sent from the products/services). - source Internet

Secondary Research Findings

Most consumers are not aware how much they are

46.7 % consumers vaguely remembers
spending on their subscriptions and the other half only
the amount they are spending

vaguely know their expense, if not, are not aware at all.

A lot of users forget to cancel their subscription that

they don't need anymore. Since there is no notification

from the product near the date of renewal or expiry,

keeping a track becomes difficult.

Users who keep track of their subscription do it

26.7 % keeps a track by memory
manually by maintaining a diary, by memory or by
23.3 % dont keep a track checking emails.

A lot of people try to cancel subscriptions but due to

their long and complicated procedure users just opt out

of the process with frustration.

DESIGN

U ser Flo w

To enhance the customer

experience and keeping in
mind the ultimate goals I
designed the user flows. The
A dding a ne subscri tion
w p

user flows were designed such

the frustrations and pain points
of users can be addressed.

Pause /D elete a subscri tion

p

Add a reminder

W ire ramesf

C reated the wireframes for the above user flows to understand only
the important interactions the users are going to have.

Research findings applied Research findings applied

Total spending can be adjusted day Option to set an alert
wise, month wise, week wise and yearly before renewal of the
‘C ategory’ tab helps to segregate subscription.
subscription category wise
User can also pause a subscription
which they can access from the
Inactive’ tab
‘

C alendar vie w

Research findings applied Research findings applied

All subscriptions displayed Graphs and charts
together at one place with showing comparison
the total expense on top. between different services
and amount spend every
month.

Research findings applied

There is an option to
create custom category
apart from the pre-made
list.

U ser Flo w

VALIDATE
Study Type Participants Duration
U sability Test ith ire ramesw W f

To validate my low fidelity prototypes I conducted my first round of usability

tests with five participants, whom I had recruited from Slack community.
Moderated nline
O
5 20-30 mins
Study

Critical Minor
When asked to set a reminder for subscription renewal, the The icon for profile was not a very common icon hence
user went to the calendar section to complete the task. Major users were not sure what was the purpose of the button.

Users couldn't understand that the price for each

subscription was editable. Normal
Delete’ button to unsubscribe from a service was not
‘

User was searching for the Save’ button at the bottom.

‘

visible to the users.

UI Elements
DESIGN Primary button

Aa
Secondary button
Style Guide
Tertiary button Floating Button

Typography
Alert error Alert confirmation
POPPINS

a b c d e f g h i j k l m n o p q r s t u v w x y z

Icons
AB C DEF G HIJKLMN O P Q R S T U V W X Y Z

1234567890
Subscription Report C alendar
This is header size and weight for handheld. 24px Bold
This is header size and weight for handheld. 18px Bold
This is body size and weight for handheld. 16px Regular Image Style

Color Palette
Risd Blue

Primary Colour- Signifies trust 3751FF

and dependability

Secondary Colour- Colour of Sunglow

friendship and happiness. #FCCA46

Hi g h Fidelity Prototy es p

Home screens
The first screen state is just after users logins and yet to add their
subscriptions. The second screen state is after the user adds their
subscription. Each card shows the due date and the amount they
are paying. n top of the screen the user can see their total
O

expense and adjust the sum as per day, week, month and year.

Add subscri tion and add a

p

category
There is an option to create a
new subscription and a new
category if they are not there in
the premade list.

Subscri tion etails

p D

In the specific subscription details page it will show the billing cyle,
billing date, an option to set a reminder. Also a user can set their
currency and specify a category.

D elete or Pause a subscri tion p

There is an option for users to pause the

subscription instead of deleting it.

Modal indo s or setting reminder

w w f

The user has the control to set a reminder and adjust as per their
wish, also they can set the billing dates and change the cycle of
subscription. There is also a confirmation or permission taken from
the user before changing any settings.

A nalytics and Calendar ie v w

Analytics will help user understand their

usage and expense in a better way. With
the calendar, viewing the subscriptions
becomes very easier with just one click.

VALIDATE

U sability Test ith High Fidelity Prototy es

w p
Study Type Participants Duration

The second round of usability test helped me to refine the design more and
produce a more user friendly app.
Moderated nline
O
5 20-30 mins
Study

Critical
User wants to see the exact due
date on the subscription cards.

Minor
‘C reate custom subscription’ button was overlooked by onfirmation message while pausing or deleting a
Normal
C

the user because visual hierarchy was missing. subscription should have more information.
Homepage is confusing because the heading says

Major subscriptions’.
‘

Calendar view was confusing. The icon to add the subscription was confusing.

Reminder’ modal window is a bit

‘

confusing.

FINAL RESULTS Brought consistency to the design by modifying the logo

shapes and fill color.

C hanged the icon to

add a subscription
Introduced the app logo
on the homepage for
better clarity to the
users
Mentioned the exact
due date for each
subscription on their
respective cards.

Modified the hierarchy of Add’ button and reate custom

‘ ‘C

subscription’ button
C hanged the colors of category icon to match the design
style.

Subscription Detail

Marked the dates having subscription due dates with more clarity
so that at the first glance itself the user understands where to click
Modified the color of bars and charts to make it harmonious with
the design style.

Introduced an option for

the user to keep a control
over the duration of
pausing a subscription
Made the reminder’
‘

modal window free of

confusion
Put some extra
information on the
confirmation windows so
that the users doesn't
forget to update the
same information on the
respective app.

Link to the interactive Prototy e:

https://www.figma.com/proto/ mSWjoXzBJr4XMpU8d2gVm/ apstone-2-Wireframes?type=design&node-

G C

id=28-4684&t=9bJNId72p1Uau oD-0&scaling=min-zoom&page-id=28%3A3528&starting-point-node-id=28%3A4684