The challenge

Nowadays, the majority of adults have monthly subscriptions for products and services. It can be hard to keep track of them, which leads to missed payments or cancellation dates. SubSaver is a product that keeps track of subscription fees. It only supports a desktop website that is not mobile-friendly. The company has decided to create a mobile version to reach a broader audience. They also plan to expand to the German market.

The solution

To help SubSaver reach a broader audience, I designed a mobile version of the website that helps the user keep track of subscriptions and assists with cancelling. The solution was designed to fit the U.S. and German market.

My role

I performed this project as a solo UI/UX designer. This responsibility included creating a project plan, research, ideation, prototyping, and testing.

Constraints

The project had a time budget of 90 hours.

Project plan

I started the project by creating a project plan on how to use the time budget of 90 hours in the most effective way.

Research

In the research phase, I conducted a survey to learn about the challenges when managing subscriptions in the countries USA and Germany. Next to that, I researched the requirements for the German market. I concluded the research with a competitor analysis.

Germans use different currency-, time- and number formats

The following table shows the differences in language, currency and number- and time formats that are needed for the US and German market:

	USA	Germany
Language	English	German
Currency	United States dollar ($)	Euro (€)
Date format	mm/dd/yyyy	dd.mm.yyyy
Calendar format	Su, Mo, Tu, We, Th, Fr, Sa	Mo, Tu, We, Th, Fr, Sa, So
Number format	1,000.00	1.000,00
Time format	1:00 pm	13:00

Most competitors notify the user by push notifications

Competitor tools came up with different approaches to manage subscriptions. Some tools offer automatic tracking and cancellations by connecting their bank accounts. The user cannot use the tool without allowing access to their accounts. Notifications are supported in different ways: push, email, SMS. Push notifications are the most popular solution.

	Truebill	TrackMySubs	Trim	Bobby	Subby	Subscro
Tracking	automatic	manual	automatic	manual	manual	manual
Notifications	email push	email	SMS	push	push	–
Cancellations	automatic	–	automatic	–	–	–

User flows

I started the design phase by creating user flows of the most important red routes.

Add a subscription

Users need to add a subscription, so get an overview of their expenses. It is important to track the renewal date and period so that they can set up notifications.

Set up notification

Every other person that participated in the survey has forgotten to cancel their subscription once, so the user should get the option to set up a reminder.

Get help to unsubscribe

Since I found in the survey that half of all people do not like to give access to their bank account, the website should help the user by giving steps to unsubscribe.

Sketches

The user flows were followed by the sketches. Some key design decisions are:

• Ask for language and currency before starting the website, so that the user will see the website in their native setting
• Ask for the sign up later, when the user is trying to add the first subscription, so that they can explore the website beforehand
• Show the total amount of monthly payments on top of the single subscriptions to give the user a clear overview

Usability tests – Round #1

To get early feedback on the sketches, I performed a round of usability tests with 5 participants. The goal was to find the main usability problems in the red routes adding a subscription, setting up a notification, and getting help to unsubscribe.

High Fidelity Mockups

Based on the sketches I created the high-fidelity mockups, taking into account the findings from the usability test.

• The overall style of the website is light with a green accent color and friendly illustrations, to be in line with the brand attributes ‘friendly’, ‘caring’, and ‘trustworthy’
• Showing the logos of the subscriptions that are known by the website makes the subscriptions more recognizable, which is key to getting a quick overview
• Having a calendar view and two reports should help the user to know when their subscriptions are going to renew and get an overview of the expenses over time.

Conclusion

This project provides a solution to help people keep track of their subscriptions. The user can see an overview of their subscriptions and monthly expenses, can set up push notifications when a subscription is about to auto-renew and gets help with canceling through a step-by-step guide.

The solution is well-received by all test participants. They especially liked the functionality and ease of use of the product. One participant mentioned: ‘If I was able to use this website today, I would use it!’.

This project taught me the importance of discovering the requirements for different markets. If I would do this project again, I would allocate more time to run usability tests with both an English and a German prototype to get the best feedback from both markets.

More case studies