Foresight
Track your subscriptions with the click of a button
Role: Product Designer
Timeline: 7 weeks
The Challenge
Foresight is a company that has launched a desktop-only website to help users keep track of their online and digital subscriptions. Currently, the business only gains desktop users, but they realize that expanding their platform to a mobile-friendly version of their product would greatly expand their customer base.
This is where I come in: to design a mobile version that results in an increase of market reach and creates more users and more business, while also staying in line with an already existing company website and their expected functionality.
Defining the Process
Before beginning this project, it was necessary for me to establish a design blueprint to be successful within the given time constraints. This included defining the process phases and deciding on the appropriate methods and deliverables to best execute my solutions.
Designing the solution
User Stories
There were three primary user stories I focused on throughout this process:
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
Research Strategy
In order to get a handle on current solutions and consumer behaviors, I did a competitor analysis of existing finance and subscription management apps as well as gathered some statistical data within the subscription landscape. 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.
The Competition
From my research, there appeared to be a lack of products on the market that simplified the process of tracking and canceling subscriptions. Instead, many of them required a lot of effort on the user’s part.
With the exception of RocketMoney, most apps required the user to manually enter subscription details and offered no auto-sync options. Canceling subscriptions is tedious and most of the competitors require a multi-step process to do so. Notifications are limited and don’t include price changes, payment issues or trial periods ending.
Even though the subscription app market is quite saturated, very few competitors excel at providing the user with a truly end-to-end experience; from the moment they subscribe till the day they cancel.
Secondary Research
In light of time constraints, I felt it was important to channel my efforts toward secondary research. I sifted through articles, blogs and app store reviews to get a better understanding of the problem space and what would drive user adoption. My biggest takeaway I gained from this was that consumers have difficulty managing subscriptions largely due to the sheer increase of subscription products and services available. For many consumers, this has resulted in an overwhelming feeling surrounding subscriptions, with some even experiencing the recently coined term “subscription fatigue.”
Primary Research
Objective: The goal of the primary research was to understand how users manage all their subscription services.
Informal Interview Questions:
How many subscription services/additional monthly bills do you have?
How often do you use the apps that you are subscribed to?
How often do you check your subscription charges?
Have you lost money due to auto renewal?
Tell me about a time you had difficulty canceling a subscription.
What are some features you are looking for in a subscription tracking app?
Observations:
Most people don’t keep track of their subscriptions and just check directly through their bank account
Many people used joint subscription plans and split which ones they manage
Priority is ease of use, security and privacy
Some participants expressed openness to try an app that is easily accessible
Affinity Mapping
Following the user interviews, I synthesized the data into an affinity map. I categorized the findings into three main sections: value, pain points and blockers and perception. These categories helped define what users struggled with, their perceptions and what they valued. Synthesizing this information allowed me to focus on shaping the business goals around user goals.
Establishing the navigational hierarchy
Drafting a user flow that would align with Foresight’s business goals was my first step in transforming these opportunities. My hope was to better visualize how a user might interact with the app and optimize the overall user experience. The user flow highlights how a returning user will be able to monitor and manage their subscriptions and transactions.
Usability testing & design improvements
Following the completion of the wireframes, I conducted the first round of usability testing to validate my design decisions and assess functionality. I also wanted to observe if users understood the basic features of the app; how to navigate through each given task; and to identify any obstacles that limited the user experience.
The primary usability test goals:
Comprehend and view monthly subscription details
Add a new subscription manually
Cancel a current subscription
Locate the yearly total of a subscription
Navigate to the spending report and identify the costliest subscription category
Insights:
Most users don’t regularly manage subscriptions when they have the financial ability to afford it
Users want complete control over notifications to avoid possible late fees or missing upcoming payments
Doesn’t find a need to using a tracking app, managing through bank account is enough
Many respondents have reservations about safely and securely linking their bank accounts to a tracking app
Uncovering Opportunities
After reviewing my research, I could now more clearly empathize with my users and their pain points. The discoveries I made helped round out my outlook of the problem space and opportunities therein.
Early Sketches
Starting on Paper
Once I felt satisfied with the overall flows, I began to sketch out possible screens. My focus for this stage was primarily ideation and mapping out the general foundation of the interface. Because I wasn’t planning on using the sketches for testing purposes, they remained mostly conceptual and antedated the initial prototype.
Early Testing Insights
Wireframing
For this project, I felt it was important to build out the wireframes instead of relying on low-fidelity sketches for usability testing. Doing so would allow me to make quick edits on my prototype and provide a more realistic feel of the product during testing for improved user feedback.
During the tests, I received mostly positive feedback on my design. User feedback primarily had to do with minor usability and UI issues. Without any glaring overhauls needed, I decided it was best to move forward and begin on the high-fidelity mockups.
Round 2…Test!
After improving upon the wireframes and adding a significant splash of visual design it was time to gather more feedback.
Five new participants, all with more than three active subscriptions, were recruited to test the high-fidelity design. My primary goal during this stage was to assess whether the translation to high-fidelity design solved issues previously uncovered from round one testing. For this reason, I asked participants to perform the same five tasks from round one, but added some additional tasks and follow up questioning to verify their improved ability to perform those tasks.
Improvements
During this round of testing, users had a much easier time navigating each page and digesting content. Surprisingly, user feedback was quite scattered with almost no overlap in insights. This made for a difficult job in assessing how to proceed forward with iterations.
Impact Effort Matrix
In order to decide more effectively which of the many suggested solutions to implement, I created an Impact Effort Matrix diagram. This helpful decision making tool allowed me to put my tasks into a visual format to help ease prioritization and compare the impact to create versus the effort to complete.
Because I was nearing the end of my allotted time frame for this project, I focused my efforts on three main improvements:
Clarifying dashboard data:
Based on user feedback, dashboard data was not comprehensive enough.
More specific dashboard labeling and rewording improves user’s understanding of their spending.
“Paid so far” amount is denoted through colored circle
Highlight newly added subscription:
Not clear enough to the user which subscription has just been added
Brightly colored text label better highlights this action
More consistent visual aesthetic:
To achieve a more cohesive and consistent visual look and feel, the action menus were given the same styling as the rest of the screens.
Designing the high-fidelity screens
Onwards & upwards!
Less is more
Project Takeaways
Check out the prototype below!
Discover pain points early
Use your user stories
Through user interviews and research of app reviews, I found many pain points that users faced in different more well known subscription management apps. Those reviews and feedback helped solve many issues early on and design a more seamless experience.
There were many times throughout the design process I found myself straying from the established user stories. My solutions expanded in so many directions that I needed to re-define and focus on the big picture. I made a point to continually refer back to each user story, insight and goal throughout each stage of the process.
Something I continually am reminded of is the great saying “less is more.” Initially, I had more steps and interactions that users would need to reach certain points but each round of testing helped reduce the complexity of the process. Streamlining and minimizing the aesthetic received positive feedback from testers and I knew it would make for a more seamless user experience.