Subscription hive
A mobile concept that combines budgeting with habit tracking to help users keep their hidden spending in check.
View Prototype
RolE:
UI & UX Designer
Tools:
Figma, Miro
Timeframe:
August - September 2021
Background
.png)
A US-based company has launched a desktop website for users to track their recurring subscription expenses. They wish to develop a mobile app and expand into other markets such as Germany.
Goal: Create a mobile based app that is easy to use, convenient for finding forgotten monthly expenses and habit forming.
How might we help users track their recurring payments in order to develop better budgeting habits?
Problem
In today's autopay society, many people are overpaying or paying for services they rarely use. Several ways to track spending and create a budget exist, but often these methods are strung out across several places. People need ways to not only view their spending, but understand which areas are unnecessary in order to get the most out of their money. How many people have a gym membership they don't use? Steaming services they don't watch?
Solution
I aimed to create a place where budget, calendar, and habit tracking could be found in one app. Underlining ways to reduce spending is quite important when trying to improve a budget. I included easy ways to unsubscribe within each service and a daily tracker for users to understand how they use those services the most and which they use the least.
Designer's Role
I worked end to end on the design of this app from researching industry leaders to designing the look and feel of the final product. I developed personas and user stories based on comparative analysis of other products on the market, developed sketches and a high fidelity prototype while running several phases of usability testing.
Design Tools: Figma, Miro
Design Process
Discover
Secondary Research
I set out to understand what parts of keeping a budget are most challenging and considered what user needs were most impactful.
Which areas of keeping a budget are most/least challenging? source
How many users are paying for subscriptions they do not use? source
How do users keep track of bills that are on autopay? source
In this study, 84% of those surveyed underestimated their subscription service spending.
-
Almost 50% of those who underestimated spending were $100 or more off from their actual spending
-
Expenses of those surveyed were MOST aware of included monthly necessities such as cellular subscriptions, wifi, and streaming services
-
Expenses of those surveyed were LEAST aware of included subscription boxes, wellness, and dating apps
Comparative Analysis
To understand what was already on the market and how my designs could best serve users, I looked at the following budgeting tools:
TRIM
-
Negotiating service to help lower bills
-
Paid service
-
Bill reduction was too minor for the cost for some users
Truebill
-
Free and premium versions
-
Links to your accounts
-
Can add goals to track progress
-
App is not immediately intuitive
TrackMySubs.com
-
Desktop only
-
Easy setup
-
Free and premium versions
-
Budget and reminders in one
“Given that Millennials have the lowest average income of the “working” generations, it is not surprising that they spend less, on average, on most goods and services in terms of absolute dollars. It is also not surprising that they underspend their share for most goods and services when these goods and services are examined in the context of consumer expenditures in the economy as a whole.”
-Bureau of Labor Statistics, March 2018
Define
Affinity Map
Summary of Research Findings:
-
At the most basic level, users wanted to see their finances in one location, calendar features and easy ways to cancel
-
Pain points included features not being worth the premium fee and accounts not linking
-
UI needed to be easy to set up and visual to show progress and goals
User Persona
-
Melanie is a millennial working on building more savings for her future.
-
She has so many monthly subscriptions set on autopay that sometimes they go unnoticed and slip through the cracks of daily life.
-
Last month, she overdrew her main checking account by just $10 before her next payday.
-
Melanie wants to better understand her spending habits and cut lesser used expenses, if she can.
Ideation
Sketches
During the initial sketching process, I decided that this app would need to reserve space for the following:
-
View all subscriptions in one place
-
List view or calendar view
-
A way to add new subscriptions manually or link to existing bank account
-
-
View individual subscription details
-
Change notifications
-
Unsubscribe from service
-
-
A way to make the app “stick” with users
-
Gamify the app to make it fun and habit forming to log in
-
Build in ways to feel rewarded for conscious budgeting
-
User Flow
Tasks included in the user flow shown here:
-
View all subscriptions on dashboard
-
Unsubscribe to a service
-
Edit notifications on a specific subscription
Prototyping
Usability Testing: Low Fidelity
I used the paper prototype of the screens loaded into InVision to test out the design in low fidelity with 5 participants remotely. My goals were to find any critical missing features or problem areas before moving onto creating the design in Figma.
Task 1: As a returning user, view all subscriptions
Task 2: Unsubscribe from a subscription
Task 3: View/edit auto renewals
Feedback on my designs and recommendations:
-
Users are not able to add more subscriptions in the current layout
-
Add button or link accounts button needs added somewhere clearly visible
-
-
There is no current profile page view for users to update their bank information or settings
-
Create profile page showing these options
-
-
Calendar view is too small
-
Add popups to display more info than can fit on calendar screen
-
Create a rotate option to utilize more space on the screen
-
-
Trash can icon is difficult to understand, does it mean to unsubscribe from the service or delete the notification from the app?
-
Move this option below everything else on the individual subscription screen
-
-
App is not sticking or memorable enough
-
Create a “point system” similar to a credit score where users can share updates with their friends
-
Incentivise point system to make the app more gamified or addicting to use
-
High Fidelity Prototype
High fidelity screens
Validate
Usability testing: High Fidelity
Using the high fidelity screens created in Figma, I recruited 5 people to test usability for similar tasks as before on the paper prototype.
Task 1: As a returning user, view all subscriptions
Task 2: Unsubscribe from a subscription
Task 3: Track daily usage
Overall, I found some minor components that needed fixing or were unclear. I went through these issues and reiterate my designs one more time to create the final screens.
-
Past subscriptions need a way to be re-added
-
Create expanded view of past subscriptions page with button to resubscribe
-
-
Monthly usage page is unclear
-
Edit number of days, progress bar, make screen more realistic with update dates
-
-
Category type color is incorrect on dashboard, minor pixel adjustments for alignment
-
Change color to teal to match pie graph, move subscription logos to match other screens
-
-
Broken link on unsubscribe flow
-
Create a link back to home screen
-
Reflection
Final thoughts
What I learned:
As I continue on my journey to learn how to design better UX, I must remind myself of the problem to solution process and not get immediately bogged down in the small details just yet. I can worry less about the small aspects of the design in the early stages and know that I can add them later instead of focusing on aesthetic so heavily in the beginning.
Timeboxing is also something I would like to improve. For this project, I used Figma as my primary tool for the first time. I spent a lot of time learning the ins and outs of how it compares to Sketch, and I will only get better over time. Overall, I have some improvements to make on the final designs in future iterations, but I am happy with my progress thus far.
Future Iterations
Future iteration of the Subscription Hive app may include:
-
More screens - flesh out point-based reward system under “Today” or social components
-
Show settings screen - where to add/edit account information, edit types of notifications (text, push notification, email options)
-
Improved graphics and logo design