Subscriptly
A UX case study
Background
In 2023, the average American spent $237 per month on subscriptions (Lindner, 2024). With rising inflation, consumers are looking for more ways to cut costs. Subscriptly is a web-based platform designed to help people keep track of their subscriptions to solve this problem. ​​
THE PROBLEM
One of Subscriptly’s main goals is to broaden its user base by creating a mobile version of its platform. Additionally, the company has plans to expand into the German market and needs a product that works for that demographic. I used the wireframes of the desktop site and information provided about the company to research and design Subscriptly’s mobile app.
THE SOLUTION
Through research, user testing, and iteration I designed a user-friendly and inviting mobile iOS app that helps people track their subscriptions. This app aims to help users with this problem through several of its features
Key Features
01.
Giving a comprehensive view of subscription spending
02.
Help unsubscribing
03.
Notifications of subscription renewals
TEAM & ROLES
Emily King - UX/UI design and research
Laura Trouiller - Mentor
I. Discovery
COMPETITOR RESEARCH
Key findings of successes and shortcomings
I began this project by doing competitor research to quickly get an idea of what current solutions are on the market to solve this problem. The main platforms I looked at were RocketMoney, BillTrim, and TrackMySubs. I chose to compare them because each one has a large user base. I felt that I could learn from their successes and shortcomings. I looked through each app as if I were a first-time user, while taking screenshots and notes.
To implement
-
Use company logos for easy scanning
-
Make it easy for users to set alert preferences
-
Use visuals to help users quickly see their spending
-
Help users see when they will be charged in advance
To avoid
-
Avoid manual entry of subscriptions as much as possible for engagement and accuracy. Still allow manual entry as a secondary option, if needed.
-
Avoid opportunities for users to leave the platform to find information
-
Avoid unnecessary features that detract from the needs of users
USER INTERVIEWS
Learning about users' pain points & needs
After seeing the current solutions for this problem, I wanted to get a better understanding of what users need. I hoped to confirm that the learnings from competitor research would be true for Subscriptly’s target users. Each of the platforms I researched was missing elements that would improve its usability. I also noticed some of them were facing issues with scope creep. I wanted to speak to potential users to identify what features would help them the most. That way, I could focus my design on further developing those features. This would help me avoid anything extra that could cause information-overload for users.
Screener survey
I created a screener survey to find potential users that struggled managing subscriptions. I asked users questions relating to how they currently track subscriptions, their reported experience with it, how many subscriptions they think they have, and then asked them to check off subscriptions from a list that they currently have. I noted any discrepancies between their self-reported experience and evidence of their real experience. I used this information to select five participants. I chose users that reported difficulty. Some self-reported having a lot of subscriptions, while others showed a discrepancy between how many they thought they had versus how many they remembered by the end of the survey. I felt that these types of participants would have the most insights about this problem.
Interview script
While looking for participants, I made a script with questions to ask during user interviews. I planned to use these questions to ensure that I would get multiple perspectives on an issue. That way, I could accurately determine what the most common needs are. I created a research plan that identified the main research goals and questions.
“The primary goal is to understand the intricacies of how users manage subscriptions and their relationship to managing finances. This research aims to Inform a human-centered design approach of a mobile app that allows users to manage subscriptions conveniently while aligning with the business goals of expanding the user base.”
Main challenges
What are the main challenges users face in managing their subscriptions?
Problems unsubscribing
What problems do users face cancelling subscriptions?
Cost awareness
How aware are users of the subscriptions they have?
Current solutions
How do users currently track and manage their subscriptions?
Emotional impact
How do users' emotions impact the way they manage subscriptions?
User's needs
​What features and functionalities are most important to helping users manage subscriptions?
I used this to brainstorm a larger list of questions that would be better suited in an interview setting. I chose questions that met multiple goals. I ordered questions based on subject matter, timing, importance, and question difficulty to create an interview script.
Interviews
I met with participants on Zoom in 30 minute sessions to discuss their experiences. I opened the interview with more surface level questions and dove deeper as I built more rapport. The middle focused on specific issues users faced with subscription tracking. Towards the end, I prompted users to relate their experience managing subscriptions with their general attitude toward finances.
Most common ways users track subscriptions
Calendar & reminders
Bank statements
Common issues among people with subscriptions
Forgetting about it
-
Subscriptions with irregular payment periods were most forgotten about. These often caused the most problems because a larger sum of money was taken out of their account.
-
Signing up for similar subscriptions that serve the same purpose
-
Forgetting to unsubscribe to free trials they were planning to cancel
Dark patterns
-
Overcomplicated cancellation processes
-
Subscriptions that required them to remember to “skip” if they didn’t want to pay that month
-
Difficulty finding where to cancel subscriptions
-
Surprise up-charges
Other problems
-
Lack of communication about subscriptions when finances were combined with a partner
-
Sense of shame around money mismanagement
PERSONA BUILDING
Finding similarities in users' behaviors
Using information provided by the business and my findings, I created a persona to define the user and guide my design decisions. I included demographics that reflected the people I interviewed and the demographics provided in the company. The biography, goals, and frustrations were a based on common issues discovered during interviews. I determined desired features based on the issues identified.
Although participants had unique personalities, I found similarities that would relate to how they might use the app. It was clear that users were impatient and disorganized about managing subscriptions. Many had a desire to save money, but there was a mismatch between this desire and their behaviors. This was due to either a lack of free time or unwillingness to spend time on the issue.
HOW MIGHT WE QUESTIONS
Using common themes among users to form questions
I utilized the persona I created and previous research to generate a list of how might we’s. I planned to use these throughout my ideation phase to help me generate solutions to common problems. Some of the general themes in my research that helped shape these questions were: lack of awareness around charges, shame around poor management of subscriptions, forgetfulness, and avoidance.
How might we . . .
Help consumers be more aware of their subscription charges so that they can make informed choices about their spending?
Motivate consumers to take a proactive role in their subscription spending so that they can take control of their finances?
Help consumers remember to unsubscribe when they no longer want/need a subscription so that they can avoid unwanted charges?
II. Ideation & solution
HOW MIGHT WE SOLUTIONS
Generating answers to key concerns
Moving into the ideation stage, I decided to use my how might we’s to generate solutions to the problems I had identified. Below are the results of my work.
How might we's
Solutions
How might we help consumers be more aware of their subscription charges so that they can make informed choices about their spending?
-
Notifications to remind them WHEN they get a charge
-
Graphs of spending for a general overview
-
List of subscriptions for a detailed view
-
Calendar to quickly see billing dates
How might we motivate consumers to take a proactive role in their subscription spending so that they can take control of their finances?
-
Friendly and positive UI
-
Simplifying tedious processes
-
Use bank account to identify current subscriptions
-
Connecting users to unsubscription page using an internal browser in-app
-
Data visuals to see consequences of their subscription spending
How might we help consumers remember to unsubscribe when they no longer want/need a subscription so that they can avoid unwanted charges?
-
Reminders that users can set if they don’t plan to keep a subscription long-term
-
Calendar shows billing dates
-
Notifications can remind users BEFORE they are charged
USER STORIES
Updating user stories to account for needs uncovered during research
In addition to "how might we’s", I also utilized the user stories from the business document provided. In this document, there were three user stories to help guide my design decisions.
Business document 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
Based on my findings, there were other user stories that I needed to add. I felt these would give me a fuller picture of user's needs. I made a long list covering all the issues I found and categorized them by importance. While this is generally the job of a product manager, as a small team I had to sometimes fill in the gaps of other roles. Below are the most important user stories I came up with.
As a
I want to
So that I can
returning user
unsubscribe from subscriptions within the mobile app
reduce needless spending quickly without much effort
consumer
be notified if a subscription’s cost increases
make a decision about if I want to renew the subscription and continue spending money
consumer
be notified if a free trial is about to end
Decide if I want to cancel or keep the subscription without the fear of forgetting
current user
see when upcoming charges will take place
know when money is being taken out of my account
current user
see my spending through visuals
quickly see where my money is going
current user
be able to categorize subscriptions
view them in an organized manner
These user stories were high priority items because they could be accomplished within the scope of the project and met the most important needs of my persona. I planned to implement user stories that were lower priority if time and resources allowed. These were less easily solvable or not within the scope of the project.
SITEMAPS
Prioritizing high-value features
Once I had an understanding of what the user’s needs were and how they fit into the needs of the business, I decided to create a sitemap. This would help me get an idea of how the mobile version would be organized. I had wireframes from the desktop platform to refer to, but made some changes based on my findings.
Changes from the desktop version
Prioritized the dashboard
I prioritized the dashboard as the first page users would see. I planned to combine it with the main desktop page, the subscription list.
Notifications
I added notifications since this is more beneficial in a mobile app. It will also help remind users about their charges.
Search feature
I prioritized the dashboard as the first page users would see. I planned to combine it with the main desktop page, the subscription list.
Settings
A settings page so that users can adjust preferences to notifications, add more bank accounts, and update personal information.
Subscription profiles
A subscription profile for each subscription users have. In a mobile app, it wouldn’t be feasible to keep all this information in the subscription list.
New sitemap
I shared this sitemap with my mentor and we discussed changes that could be made to improve it. Laura pointed out that having a list of subscriptions within the dashboard may be too much information all in one place. Once I completed by sketches, I decided to give it it’s own page. She also suggested placing the "add a reminder" button in the subscription profiles instead of the calendar. That way, reminders are tied to a subscription, making it easier for users to understand the purpose of them and stay organized. She also suggested breaking the calendar into both a monthly view and a list of events throughout the month. This would help users see when they are being charged in multiple ways, depending on their needs.
​
I decided to remove the search feature from the calendar and dashboard. With the addition of a subscription page, it made more sense to have it there, where users were most likely to use it. I changed the notification page to immediately show users the full notification instead of having to "see details". Notifications are not going to be long, so this feature didn't make sense. Below is a revised version of the sitemap.
Finalized sitemap
USER FLOWS
Designing an efficient onboarding process
After creating a sitemap, I identified the most important user flows I would need to map out. I created one for logging in, creating an account, onboarding, adding subscriptions in the app, and unsubscribing/deleting a subscription. The most challenging user flow was onboarding. I planned to encourage users to connect their bank account to quickly add subscriptions, but I knew I needed an alternative for users that didn’t feel comfortable sharing that information.
​
In the first version of the user flow, I planned to have users go through each subscription category and select or search the subscriptions they needed to add. I was hoping that this would help users jog their memory of subscriptions they had forgotten about.
Onboarding user flow - first draft
As you can see this is a quite long process, and would look even longer if the “subscription entry” section were expanded to show all steps. I met with my mentor Laura and we discussed ways to simplify this process for users. She suggested giving users more freedom to choose which categories they look at. Using her feedback, I created a new user flow where users could view various categories as they please. I also integrated her suggestion for certain form options to be pre-filled to save users time.
Onboarding user flow - finalized version
III. Design & validate
SKETCHES
Sketching main pages to brainstorm ideas
After I determined the general structure of the app, I decided to sketch all the most common screens users would see. This helped me to brainstorm the visual layout. This was a quick process to prepare for wireframing so that I didn’t feel stuck in one design too early on. I spent time revising these and getting feedback from my mentor before moving onto the next step.
Onboarding
During the sitemap stage, I determined that an onboarding process would be necessary. This will help users understand new features and set up their account. One major goal of onboarding is to persuade users to connect their bank account to find their subscriptions. This will save them time and prevent them from leaving the app. In this iteration, I sketched one screen encouraging users to connect their bank account.
Dashboard
While sketching the dashboard, I referred to the wireframes provided to me as a starting point. As stated earlier, I decided at this stage to combine the “Reports” and “Subscriptions” pages into one. I wanted the graph to be the first thing that users see to give them a quick overview of their spending. Instead of a bar graph, I sketched out a line graph to show their spending over time. I did this so that users could see cost increases as well. I placed the list of subscriptions lower on the page so users wanting a detailed breakdown could still easily find it.
Calendar
While sketching the calendar, I planned to use an icon to indicate days that have events listed on them. In hindsight, I relied too much on the desktop wireframe by not including dates. I also included the “add reminder” button at this stage in the calendar. Many people I interviewed were using their phone calendar to remind themselves about subscription charges. I wanted to make the process in the app similar to how they were doing it.
WIREFRAMES
Solidifying my ideas into wireframes for user testing
After using feedback I revised my sitemap and made the adjustments outline earlier. Then, I decided I was ready to start wireframing. I had created a list of notes and revised sketches that helped me have a clearer idea of how the app should look and feel. During this stage, I also began adding detailed versions of content. This helped me account for correct spacing and assuring it made sense in the context of the design. I knew I was getting closer to having users test the app, so I didn’t want filler text that would confuse them.
Adding context to onboarding
Once I had completed my sketches, I received more feedback from my mentor. She suggested that if I want users to connect their bank account, they made need additional context do make that decision. I created a few more screens to help users understand why connecting their bank account is safe and easy.
I also added a screen at the end of the “connect a bank account” process, so that users could see which subscriptions have been added. This will give users more instant feedback that the process worked. It will also help them decide which step to take next.
Splitting up Dashboard and Subscriptions
From feedback I knew that I needed to split up the subscription list and dashboard. Having it all in one place would be confusing and overwhelming to users. The new design gave me more room to expand on these features throughout the design process.
Now that I had more room, I added multiple data displays to the dashboard. This helps users view data about their subscriptions in multiple different ways, based on their needs. I also added chips so that users could filter by subscription category type. This would help users hoping to save money focus on where they are spending the most.
​
I added a search function to the subscriptions page so users could quickly find what they are looking for. They can also add a missing subscription from this page if needed. (If this continues to happen, they can also add more bank accounts in settings). I broke out subscriptions by category to make it easy for users to find what they are looking for.
New calendar views
In the wireframing process I cleaned up the design of the calendar to include days and indicators of billing dates. My mentor gave me several suggestions to add more value for users to the calendar page. Adding search functionality was one that we had toyed around with at this stage. I decided to add a list view, that shows subscription charges day by day. I added this so that users could search by date or scan the charge dates more easily if they wanted a more detailed view. This still allows the less engaged user to still have a less detailed view.
Adding reminders from the subscription profile
I also designed a more detailed version of a subscription profile. Now users can navigate from other pages for detailed information on a subscription. This profile can be accessed from anywhere with a subscription listed. ​​​
From the subscription profile users can:
-
Get help unsubscribing
-
Edit details about the subscription
-
View a graph of cost changes over time
-
Add a reminder linked to that subscription
In my sketches, adding reminders was done from the calendar. This change more clearly connects the reminder feature with subscriptions. This will help users understand the purpose of this feature.
USER TESTING
Finding usability issues and tracking them with data
I decided to conduct moderated usability tests on my prototyped wireframes to get user feedback. I wanted to see if this met the user needs I found in my earlier research, while also uncovering usability issues. I created a script that gave users different scenarios they would likely encounter using the app in real life. I picked scenarios that tested all the most important areas of the app. I also included questions about what they would expect to find or how they would use certain features. In hindsight, I should have shortened this script with less tasks and questions. In an effort to get the most out of user testing, I tried to pack too much into one session. This is something I kept in mind for the next round of testing.
Testing sessions
I selected 5 participants that reported difficulty managing subscriptions and met with them via Zoom. After the introduction, I asked users about their own experience with managing subscriptions. This helped me get a sense of their baseline understanding of the topic. I then shared the prototype and used prompts throughout the session. At the end, I opened it up for questions and additional feedback in case there was anything my script didn’t cover. Testing sessions took about 30 minutes.
Findings
Since this was the first round of user testing, there was a larger focus on usability issues. Most users were able to complete tasks without difficulty. On tasks where there was a trend of difficulty I looked at my notes of why those issues occurred to guide future design decisions. I created a report to outline my findings.
Task completion rate
One area that had the most usability issues was the calendar under the “day” view. I also noticed that many users tended to go to the subscriptions or dashboard page if they were unsure where to look. I discussed this issue with my mentor and she suggested doing away with the “day” view on the calendar. Instead, I could add filters to the subscriptions page. This would increase the value of the subscription page for users and reduce the number of pages on the app. This also made a lot of sense considering no one struggled to find the subscription page.
​
Another task users struggled with was finding their notification settings. Since this app notifies users quite often for subscription-related charges, it is important that users know how to customize this. I noticed that many users clicked on the notification bell instead of going to settings. I decided I would include a link to notification settings in the notifications page to fix this.
People also struggled find where to set reminders and add subscriptions in-app. One commonality between these screens was that the buttons were either hidden or not very noticeable. I kept this in mind when designing my hi-fi screens.
Reminder use cases
I also asked users what reasons they might use the reminders feature. I wanted to see why people might use it, outside of the intended purposes. I also wanted to make sure it solved the issue of people forgetting to cancel subscriptions. Most people suggested using it for that purpose and some offered additional reasons. This confirmed to me that leaving the form more open-ended for people to add custom reminders was the right decision. I also learned that people saw value in this feature.
​
One common pattern that wasn’t represented in these graphs is how often people looked to the dashboard when they didn’t know where something was. They expected this page to have the majority of the content they needed and it wasn’t delivering on that. As I developed this section more, I thought about ways to make this area more useful. While it shouldn’t be the answer to every problem, the purpose is to serve as a general overview. In future iterations I build out its features to function as a better jumping-off point for exploring the rest of the app.
BRANDING
Defining a trustworthy & friendly brand that excites users
While branding isn’t generally a UX problem, I was only given very basic information about this hypothetical company. I wanted to develop a brand before building my Hi-Fi screens. That way, they would feel cohesive and fit the guidelines.
Brand personality
A trusted friend who is helping you save money​​
Brand attributes
-
​Trustworthy
-
Caring
-
Friendly
-
Casual
I used this to come up with the name, logo, color palette, find illustration inspiration, and get an idea of how the app should look and feel. I brainstormed many names, but chose Subscriptly because it is memorable, descriptive, and rolls of the tongue easily. I decided on a dark green primary color to reflect that it is a finance app and is trustworthy. I chose a more fun and bright green secondary color to make it feel more laid back and friendly. I also found a hand-drawn illustration that inspired later image and icon selections. The hand-drawn quality with a splash of color made the brand feel more inviting and easygoing, while still looking clean.
Craftwork Designs, Oslo. [Illustration]
STYLE GUIDE
Colors for categorization
After I had an idea of the brand, I decided to create a style guide for the app and components and based it around the brand. I decided to use a light UI that would compliment lighter and more vibrant touches of color in the dashboard. The light UI would also help company logos stand out. Based on my research, most people felt finances were draining to look at, so I wanted the app to feel upbeat and draw people in.
Since the dashboard is the first page people see, I wanted it to be bright and colorful to draw users in. I created a color coordinated system for each subscription category to help people quickly differentiate between them. I also included a transparent version for instances where only one category is selected.
Selecting Iconography for scannability
I selected an icon library from Nevuqe SymbolKit to use for each category and for other icons in the app. That way, those with color blindness could still have a quick way to identify categories. I chose an icon library that felt more casual with thin outlines that matched the illustration style I felt inspired by. I felt this would stay in line with the friendly, clean, and casual UI I was going for.
Nevuqe. (2023). Nevuqe. [Figma]
Choosing inviting Illustrations to motivate users
I decided to use “Mobile Banking Illustration” by Limple. This fit the subject matter of the app and had the fun style I was looking for. I chose to use a darkened shade of the secondary color in my palette that had better contrast with a light UI, while still feeling consistent with the brand. I felt that choosing a “safe” color for a finance app would balance out the more casual aspects of the UI, still evoking a sense of trustworthiness. I hoped that the combination of the color with these illustrations would feel motivating to users starting on their journey to cut down on subscription costs.
Limple. Mobile Banking Illustrations. [Illustrations]
Familiar typography to establish trust
I decided to use SF Pro as the font for the whole app. This font is both highly legible and recognizable. I wanted the familiarity to encourage users to trust the app. I chose to use a semibold weight for titles and to indicate clickability with smaller text sizes.
COMPONENT LIBRARY
Building the foundation of a clean & consistent design
Once I had a foundation of the design to build my components off of, I decided to start putting the pieces together. I primarily used Pegasus Design System Lite as a starting point, but stylized and customized variants to fit the app’s needs. I also used the Paper Wireframes Kit and Material Design Time & Date Pickers as a starting point to build my calendar and bar graph components. This helped me save a lot of time while creating a clean and consistent design.
I used a lot of rounded edges to make the CTA’s feel less harsh. I also used gray squares to indicate areas that could later be swapped out for icons or photos of company logos. This made changing icons and logos much easier once I got further in the design process. I opted to used drawer components for several instances where it would be easier for users to click closer to the bottom of the screen. This also worked well for times when the options didn't need to be highly emphasized. I used modals when users needed to make an important decision, where everything else on the screen should blurred.
​
I decided to create a calendar similar to the iPhone calendar, so that it would feel familiar to users. One major difference with my calendar is that the month cannot be changed from scrolling up and down. This would interfere with the bottom menu that shows more information about the day selected.
HI-FI SCREENS
Improving on my wireframe design creating hi-fi screens
I decided to create hi-fi screens to iterate on my design utilizing information from user testing. I also planned to do another round of user testing and wanted to see how adding more detail to my UI could solve some of the usability issues. I had initially began designing on iPhone 13 mini screens, but my mentor suggested using a more standard size. This is shown in some photos of early designs.
Adding more clarity to onboarding
In this iteration, I made changes to the hierarchy of text to make it easier for users to read. I also changed the button on the first screen to say “let’s get started”, since many users seemed confused by the original wording.
The evolution of the dashboard
The dashboard was the most challenging set of screens for me to design at this stage. User feedback and additional research about designing data displays helped a lot. It lead me down a different route than I had originally had in mind, but ultimately created a better end result
​
Watching people use the app and hearing them talk about it showed me what people want to know. The most important thing for users was to see their current spending. In the wireframes, this section would have been the third view option. Instead, I made it the first thing people see in the dashboard.
​
After designing the first iteration of this, I felt like I was headed in the right direction, but that it was still missing something. I read several articles about data displays and learned more about utilizing insights to make data valuable to the user. With that knowledge, I decided to create an insights section that would help give people more specific feedback about their spending. At this stage, i was still experimenting with what that would look like.
While the line graph is great for long-term representations of spending, it is not as helpful for the present. I lowered the priority of this feature and made it accessible from “graph view”. I think it will be more beneficial to new users that opted to connect their bank account, so having it at the forefront would deter people who chose to add subscriptions manually. This feature will be useful to those looking to see how costs have increased for them over time. This can help new users identify subscriptions that are consistently increasing pricing. For returning users, they can see how using the app helped them save money.
​
One challenge I had while designing this graph was how to make it customizable for users, while cleanly displaying the right amount of information. Initially, I wanted to display one line of data at a time for a clean layout, but this wouldn’t be as helpful to users trying to compare categories. In the end, I still didn’t quite feel happy with the solution since icons were overlapping. However, I had spent a lot of time on this section and was starting to feel stuck. I decided to move forward and user test to see if I was going in the right direction before wasting too much time.
New calendar views
As discussed earlier, I chose to use a calendar UI similar to the iPhone one for familiarity. However, I wanted users to be able to see the selected day at the same time, especially since I did away with the “day” view. I decided to use a drawer component so that users could quickly see a preview and slide up if they wanted more details.
Combining day view with the subscriptions page
From my last round of user testing, I had determined that the “day” view on the calendar was confusing for users and could be combined with the subscriptions page to simplify the process of finding this type of information. Most of them were looking in that area to begin with, so this would be more intuitive. While the default view is for users to see apps by alphabetized category, they can also view by billing date. This combination of pages gives user more information in one place and allows for more custom results.
In user testing, many people had some difficulty finding the “add a subscription button”. It also took up screen real estate at the top of the page that was needed for filtering in this new design. I decided to make it a floating CTA for people who are looking through the list and noticing that they are missing a subscription.
Subscription profile
In the wireframes, users had a hard time finding the reminder button since it required them to scroll down. The subscription profile UI was redesigned to prioritize the visibility of the reminder button. I included a dropdown to hide some of the less important information at the top of the screen and planned to see how users would react to this during testing.
USER TESTING HI-FI SCREENS
Focusing on user's feelings & actions
Once my hi-fi screens were looking polished, I decided to begin prototyping. During this time, I recruited another five test participants. I used the same criteria, time slots, and platform as before. I made a new script that would focus more on user’s feelings and how they use the hi-fi version of the app. I had overcompensated in focusing heavily on usability issues early on. In this round I planned to include some tasks related to usability in important areas only.
User testing findings
I wrote a report analyzing the findings of this round of testing and prioritizing changes to be made.
​
Users felt very positively about the UI of the app. Many described it as “clean”, while some others said it was “positive” or “motivating”. Their favorite features were the dashboard and the ability to add reminders. People liked the way that they could get a quick overview of something, but still find more information in most cases if they wanted to.
​
One place where this fell short was on the bar chart. Each participant tried to click on the bar chart to get more information about that category. This was not a current feature, but would add more value to the bar chart for users.
​
I heard many users say some version of “I wish I could unsubscribe from inside the app”, not realizing this is currently a feature. It is intentionally somewhat hidden so people don’t unsubscribe on accident, but people should still be able to find it. I also did not prompt people to look for this feature and some still noticed it, but there is room for improvement.
​
Some users participating in testing mentioned previous experiences using similar apps. They described a pattern where they would download the app for a few days, delete it once they saw all their subscriptions, and never used it again. Many even mentioned that they were still aware their subscriptions were out of control. In the next version, I planned to make small tweaks to my app to encourage long-term engagement.
​
When looking at the subscription profile, users were able to find the hidden information, but many mentioned that they would like this information to always be visible to them. However, no one had an issue finding the reminder button now that it was more visible. This confirmed that I was headed in the right direction, but that this page still needed some adjustments.
THE CURRENT VERSION
Additional context during onboarding
Based on user testing, people were not fully understanding the app's offerings. Some people were unaware of the ability to unsubscribe from an internal browser in the app. On the last onboarding screen, some users thought that the “add manually” option meant they would need to type in their bank information manually. This made sense, considering that users just read several screens about connecting their account. I decided to give users more context during onboarding to increase their awareness of these features. I made the “welcome” page less focused on adding a bank account and more about giving people a general introduction. I also took this space to let them know the app could help them unsubscribe once they have entered the app.
​
On the last page, I added another blurb of text explaining the two buttons. I had tried playing with different wording than “add manually” but most of the other phrases were too long or more unclear that the current one. I swapped the order of the buttons to place the CTA in the place that all other buttons were on previous screens so that clicking it would feel like the most natural option.
A more interactive dashboard
One goal throughout this project has been to develop a dashboard that helps people effectively manage their subscriptions. In each iteration, I have made improvements to make the dashboard more useful. During the last round of user testing, participants tried to click the bars in the bar chart to see more information. This gave me the idea to make this a feature. Now, users can see their monthly spending in more detail from the dashboard. They can also click on the subscriptions to see their corresponding subscription profile to make changes if needed.
Another problem during user testing was that people couldn't see the names of categories on the graph. They had to open filters to change them and could see the names from there. They didn’t get the real-time visual feedback that it had changed until they closed filters. In this iteration, I decided to include chips that users can click to show different categories on the graph to reduce recall required by users in the previous version. Since this takes up more screen real estate, users now must scroll down to view insights.
Creating long-term consumer value through insights
Many users expressed that when using app like Subscriptly, they tend to delete them after a few days. I want my app to have long-term value for users, so in this iteration I worked on refining the insights feature. While creating this draft of the screens, I decided to further develop the insight section to solve this problem. It will give users specific feedback on how they can save money and encourage them by letting them know how much they have improved. This goes back to the idea that the app is meant to feel like a trustworthy friend. If someone needed a friend to help them with this problem, they would likely cheer them on and give advice.
​
I think this update to insights, in combination with the graph that shows long-term spending will help engage users for a longer period of time. This an area I would like to continue exploring, as I don’t think these solutions are the only way to increase engagement.
Subscription profile changes
During user testing, a few users mentioned that they would like the information contained in the dropdown to always be visible. While screen real estate is limited on this page, I wanted to find a solution that would make this information more accessible. I decided to add the notes and reminder to the bottom, so that users could scroll down and see it. ​
I would like to see if this is a better solution in the next round of testing. I also think this would be better tested in a more natural scenario where users had already added a reminder or notes on their own and weren’t seeing it for the first time in the subscription profile. That way, I could get a better sense for how much users value being able to see this information easily once they are already aware of it.
HI-FI PROTOYPE
The most current version
I hope to continue working on this project in the future, so I created a hi-fi prototype to reflect all the changes I made.
IV. Reflection
LOOKING BACK
Looking at the problems I solved during this project
In this project, I took existing user stories and other constraints to create a mobile app that would help users track subscriptions. I took basic concepts provided and looked at how I could best solve user's pain points. This required a lot of research and iteration.
​
I accomplished this by expanding on features like the “reports” page. Instead of being a stagnant report, this dashboard gives users different ways to view and filter data. They also get insights to help them see the progress they are making and learn how to lower their subscription costs.​
Through user interviews, I developed a persona to base my design decisions on, which uncovered more details about who I was designing for. It helped me to make decisions around how much information to include in one area and how many steps something could take before a user would leave the app (which is not a lot!) This lead to processes like allowing users to add their bank account, rather than manually adding each subscription.
​
User interviews and testing also uncovered problems users face when managing subscriptions. This lead to features like reminders, which can help users remember to end free trials on time, or unsubscribe to a subscription they only needed short-term. It also helped me fine-tune the dashboard to deliver information in a way that users can understand. Through many iterations, I found a better balance of how to prioritize which information should be most visible to users. In this process, I still included more information for those looking to dig deeper. This helps engage various types of users, broadening Subscriptly’s market.
​
I also included the ability to adjust currency so that users in other countries could benefit from the app. This also allows people with subscriptions in various currencies to compare costs. The flexiblity of this design makes it possible for Subscriptly to continue expanding their platform with more international markets in the future if needed.
LOOKING FORWARD
Next steps for Subscriptly
In the short term, I would like to see how the small adjustments I made to my hi-fi screens help with usability. Specifically, I would like to see if the changes to the dashboard bar chart and graph are easy for users to understand. I would also like to account for more edge cases, as this wasn't something I had a lot of time to explore.
​
In the future, I would like to see how the features I added increase engagement on the app. As stated before, a common issue among subscription apps is that users tend to drop off quickly after they get the information they need. The main solutions I added to combat this are custom insights that help people find ways to save money on their subscriptions and data showing users how their subscription spending is long-term. I would like to test how these features engage users and find new solutions to keep users coming back.
​
Much further down the road it would also be interesting to look at how people who share finances use this app. Many people I interviewed mentioned that sharing finances made tracking subscriptions more difficult. Observing how this group uses the app could help give feedback to fine-tune the way it is built for those cases.
REFLECTIONS AS A UX DESIGNER
What I did well & what I would do differently
One of the most challenging areas of this project was that I didn’t have a lot of background information on the business. I had to do a lot of research in a limited amount of time to fill in my gaps in knowledge about their user base. I wish I would have had a bit more to spend on secondary research of the problem area. I think this would have made it easier crafting user interview questions.
​
Another major challenge for me was that I had never built a dashboard before. In my earlier drafts, it is clear that I felt intimidated by the challenge. Early on, I felt very stuck in this area. Usually when I feel stuck, I can take a break and come back to it. In this case, I soon realized that wasn’t as effective of a strategy. Reading UX articles about dashboards, iterating on my design, getting feedback from users, and my mentor helped me to get “unstuck”. My mentor really helped me recognize when to move on to the next step once my iterations started stagnating. I feel that my “Evolution of the dashboard” section shows where I started to progress and use these strategies to get unstuck. In the future, I will spend more time in earlier design stages on refining designs I feel most intimidated by. That way, I am not having to do so much brainstorming on hi-fi screens.
​
Overall, I am proud of this project and my role in it. I feel that I was able to demonstrate my ability to meet business needs, while developing a user-friendly product. I utilized feedback from both users and my mentor in order to design an app that stands out from similar products by including features that better meet the need of users, while improving upon concepts that already exist. I was able to learn more about my own creative process and how to keep the ball rolling when things get hard. I also got better at working under a tighter deadline. In the future, I hope to continue improving as a designer through iterating more on this project, as well as taking on new ones.
CITATIONS
BillTrim Inc. (2024). BillTrim (Version 3.0.19) [Mobile app]. App Store. https://www.billtrim.com
Chronim Investments Inc. (2024). TrackMySubs. https://trackmysubs.com/
Craftwork (2019). Oslo. [Illustrations]. https://craftwork.design/downloads/oslo-illustrations/
Lindner, Jannick. (2024). Subscription Industry Statistics: Latest Data & Summary.
Limple (unknown). Mobile Banking Illustrations. [Illustrations] https://www.figma.com/design/lYelo3kkvE1pcn8amtIjRq/Mobile-Banking-Illustration-KIT-%F0%9F%A4%91-(Community)?node-id=5%3A0&t=nUEF0jygUisWVpSC-1
Nevuqe (2023). Nevuqe. [Figma]. https://nevuqe.com/
Rocket Money. (2024). Rocket Money (Version 6.24.7) [Mobile app]. App Store. https://www.rocketmoney.com
WANT TO SEE MORE?
Ink Bloom is a website that helps writers grow their network while improving their writing by utilizing feedback from peers and professionals.
