Redo

The Problem

The target user has various subscriptions and struggles to keep track of payments due and renewals. The solution should provide them with a low maintenance way to organise their subscriptions activity, giving them a greater visibility and control over their spending, and preventing the user from wasting money on inactive subscriptions.

Project goals

  • With only a small number of subscription trackers available in the app store, there is room in the market for a new company to bring a solution that will capture the target users needs whilst providing a delightful user experience. 

  • The app needs to be very simple, with minimum effort required by the user for initial setup and also ongoing maintenance. The more information that can be auto completed on their behalf, the better.

Design process

  • Empathise

    • Competitive analysis

    • Survey

    • Persona

    • Customer journey map

  • Define

    • Sitemap

  • Ideate

    • Branding

    • Wireframes

    • High fidelity UI

  • Test & Iterate

    • Usability testing

    • Iterations

Empathise

Competitive analysis

There were very few subscription tracker apps to analyse, so the analysis was widened to also include apps with similar objectives such as bill trackers.


Benefits of existing subscription tracking options:

  • Overview of everything in one place and be able to audit subscriptions no longer needed.

  • Good visibility of outgoings and upcoming payments due

  • Being able to cancel renewals on time, avoiding unnecessary charges

  • No requirement to connect to bank account or provide any bank details


Typical frustrations with existing subscription tracking options:

  • Too much manual data entry

  • Only see due dates in terms of weeks

 

User research

A survey of 20 people within the target user category was conducted to get a better understanding of the frustrations they face, the features that are important and whether they see value in the solution. The responses highlighted that there are a number of common problems and a clear need for the app to help solve these issues.

 

When one of your paid subscriptions reaches the renewal date what usually happens?

How do you track renewals of your subscriptions?

 
 

83%

Have forgotten to cancel a free trial and subsequently been charged.

89%

Think they could save money if they tracked their subscriptions more closely.

 

User persona

Based on the initial research and results of the survey the below personas were created to represent the target users. The personas help understand their motivations and empathise with their frustrations to ensure the entire design process and the end solution are centred around the user.

  • Louise uses a variety of subscriptions including tv, food and beauty products.

  • She tries to remember to add reminders in her phone calendar for renewals, as she often opts for an annual subscription to get a cheaper overall cost.

  • She often forgets to add the reminder and sometimes misses her chance to cancel a subscription before it renews for another year.

 
  • Finn regularly signs up for free trials but doesn’t track when they finish so regularly ends up wasting money on unwanted subscriptions, a tracker app could really help him avoid this situation.

 

Customer journey map

For each persona a customer journey map was created to visualise the end-to-end process to accomplish a specific goal. This helped to identify the key opportunities that the solution could incorporate to enhance the user experience, whilst building further empathy for the user through understanding their emotions at each stage.

Customer journey map - Louise

  • In this scenario Louise has many subscriptions and struggles to keep track of them, she wants to have everything together in one place for easier management.

  • The journey map goes through each stage from initial download to setup to tracking activity.

  • Key opportunities that were highlighted were to include a way to automate as much of the data input as possible, and to have an alert system to help users remember payments and renewals.

 

Customer journey map - Finn

  • In this scenario Finn regularly gets charged for forgetting to cancel free trials before they expire. He wants to use Redo to have better control over his spending and stop wasting money.

  • The journey map goes through each stage from signing up for the free trial, adding the subscription to the app, receiving the reminder and cancelling ahead of renewal.

  • Key opportunities that were highlighted were to be able to configure alerts at subscription level rather than in general, and to have an easy way to cancel subscriptions.

Define

Site map

Based on the research undertaken the key features of the app and a high level content outline were defined in order to guide the next phase of the design process.

App concept and functionalities:

  • Users can add details of subscriptions (start date, payment frequency, renewal date etc.) to track in the app.

  • My subscriptions would contain a full list of all subscriptions they have added, to be able to locate one they are looking for more detail on.

  • The spending page would provide them with visibility of their outgoings on subscriptions - displayed by list, category or calendar view.

  • Each subscription would have a detail page with more information and edit/remove options.

  • Users also have the option to set alerts which can be viewed in the notifications screen.

 

Ideate

Brand identity

The aim was to keep the logo simple just using the Company name, but making it impactful by using a bold primary brand colour - a bright red with a slight orange tone was selected.

For the typography two sans serif fonts were used, with the majority of text being SF Pro Rounded, to portray the brand as modern but also friendly and approachable.

The secondary colour is a contrasting turquoise to bring some additional colour and fun to the brand, with a few lighter shades also included in the palette. The grey is another key colour for the app, the subtle red undertone ensures a good match with the primary brand colour.

 

Wireframes

Low fidelity wireframes were sketched out to explore different layouts and components that could be used for the main screens.

The goal was to have a clean ui with lots of white space, particularly for the login and sign up flow to ensure users are fully focused on the task and are not distracted.

This initial stage of ideation was also used to try out different navigation options to see how the user flow would work.

Next the wireframes were created in Figma, exploring some additional options and defining the size of the various elements and sections based on some proposed copy.

The spending by category and calendar pages were the most challenging to ensure the full range of information was clear and easy to interpret.

 

High fidelity UI

Following the medium fidelity wireframes, high fidelity mockups were created incorporating the colour palette, typography and branding.

View prototype

 
 

Home

  • From the home screen the user can see a summary of their subscriptions and also a list where they can click one to view the detail page.

  • The aim was to have a clean modern UI with a lot of white space contrasted by blocks of bold colour.

  • The navigation was focused around adding new subscriptions with other options revealed by using the burger menu.

  • Reminders are accessed using the bell icon at the top right of the screen with a red indicator for any unread alerts.

  • The spending by category was adjusted again from the wireframes as it was unclear from a quick glance which category the user had spent most on. The bar chart was a better option where categories could be ordered from highest to lowest spend.

 
 
 
 
 

Add new subscription

  • The research it highlighted the importance of automating as much data input as possible.

  • The add new screen allows the user to select from a list of subscriptions by company, once selected all fields are pre-populated with the most common option except start date.

  • This allows the user to set up a subscription very quickly and without having to recall data such as cost and cancellation period.

  • The user can amend any of the pre-populated options if needed.

  • They can also opt to set up reminder notifications.

 

Spending

  • Spending can be viewed in one of three ways; by category, list or calendar.

  • The spending by category was adjusted again from the wireframes as it was unclear from a quick glance which category the user had spent most on. The bar chart was used so categories could be ordered from highest to lowest spend.

  • Colours and icons are used to easily distinguish between the different categories.

 
 
 

Test & iterate

User testing

Once the high fidelity mock-ups were finalised, an interactive prototype was put together to display the user journey throughout the main screens of the app, which would be used for the user testing phase.

Maze was used to perform remote user testing with a combination of questions and tasks, the heat maps and path details were particularly useful to understand the typical user journey and also the common struggles. Whilst the testing showed the users did feel the app would be useful as it provided numerous benefits, the results revealed a few key flaws:

  • The add new subscription button was not obvious enough as 40% of users accessed the screen using an alternative path via the burger menu

  • In general users struggled to navigate easily to the main screens such as 'spending' and 'my subscriptions' passing through various screens before reaching the desired information

  • The login button was too close to the password field causing misclicks

 

Iterations

  • The feedback from the user testing was extremely useful and highlighted a number of enhancements to include when completing the iterations.

  • The main change incorporated was to remove the burger menu and bring the key menu options into a bottom navigation bar so they are always visible and easily accessible for the user.

  • Text labels were added to further clarify where each option would lead the user to. The rest of the changes were minor spacing improvements and fixes to broken links.

 
 
 

Next steps

The design phase is complete for this project, the next step would be to hand off the designs to a developer to build the app. Ideally some potential users would participate in user testing before the app is launched, to highlight any additional issues which should be addressed before rolling it out to the public.

View more projects

Starling

The Crooked Cookie

Equalize

Previous
Previous

Starling

Next
Next

Equalize