Subscriptex

Keep track of your services in one place!
Subscription Management Fictional App

• Project Management • UX Research Analyst • Strategist • App Design • Sketching • Information Architecture • User Journey • Design System • Product Branding • Prototyping • Stakeholder Presentation •

Role

My role in this personal project was to design a mobile friendly app from an existing desktop website helping consumers manage their subscriptions eventually moving into the German market.

The Product Manager had already conducted user research and provided the demographics.

My job was to rebrand their subscription product, develop an app, and move into the German marketplace.

It was my complete luck to have a good friend who is a German accountant and speaks perfect English. She was thrilled to help me with the project and I was able to receive valuable feedback.

  • Familiarize with User Research, Target Audience and Business Goals
  • Clarify the Company’s Brand, Develop Company Name and Design Style Guide
  • Define and Understand the Question
  • Develop Project Plan and timeline
  • Research Competitors and Complete Product Analysis
  • Create User Flow
  • Sketch Mobile Screen Layouts
  • Design Three Prototype Iterations
  • Conduct Usability Testing, Analyze Results, Reiterate Design
  • Compile Case Summaries and Presentation for Stakeholders

Tools

Figma, FigJam, Figma Mirror, Adobe Illustrator, Google Suite, Galaxy S21 Ultra, Loom

Skip to the Prototype!
Top

Overview

Subscriptex is a hypothetical product and software management web site needing to create a mobile version of its product which can be used by a broader audience:

The Challenge

The challenge was to design a mobile friendly app from an existing desktop website helping consumers manage their subscriptions eventually moving into the German market.

My Role

The Product Manager had already conducted user research and provided the demographics. With the guidance of my mentor, I was responsible for:

Research

Overview

To help the user feel comfortable giving private information through an app while also saving them money. Through research and user interviews, Subscriptex recognized that people feel vulnerable not only with ongoing and surprising monthly payments, but also with handing out information on their phone.

Existing Screens

The information provided was from wireframes highlighting the same business goals.

  • Subscriptions
  • Calendar
  • Reports

Competitive Analysis

In order to better understand what has worked in the past and currently, I decided to spend time on the Competitive Analysis by signing up for three different Subscription Apps currently on the market.

  • TrueBill
  • Tilla
  • Subby

Key Points

After sorting through the competitor applications, I was able to break down what worked for Subscriptex, and what didn't.

  • Big focus on selling the premiere version.
    Therefore: Don’t monetize the app.
    According to research the Germans don’t respond well to upselling. 
  • Inputting the subscriptions independently takes too much time.
    Therefore: Populate the subscriptions by inputting payment information. Allow for manual additions.
  • Direct Cancellations through the app requires too much information.
    Therefore: Allow for contacting the company directly for cancellations, without offering to cancel. The app stays focused on managing but not owning the subscriptions.

Maps & Personas

Users

Target user was provided by the project manager:

  • Over 30 years of age 
  • Uses mobile and desktop hardware equally 
  • Middle class 
  • Trying to be more budget-conscious

Business Goals

From the provided primary research and my own secondary research, I was able to consolidate the business goals.

  • 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.

Problem Statement

How do we empower consumers to take control of their subscriptions so they feel safe?

The original wireframes addressed part of this problem, however, I had decided to add notifications because the safety was the largest motivator for the user. Especially in the upcoming German markets.

  • Subscriptions: Through updated lists
  • Calendar: Seeing upcoming bills and unsubscribing
  • Reports: Demonstrating larger picture of spending
  • Notifications: Feeling safer about sneaky auto-payments

Brand

Brand Personality

  • Trusted friend who is helping you save money

Brand Attributes

  • Trustworthy, Caring, Friendly, Casual Business but still friendly.
  • Serious but accessible.

UI Elements

  • Navy Blue, bright blue, bright green with orange accents.
  • Grays for secondaryRound corners feel soft
  • Roboto Font to feel consistent, workable and legible

Sketches

sketches reworked

The original wireframes had no style nor direction. After reviewing the research, I had decided to rework the sketch with a more intuitive layout clarifying the established goals.

Mid-Fidelity Design

Wireframes

The first set of sketches were loose so that I could save time and move to wireframes. However, knowing that time was limited I changed my low-fidelity into mid-fidelity because I felt that my original sketches could be more intuitive.

Building the wireframes went much quicker than anticipated. The consolidated manager-provided research blended with intensive competitor research allowed for a faster build and allowed me to begin the usability tests.

Usability Testing and Insights

As always, the Usability Test proved to be a wonderful way to test the design. The biggest takeaways were:

  • Navigation buttons were too small for larger fingers on the actual phone
  • The wording “cancel” in the overlays was confusing and needed to be changed.
  • Today’s date in the Calendar image was unclear.
  • The language “Upcoming” in the Navigation was unclear that it would bring you to the Calendar.

Hi-Fidelity Design

HiFi

The newer design addressed the user testing concerns:

  • Larger Navigation buttons are used.
  • The word “Close” is used on overlays
  • The current date is highlighted in orange on the Calendar image
  • The word “Calendar” is used in the Navigation tabs

Usability Testing and Insights

This test was especially exciting because one of the testers was a German bookkeeper with excellent English. Although there was a 6 hour time difference and she was tired, not to mention she hadn’t spoken in English for over a year, her input was helpful.

  • The word “Notification” doesn’t translate to German well. The word  “Alert” made sense.
  • German’s wouldn’t call Customer Service to cancel. They would intuitively go to the website.
  • Add a home button for easier navigation
  • The color red/orange seemed urgent when dealing with numbers.
  • Complete the Add Subscription, Add Alert, and Unsubscribe flows

Final Iteration

Final Changes

After the last round of testing, I felt compelled to make the last set of changes. Once again, the user testing proved to be an invaluable tool and I was so grateful to happen to have a German friend who was willing to test the product.

Usability Testing and Insights

As always, the Usability Test proved to be a wonderful way to test the design. The biggest takeaways were:

  • Navigation buttons were too small for larger fingers on the actual phone
  • The wording “cancel” in the overlays was confusing and needed to be changed.
  • Today’s date in the Calendar image was unclear.
  • The language “Upcoming” in the Navigation was unclear that it would bring you to the Calendar.

Changes

The final design acknowledges the users main sticking points.

  • The word “Alert” is now used to replace the word “Notifications”.
  • The Cancel Subscription Flow now navigates the user to the subscription’s website.
  • The home button is now in the top Navigation Bar.
  • The green from the original scheme is used and the orange is utilized for urgent elements.

Conclusion & Next Steps

Conclusion

The subscriptex mobile app is designed to take an existing Subscription management desktop product and increase its user base to include mobile users, and eventually expanding into the German market.

By moving the user through the outlined goals the app addresses pain-points head first creating an intuitive user flow.

With more time and a complete development team, there are a few items to address moving forward: