SubBuddy 💰
An application designed to help consumers manage subscriptions.
The Problem
The average consumer is finding it increasingly difficult to track the numerous products and services they subscribe to.
The Solution
Design a mobile-friendly version of a desktop-only subscription tracking website to increase users and user satisfaction.
My Role
With the help of my mentor David Gerrells, I designed 3 user stories for a mobile app to support an existing subscription tracking website.
Step 1: Discover
Secondary Research
“In the last nine years, the subscription economy has grown nearly 6 times (more than 435%).”
Key Findings
Subscription Popularity
Deloitte Digital Media Trends survey conducted in 2021 revealed the percentage of respondents who pay for each type of subscription.
Billing Preferences
A study by 2Checkout highlights the variety of payment options offered to users and the need for assistance with subscription management.
Automatic Renewals
A 2021 study by 2Checkout showed that the convenience of automatic renewals continues to gain traction year over year, with an 11% increase from 2020 to 2021
Covid-19 Impact
A recent study by 2Checkout revealed that due to restrictions that caused consumers to stay home, subscriptions became more popular than ever in 2021.
For more information check out the original studies:
Competitor Benchmarking
To further my knowledge of industry standards as well as gain insight into where the gap in the market exists, I took a look at 3 top competitors. I focused on 4 main questions that pertained to the user stories I was working on.
Expert Review
An expert review was performed on industry leader and competing application Bobby. This review was performed on the basis of Nielsen Norman Groups 10 Usability Heuristics.
Visibility of System Status
Match between System and Real World
User Control & Freedom
Consistency & Standard
Error Prevention
Recognition Rather than Recall
Flexibility & Efficiency of Use
Aesthetic & Minimalistic Design
Recognize, Diagnose & Recover from Errors
Help and Documentation
Step 2: Design
User Flows
Click the flows below to explore the 3 user stories in more detail.
Onboarding Flow
Add Subscription Flow
View and Delete Subscription Flow
Step 3: Validate
User Testing - Round 1
Testing consisted of both remote and in-person moderated testing sessions where participants were shown early-stage mockups and asked specific questions regarding functionality.
Top 3 Usability Issues
Navigation
Participants favored bottom bar navigation over a slide-out menu for easy accessibility to the limited screens.
Solution:
Add fixed bottom bar navigation
Change the menu button in the top right to an account/profile button
Add Subscription Button
Participants felt the ‘+’ button should have its own space at the top of the home screen.
Solution:
Remove the ‘+’ button out of ‘Monthly Spending’ and create a separate CTA
Add the ‘+’ button to the fixed bottom bar navigation
Calendar View
Participants were confused by the multi-colored dots on the calendar and wanted more simplicity.
Solution:
Remove different color dots
Choose 3 colors to represent important events
Step 4: Design Again
Upon completing the first round of user testing, many changes were made to the designs based on feedback. These designs had much higher fidelity and allowed me to easily transform them into the first functional prototype for SubBuddy. Below are examples of the first designs.
Step 5: Validate Again
Equipped with the first prototype, I recruited 5 people to test the application and provide their opinions. These tests were all monitored and performed remotely. Participants were asked to complete a number of tasks without assistance while sharing their thoughts aloud.
Top 3 Usability Issues
Report View
Participants did not find the “Report View” screen useful, regardless if it was featured in the desktop version of the application
Solution:
Take away report view screen
Remove the report view button in the bottom bar navigation
Remove the report view button from the home page
Delete Subscription Pop-Up
Participants did not bother to read the pop-up message.
Solution:
Revise wording
Move the reminder to the top of the pop-up screen
Make reminders larger
Add Alert Via Calendar View
Participants navigated to the “Calendar View” screen to add an alert however, there was no option to do so.
Solution:
Add a bell icon that allows users to add an alert from the calendar view page
Make subscriptions listed under the calendar clickable so users can edit and create alert easier
Step 6: Final Design
After completing the second round of user testing I made all the necessary changes to the designs and prototype in order to ensure maximum usability. Below are a few of the updated screens.
Prototype
Conclusion
After completing the discover, design, and validate stages of the design process to create SubBuddy I can say that the end result is one that I can be proud of.
Some key takeaways from this project include:
Be ready to scrap it 🗑
Be prepared to leave your biases at the door and come in with your eyes and ears open.
Focus on what is important 🎯
Try not to lose sight of why you are designing the application and keep that reason front and center when making design decisions.
Just test it ✏️
When in doubt ask someone, anyone, to test it.