Lucia Gomez logo

Shelf

An easy solution for those who feel overwhelmed by managing and keeping track on their subscription plans.
TYPE
School Project at Emily Carr University
ROLE
Entire product design, from research to conception, visualization, and testing.
DURATION
Jan to Feb 2020 | 4 weeks

― The problem

Too many subscriptions, too many dates, and too many expenses to remember.

In the recent years, with the development of technologies, many modern software services and e-commerce businesses are adopting monthly and yearly subscription fee models. As a consequence, users are finding more difficulties keeping track of all their subscriptions, renewal dates, and expenses. They lose track of what plans they are subscribed to and, as consequence, they tend to end up paying more than they expect.

― The Discovery

Understanding user’s needs, challenges, and pain points

In order to determine whether the need for this app was real, as well as to discover and understand the main challenges, frustrations and needs that people face when managing their paid subscription plans, I conducted an initial research. This research consisted on the evaluation of previous studies, user interviews, and a competitive analysis of other subscription-manager apps.

1. Analyzing quantitative studies

This first research consisted of gathering previous quantitative studies made by other researchers and magazines. These studies collected and analyzed numerical data to find patterns in how people use subscription plans. It allowed me to have an initial overview and understanding of the challenges people face when managing their subscriptions.

FINDINGS

Consumers don’t know how much they spend on paid subscription plans
Moogimare, D. (2019) developed a study that assessed how aware consumers were of their subscription plans expending. A bast majority, specifically the 84% of the participants of this study, underestimated what they spend, in which the majority of those by over $100. Additionally, 10% of people overestimated their expenses. Only 6% of the people who participated in the study estimate exactly what they spend.
The subscription model is growing
A study made by Columbus, L. (2018) suggests that the subscription e-commerce market has grown by more than 100% yearly over the past five years.
People hesitate when committing to a paid subscription plan
Columbus, L. (2018) also suggests that only 55% of online shoppers who consider committing to a service that involves a paid subscription plan end up subscribing.
People forget to cancel their subscriptions
According to a research conducted by moneytipsdaily.com (2019), 4 out of 10 people tend to forget to cancel the subscriptions of services they no longer use.​

2. Getting more insights through interviews

The previous studies provided me with an idea of the main pain points that users have when managing subscription plans. In this new research, I wanted to go deeper and understand how these problems affect users emotionally and gather some qualitative insights on how users manage subscriptions. In order to do so, I conducted a series of interviews with 15 participants, with different age range, backgrounds, and income.

FINDINGS

Emancipated young adults are the ones who need this app the most
Participants who seemed to have the largest need for a solution to facilitate the management of subscription services were those emancipated young adults aged 25-35. The participants under that age range seem not to face a lot of issues when managing subscriptions services, as are their parents who pay and deal with those plans. On the other hand, the participants over that age range seem to have better control over their subscription expenses because they seemed to be subscribed to fewer services.
People don’t remember about their subscription plans
Most interviewees had difficulties remembering the number of services they were subscribed to. Additionally, most of them were not able to tell me how much money they were expending on those, as they could not recall. The ones who were more sure about the expenses were the ones who were subscribed to only 2-4 subscriptions at a time.
Having bad experiences with services under a subscription plan is common
Half of the participants had at least one bad experience with services due to their subscription model. Some of them as a consequence of forgetting about certain subscriptions. Others about being charged automatically without knowing. They all seemed very frustrated when telling me about these past bad experiences.
People prefer one-time purchases to subscription plans
Many participants confirmed that they have previously hesitated on purchasing a service only because it involved a subscription pricing plan, as they didn’t want to commit to having to remember about canceling them in the future. They tend to prefer to pay more one-time, but not having that mental responsibility of remembering about these charges on a periodical basis.

3. Examining other subscription manager apps

The quantitative and qualitative research I conducted previously confirmed that users face challenges when managing their subscription services and they are in a need of a solution. However, there are already several subscription-manager apps in the market, both for Android and iOS that help users manage their subscription plans. I wanted to know whether these apps fully satisfy their users needs or if they still not solve their problems.

Therefore, what I did next was to examine the reviews of the existing subscription-manager apps. I examined five different apps, some for iOs and some for Android. The aim was to identify their strengths and weaknesses. I wanted to find out what features and characteristics users loved as well as those that needed to be improved or developed in order to meet users’ needs.

FINDINGS

What I discovered, is that generally, users of these apps found these very useful, as there was a big need for finding a solution that helped them manage their subscription plans more confidently. However, the user reviews suggested that there was still some room for improvement and that all users’ needs were not fully satisfied. These were some of the most common problems found in the reviews:
  • Users were unable to mark their subscription payment status manually and as a consequence, they couldn’t get notified when not paying on time.
  • Many apps were lacking an option to back up the data or to store it online. Some users were facing some frustrations as they were losing all the data when changing their phones.
  • Subscriptions were unable to be temporarily paused without the need of deleting their information. This was necessary for those users who wanted to pause their subscription for a temporary time but continue with the service in the future.
  • They needed more flexibility for entering cycle time information. Some solutions were only allowing users to set weekly, monthly, or annual subscriptions, but sometimes there was a need to enter every 6 months or 4 months.
  • Users wanted to have the ability to set default notification settings.
  • Users wanted to be able not only to see and evaluate their monthly average expenses but also the total expenses of each month.
  • They were expending too much time on entering the information of their subscriptions.
  • Some solutions did not let users set an end date for subscriptions that didn’t want to get renewed.
  • Users wanted to know both due dates and time left until the next payment.

― The User

Putting all the findings together using different mapping methods

To put all the research together, and to be able to further analyze my findings regarding users’ needs, frustrations, pain points, I developed some mapping methods. I created a user persona, empathy map, and journey map, which I then used as a reference during the rest of the design process.

The User Persona

The persona allowed me to visualize the user that is in need of this solution to use.

user persona

Empathy map

This method helped me picture the emotional experience of the users. I gathered this information from the exact sentences I heard during the interviews, but also from observation of their expressions.

empathy map

The Journey Map

This map allowed me to identify the areas that needed the most improvement for enhancing the user experience. In this case, as you can see, there are two significant drops, which are before subscribing to a service and when users find out they are still paying for a subscription they no longer use. Therefore, this map suggests that for this design to make a great impact on user experience, it needs to be focused on making them feel confident at the time of subscribing to a service, as well as on helping them avoid getting negative surprises when a subscription they no longer use gets auto-renewed.

user journey map

―  The Requirements

Defining and organizing the features

After understanding the user, it was time to determine what information and features the solution required to meet those users’ needs. Also, I needed to discover the most functional and intuitive organization of those. In order to do that, I followed this process:

Steps

1. User stories
I first made a series of user stories based on the research and mapping methods developed. These user stories identified user’s goals and needs when managing subscription plans.
2. Requirement cards
Each user story was turned into a requirement card, which identified the needed feature.
3. Card sorting
Lastly, I conducted a card sorting exercise using those requirement cards with 5 participants in two different groups. I documented both the results, to identify the most common grouping and organization, and the conversation between the participants to identify areas where there were discrepancies.
picture during one of the card sorting exercises

― Visual Design

Enhancing functionality and user experience through the use of visuals

For the visual design, I wanted to achieve a simple, minimal, and organized look. My goal was to use the visual design to enhance the functionality of the app.

Choosing dark mode and a bright accent color for contrast

Due to the multiple colors of the subscription logos and in other to enhance those to improve its identification, I needed to choose a simple and neutral background color. I decided to give a chance to the dark mode. I used two slightly different background colors to emulate different layers and to give a sense of depth. Lastly, I chose a blue accent color for high contrast and I used it for the main buttons and navigation.

Simple, modern, and great for mobile: Roboto

I chose Roboto for the typography due to its simplicity and easy readability in mobile devices. I set different opacities to differentiate the primary and the secondary text.

― The Development

Developing different iterations based on usability tests

Once the information was organized and I knew what information and functions each page of this solution needed, I continued with the design development phase. Besides, you can find all the steps and iterations that I followed during this process until I coming up with the final design. As you can see, the iterations I made on each page were based on the feedback obtained from two different usability tests. These tests were very helpful as they allowed me to identify issues and opportunities that I did not consider in the first place.

Steps

1. Sketches
Based on the card sorting exercises, I started brainstorming some sketches and wireframes ideas on paper.
2. Usability test
With the paper cards wireframes, I conducted a usability test with 5 participants. This test focused on evaluating the content and the general layout of the design.
3. Low-fidelity wireframes
I developed a digital low-fidelity set of wireframes adjusting those issues discovered in the usability test. This time, I made them digitally and developed a prototype in order to use them for the second usability test.
4. Usability test
I conducted a second usability test with another 5 participants. This time I used a digital prototype, which gave the participants more freedom to experience and discover the app. The aim of this usability test was to evaluate specific elements of the design that I was hesitant about its functionality or level of intuition.
5. Mockups and prototype
Lastly, I made a high-fidelity prototype. This version not only included the last adjustments made after the last usability test but also integrated the visual design.

Subscription list

This is the first page the user sees once the user opens the app. My aim for this page was to allow the user to navigate through the app easily, see the most important information of each of their subscriptions at a first glance without the need of navigating to other pages and allow the user to enter new subscriptions from here.
1. Sketches
In this first sketch, I wanted the user to be able to enter the overall information of the subscription, such as name and category, as well as the billing details, such as price and renewal information. I also wanted to display the reminder information, which I hid under an icon of a bell.
This design had a section for entering the logo of the subscription, which, when pressed, a popup will come out showing the different ways of entering the logo: by searching common subscriptions, uploading a logo, or by making a custom logo. The idea when searching for the logo of a common subscription service was that it will also make some of the information of the subscription get auto-filled, In order for the user to save time on entering the information.
2. First usability test
The participants of the test didn’t seem to require the Status information on this page. They believed all subscriptions should be up-to-date on a normal basis. Instead of seeing this information, it seems they preferred to be notified when a payment is overdue.
3. Low-fidelity wireframes
I removed the status information and show only the price and the due date on the list of subscriptions. Instead, I added a card icon in the top-right corner. This icon will have a red dot when the user has a payment overdue that they need to pay attention to. On the click on this icon, the user will be led to a subpage where all the information regarding overdue payments and payments to be logged will be displayed.
4. Second usability test
I tested the payment overdue icon and it seemed to be intuitive enough. Users understood that when seeing the red dot, there was an important information they had to look at.

They also found that all the information displaying in the list was necessary, and they did not find that they need any other detail or information at this point.

5. High-fidelity wireframes
Due to the positive results of the last usability test, I did not make major changes on this page.

The payment subpage that opens once clicking on the cart icon shows the overdue payment status and the future payment that the user needs to log. The user will be able to mark these as paid from this page without the need of navigating to the subscription page itself. Note that in this app, the user will be able to choose the subscriptions they prefer to log manually or automatically. This Payment page will only display the information of the subscriptions set to log manually.

New subscription

This will be the page where users will be able to add a new subscription and its information. Note that in order to make this process faster, the majority of the information and will be set as default based on the information the user set on the Settings page.
1. Sketches
In this first sketch, I wanted the user to be able to enter the overall information of the subscription, such as name and category, as well as the billing details, such as price and renewal information. I also wanted to display the reminder information, which I hid under an icon of a bell.
This design had a section for entering the logo of the subscription, which, when pressed, a popup will come out showing the different ways of entering the logo: by searching common subscriptions, uploading a logo, or by making a custom logo. The idea when searching for the logo of a common subscription service was that it will also make some of the information of the subscription get auto-filled, In order for the user to save time on entering the information.
2. First usability test
In this first usability test, I found that the reminder setting icon wasn’t intuitive enough and that users found that it was located in a strange spot. Additionally, they did not understand why it was hidden under an icon.

Moreover, the participants didn’t know they could search for a common subscription by selecting the logo settings.
Lastly, they found that the option of uploading a logo was too time-consuming to be worth using it.

3. Low-fidelity wireframes
After the usability test, one of the things that changed in the design was the display of the reminder settings. I removed the icon and gave these settings their own visible section below the billing information. Also, as participants didn’t seem to know where to look for common subscriptions, I replaced the “Search Logo” option with a most intuitive search bar that says “Search Subscription” located on top of the main page. Lastly, as participants express that the option of uploading a logo was too time-consuming for them to use, I decided to remove it, giving only the option to make its custom logo for uncommon subscriptions that do not appear in the search bar.
4. Second usability test
The changes made in the last iteration seemed to have a positive impact on this second usability test. However, there were other issues that came up. The first problem that came up was that that the description input space was too small. They also expressed that more than a description, they will find more useful a space for notes in order to document anything they need of the subscription they need in the future. Additionally, they noticed that they weren’t able to enter the information on whether the subscription was renewed automatically or manually. They found this information important in order to successfully keep track of every subscription.
5. High-fidelity wireframes
For this last iteration, I replaced the “Description” field for a “Notes” section located at the end of the page. This allowed users to have extra space for notes and gave this field a less level of importance than the “Name” and the “Category” fields.

Moreover, I added the option to set the subscription as automatic or manually renewed.

Additionally, I placed the reminder options in this section, as well as I added a new option called “Mark as paid” where users could choose whether they wanted the subscription payment status to update automatically on the renewal date or manually by them, allowing them to only update the payment once they have done the payment themselves.

Subscription information

This is the page where users can access and review the information of their subscription.
1. Sketches
I designed this page to display the information of the subscription. Additionally, I added 3 buttons for Edit, Pause, and Delete the subscription. The function of pausing the subscription was very necessary, as it was one of the most common features requested by users of other subscription manager apps.
2. First usability test
There were no major usability issues on this page at this point.
3. Low-fidelity wireframes
For this iteration, I added a section for the reminder information, that I noticed I did not incorporated in the sketch.
4. Second usability test
In this second usability test, it came to the attention the inability to see and keep track of the payments of the specific subscription. Also, participants found it difficult to access the Edit, Pause, and Detele buttons due to their location on top of the page.
5. High-fidelity wireframes
I made two different subpages for each subscription. The first subpage “Info” is where the user is able to find all the information pdf the specific subscription being reviewed. The second subpage, “payments”, is where the user can find all the payments made of that subscription, as well as the status of the payment. Users can also mark the payment as paid from here.
Additionally, in the “Info” subpage I added new information that was also added in the “New Subscription”, such as the renewal settings and the notes.
Lastly, I placed the Edit, Pause, and Detele buttons at the bottom of the page in order to be easier to reach by the users’ thumbs.

Total Expenses

The total expenses page shows the total and real cost that the user pays during a specific month or year.
1. Sketches
On this page, the first thing that I wanted to display for the user was the total expense of this month and this year, in order for them to have total knowledge at all times on what the current expenses were. Additionally, I also wanted to display past month and annual expenses, in order to allow the user to reflect and review their past costs and make smarter decisions. I believed the best way to display this information was by using an interactive graph. Users were able to change this graph to show monthly and annual expenses, as well as grouped the information by subscription or by category. Once the user clicks on one of the graphs, the information of the expenses of that specific month or year will pop up from the button, giving the user more detailed information.
2. First usability test
The participants in this usability test believed that the “due date” and the “status” information of the subscriptions didn’t add any value to this page. They only wanted to see information related to expenses at this point.
3. Low-fidelity wireframes
For this iteration, and based on the feedback obtained in the usability test, I removed all the information that was not related to the expenses.
4. Second usability test
The first problem participants encountered during this second usability test is that they did not know that the chart was clickable. They knew they could navigate through the chart, but they did not know they could click into a specific column to see more information, as there wasn’t any clue to suggest this. However, what they did believe was clickable, and it wasn’t, was “this month expenses” and “this year expenses” information. They thought these were buttons due to the drop shadows.
5. High-fidelity wireframes
In this last iteration, I optimized the chart to look clickable by making the active month a different color than the inactive ones, by adding an arrow in the breakdown of the expenses to give a better sense that the information below corresponded to the column where the arrow was pointing at, and I also made the expenses information be opened by default. Additionally, I removed the shades in “this month expense” and “this year expenses” in order for the user not to confuse it for a button.

Average Expenses

The average expenses page allows users to learn about subscription habits. It allows the user to think about their expenses with a perspective, as it pictures all their current expenses without taking into consideration the due date or whether is monthly or annual. This allows them to reflect on their expenses and make better decisions in the future.
1. Sketches
On this page, the first thing that I wanted to show the users was their current monthly and yearly average. Moreover, with the use of a pie, I wanted to break down the different average expenses by category or subscriptions, so they could easily assess their costs. Lastly, I  wanted this pie to be interactive, so the users could navigate and analyze their past months or years’ average expenses.
2. First usability test
The participants in this usability test didn’t find any value in seeing the past month and year average. They affirmed they only wanted to know the current average expenses.
3. Low-fidelity wireframes
Based on the feedback obtained by the usability test, I removed the navigation of the average expenses of the past.
4. Second usability test
This usability test confirmed that similar to what happened in total expenses, the users were confusing the “monthly average” and “yearly average” with buttons, due to the drop shadows.
Additionally, they express their desire not only to be able to see their average expenses as percentages but also as currency.
Lastly, they seemed they were not fully satisfied with the average expenses information presented. They felt it was lacking further details and information in order to assess their cost correctly.
5. High-fidelity wireframes
In this last iteration, I redesigned how the monthly and yearly average information was displayed to make it more intuitive and clean. Additionally, I introduced a more detailed breakdown showing both the average in percentage and in currency, as well as the information of the specific subscriptions.

― The Solution

Helping users keep track of their subscription and expenses easily.

List of subscriptions
This is the first page the user sees when opening the app. It shows the list of subscriptions, their price, and their next due dates. From this page, the user can access the information of their subscription and enter a new one. Additionally, on the top right corner, there is a notifications button that shows the payments that need to be logged manually by the user. It will also notify the user when a subscription payment is overdue.
Entering new subscriptions
The users will access this page when they need to enter a new subscription. They can search for common subscriptions by using the search bar, or they can enter a new one from scratch. In order to make this process faster, some information, such as the “notification” or “mark as paid” options are set based on the default settings entered by the user in the Settings page, but it can be always set differently for a specific subscription if desired.
See subscription information
This page shows all the information of the subscription selected from the subscription list. The user can see not only the general information of the subscription such as renewal times and price but also all its previous payments. Additionally, the user can edit, pause, and delete a subscription from this page.
See and evaluate your expenses
This page shows the total and average subscription expenses. The total expenses are represented by a graph and shows the actual expenses at the time of the payment. The user can navigate to past expenses and see the breakdown of the total costs. On the other hand, the average expenses are represented by a pie and show the average monthly or yearly costs of the current subscriptions.

Thanks for reading!

Want to more? Check out my other projects!