Subspot
Helping people manage their subscription fees
Overview
Role
Sole product designer that led the design process
Timeline
Aug - Sep 2022 (2 months)
PROBLEM STATEMENT
Subspot is a company that has developed a product to help people keep track of their subscription fees on websites, apps, services, etc. However, Subspot has only developed a desktop website and needs to create a mobile version of its product, as they believe a mobile product will significantly increase their market reach.
In this mobile version, Subspot requested that the product address the following user stories:
As a current user, I want to see all of my subscriptions in one place so that I can get a comprehensive view of my spending on subscriptions
As a returning user, I want to unsubscribe from a subscription so that I can reduce needless spending
As a consumer, I want to be notified if any of my subscriptions are about to be auto-renewed so that I can make a decision about if I want to renew the subscription and continue spending money
DESIGN PROCESS
In this project, I was facing a condensed timeline to develop the solution and needed to think through the best plan for completing the project. Ultimately, the process I followed for this project included the following:
SOLUTION
A mobile version of Subspot’s product that addresses the user stories above. Specifically, the solution allows the user to automatically or manually add subscriptions and track key attributes about each subscription (ex. amount, due date, etc.). The solution gives multiple visuals for the user to easily track and manage their subscriptions along with notifications to remind the user. Lastly, the solution offers multiple paths for a user to cancel a subscription, an automatic option and manual option.
Research
SUMMARY
Because I already had a set of user stories and a desktop version to work off of, I decided to conduct research by doing a heuristic analysis of competitors who also help people manage their subscriptions. Doing this allowed me to understand the usability of other solutions, evaluate what type of features are useful and not useful in the experience, and give me a better direction of how to design the mobile version. Afterwards, I created a summary of my findings and then formed takeaways and insights to help influence my design thinking.
COMPETITIVE RESEARCH
When conducting the heuristic analysis, I analyzed the top 3 competitors in the space to evaluate the quality of designs and define ideas for Subspot’s mobile application.
SYNTHESIS
After analyzing the competitors, I put together a summary of my findings:
The usability heuristics I chose to analyze were:
Aesthetic and minimalist design: Does the interface contain information that is irrelevant or rarely needed?
Recognition and recall: Does the interface minimize the user's memory load by making elements, actions, and options visible?
Flexibility and efficiency of use: Does the interface speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users?
Competitors ResearchedHeuristic Analysis SummaryBased on the analysis above, I came up with some takeaways and principles to bring into the design phase:
Include simple and concise roll up of subscriptions
Only include important fields when editing/adding a subscription
Ensure calendar is not overcrowded
Use collapsible/expandable filters if needed
Add shortcuts to quickly take action on subscription and navigate different sections
Add ability to categorize subscriptions and view on main interface
Add ability for user to automatically add subscriptions by linking acct
Add ability to easily set and customize reminders
Keep number of pages to a minimum
Add ability to sort and filter subscriptions
Ensure there is consistent way to cancel a given subscription
Design and Validation I
SUMMARY
After conducting competitive research, I developed user flows to accommodate the user stories to really understand what the process would look like for a user to complete certain actions. From there, I was able to map out content in the potential solution by developing low-fidelity wireframes. Once I had wireframes I felt comfortable with, I developed a quick low-fidelity prototype and conducted usability testing to gather feedback and inform development of the high-fidelity prototype.
USER FLOWS
After finishing my research, I started developing user flows to accommodate the user stories that were provided. Doing so allowed me to critically think about the experience for a user when completing the most important actions in the solution. In this stage, I focused on developing 2 critical flows for this solution: 1) Adding a subscription and 2) Unsubscribing from Subscription
User Flow 1: Add a SubscriptionUser Flow 2: Unsubscribe from SubscriptionWIREFRAMING
Once I had my research takeaways, user stories, and user flows, I began to develop wireframes for each user flow. Normally, I would ideate potential designs through sketching, but because of the time constraint of this project, I played around with different ideas as I was developing the wireframes. Ultimately, I was able to come up with a set of wireframes that addressed the user stories and flows and incorporated the research takeaways.
Calendar PageHome PageReports PageSub PageAdd a Sub PageUSABILITY TESTING
To validate if my wireframes were easy to navigate and providing an adequate experience, I created a quick prototype and conducted 5 usability tests with potential users. Subspot had already provided their target users for the mobile solution, so I made sure that the participants for the usability testing fit the attributes of Subspot’s target user:
Over 30 years of age
Middle class
Uses phone and desktop equally
Trying to be more budget-conscious
The tests went well, as the participants were able to identify major (and minor) issues with the prototype, which allowed me to form concrete recommendations to take into the next round of design.
Cannot navigate to previous screen when going through cancellation flow
“Save” is confusing on Manually Adding Subscription
“Edit” button is not prominent when you click on a subscription
Unclear on how Subspot cancels a subscription for the user
Was confused on what the screen was showing when canceling subscription on their own
Was confused about how the app automatically finds subscriptions
Wants to see what subscriptions are found when app automatically finds subscriptions
Design and Validation II
SUMMARY
Taking the insights from usability testing, I developed high fidelity screens, which also incorporated Subspot’s style guide. I then used the high fidelity screens to create a prototype, which I used to conduct another round of usability testing. From there, I used the feedback from the usability testing to iterate on the prototype to finalize the mobile solution for Subspot.
HIGH FIDELITY PROTOTYPE
Using the usability testing results, I developed a set of high fidelity screens. When doing this, I made sure to address all relevant issues identified from the first round of testing and also incorporated the typography and color palette designated in Subspot’s style guide. I also reviewed the screens myself again and identified some opportunities to enhance the experience.
USABILTY TESTING
After developing the high fidelity screens, I used the screens to create another working prototype. With this prototype, I set out to conduct another round of usability testing with Subspot’s target users. Similar to the last round, I conducted 5 remote tests via Zoom and had the participants see if they could successfully complete the 2 user flows and also had them provide feedback on key critical screens. From these tests, participants were able to identify key issues that would greatly improve the design, if addressed.
Major Issues:
Add success/confirmation screen after subscriptions are added or canceled
Doesn’t know which fields are required when adding a subscription
Wasn’t able to see that subscription was monthly on subscription page
Was confused about Yearly Total (is it YTD or 12mo. value)
Unclear on what “Automatically Find Subscriptions” means
Minor Issues:
Change “Edit Subscription” to “Cancel/Edit Subscription”
Would prefer to see logos instead of company names on calendar page
ITERATIONS
In the last phase of design and validation, I spent time iterating on the prototype by addressing the issues identified from the second round of usability testing. The biggest issues to address were around modifying the verbiage in key screens, so that the user was clear on what was happening in each flow. Apart from that, I also spent time making minor tweaks and improvements to the design to get it to a more finalized state.
Home PageCalendar PageSubscription PageReports PageAdd Sub Pop UpAdd Sub PageCancel Sub PageCancel on My OwnCancel for Me PageConclusion
The biggest challenge in developing the mobile solution was the overall time constraint of the project and coming up with the best plan to design the solution. In a more ideal state, I would have liked to spend more time in the research and ideation phases. However, given the condensed timeline, I believe I found the right balance of discovery vs design vs validation.
If given more time, I would like to continue conducting usability testing to continue to refine and improve the designs even further. There were also some interesting features to explore that came from usability testing, which I would like to discuss with the company further. For example, one test participant had wanted the solution to be able to store username and password information for each subscription, as he frequently forgets this. While features like this do not directly address the user stories, they could be incredibly useful to include and create more product differentiation between Subspot and its competitors.