Sarah Jackson - SEliz21
UX designer

SubScripter

Mobile App for Subscription Tracking Website

Image alt tag

SubScripter - A Subscription Tracking App

A startup company with an existing website wanted a mobile app that would provide the ability for users to complete 3 essential tasks not previously included on their website.

  • For users to see all of their subscriptions in one place.

  • For returning users to have the ability to unsubscribe from a subscription.

  • For users to be notified of any subscriptions about to be auto-renewed.

My Process

Image alt tag
  • Research

  • Competitive Analysis

  • Affinity Mapping

  • Personas

Image alt tag
  • User Stories

  • IA

Image alt tag
  • Wireframes

  • High Fidelity

  • Mockups

  • Branding

  • Visual/UI Design

Image alt tag
  • Prototyping

  • Remote User Testing

Subscription Tracking Competitors

Subscription Tracking Competitors

Discover

As a UX/UI Designer for the company, I needed to understand the goals provided by the company and come up with possible solutions that align with both the company and user goals. This meant:

  • Identifying and coming up with possible solutions for the business’s goals provided by the company.

  • Looking at major competitor websites to see what they provide for their users.

Main Competitor

Main Competitor

Using Truebill as my main example source, because it seemed to provide some better user reviews, I continued on!

Issue #1

Give current users the ability to see all of their subscriptions in one place so they can get a comprehensive view of their spending on subscriptions.

Notice How Truebill

  • Offers a lot of information to its users.

  • Subscriptions are all in one place on their website, but if shown on a mobile app, it would be cluttered with too much information for one screen.

SubScripter's Solution

  • Is minimalistic with a clean font that has softer edges. 

  • Adds distinction between transactions via drop shadows for softening.

  • Uses shades of darker colors to soften the overall look.

Issue #2

Provide the ability for returning users to unsubscribe from a subscription so that they can reduce needless spending.

Truebill Recurring Transactions Overview

Truebill Recurring Transactions Overview

Tends to Overwhelm

While I really like how consistently intuitive Truebill is throughout their website, again, for a mobile app it would be difficult to provide so much information without overwhelming the user.

Truebill Cancellation Failure

Truebill Cancellation Failure

Cancellation Frustrations

The biggest complaint I had with Truebill, was that most of the subscriptions I tried to cancel through their website, didn’t allow me to do so, being told that I needed to cancel through the company website for the subscription I was trying to cancel which was frustrating.

SubScripter's Solution

To remedy this issue, SubScripter

  • Only provides the option to cancel via the app if the option is available so it’s not misleading to the user.

  • Once a cancellation is requested, the user is further advised to be on the lookout for a confirmation email and given a number to contact if the email is not received within 24 hours.

SubScripter Issue #2 Solutions

SubScripter Issue #2 Solutions

Issue #3

Consumers are to be notified of any subscriptions about to be auto-renewed so the user can decide whether they want to renew the subscription and continue spending money.

Truebill's Alerts & Notifications

Truebill's Alerts & Notifications

Truebill's Alerts & Emails

Truebill sends out emails along with a small red notification alert to catch the user’s attention when they’re in their account. They’ve also provided the ability to turn on or off all notifications as well through the user’s account settings page.


SubScripter's Solutions

While I like the ability to turn off notifications via a settings page, I’ve found through user testing that users benefit from being able to be selective in which notifications they receive from specific apps and don’t necessarily need or want reminders of all of their subscription renewals.

SubScripter's Issue #3 Solutions

SubScripter's Issue #3 Solutions

Keeping This In Mind

  • I created 2 settings pages: General and Subscription settings, allowing users to turn on or off notifications for some subscriptions while allowing other notifications to still get through to the user.

  • I included bold, red text showing the subscription renewal coming up soon when users are viewing all of their subscriptions.

  • In addition, if cancellation via SubScripter isn’t available directly, SubScripter provides a link that takes the user directly to the cancellation page for the subscription.

SubScripter

My Process & Key Phases

I typically begin my process with a survey to verify that I’m keeping the right mindset and goals of the user. Then, based on the business goals and findings from the surveys, I create wire-frames with a quick user testing of a prototype.

SubScripter Design Brand Guide Moodboard Page

SubScripter Design Brand Guide Moodboard Page

1st Round Down!

After the first round of user testing with the wire-frames, I begin adding more creativity and style to the app. Keeping the business’s goals as the main focus, creating a mood board and design brand guide for each project I work on really helps me keep the company goals in mind and stay consistent when deciding on the colors, fonts, and overall design attributes I’ll be using. 

For SubScripter, I included the company attributes that were provided in the assignment and went from there to create a complete mood board.

SubScripter Fonts & Color Palette

SubScripter Fonts & Color Palette

Keeping the Classics

With the company stated target user being middle class, at least 30 years of age or more, using a phone and desktop equally, and trying to be more budget-conscious, I wanted to keep the color scheme and theme simple with a classic look similar to that of a modern 50’s look. This meant softer font choices in hues of black, grey, and white with a dash of a soft, but bold red to draw attention to alerts or notifications.

Next ~ Planning

I drew up a quick plan for the rest, finding it helpful to be flexible on time frames and dates to include human factors.

High-Fidelity Mock-ups & Prototyping

One of the main goals was to keep a clean and simple, but intuitive layout and design.

Final Testing & Results

Aside from one or two small revisions after another round of user testing, I ended up with an app clean, simple, and inviting while intriguing and intuitive in layout and design.

SubScripter Final Prototype

What I learned from this project is

  • Complexities can always be simplified by breaking them into as many pieces as needed.