Case study

Subsplan

Conquering Content Subscription Chaos: Designing a User-Friendly Platform for Managing Recurring Payments

Overview

In today's world, subscriptions are everywhere. From streaming services to fitness apps, we're constantly signing up for new services. But with this convenience comes a new kind of chaos: the subscription jungle. Users were losing track of their commitments, facing unexpected charges, and feeling overwhelmed by the sheer volume of recurring payments. SubsPlan, is an idea, a subscription management platform, aimed to bring order to this chaos, a tool for empowerment. In essence, Subsplan revolves around a straightforward concept: optimize savings and efficiency by strategically pausing unnecessary services and faster streaming service-based content discovery. This innovative approach empowers users to take control of their streaming experiences, saving both money and time.

Objective

My mission was to create SubsPlan, building it into a user-friendly haven for managing subscriptions. I aimed to:

  • Simplify Subscription Management: Make it effortless to track, organize, and control subscriptions.
  • Enhance Visual Clarity: Provide a clear overview of spending and commitments.
  • Improve User Experience: Create an intuitive and enjoyable platform

Role

I assumed the following roles designing this app:

  • User Experience Designer
  • Interaction Designer
  • User Interface Designer

Tools

  • Figma
  • FigJam
  • Mockup
  • Adobe Ilustrator
  • Adobe Photoshop

Challenges

As a UX/UI designer, I embarked on a quest to tame the subscription jungle. The challenges were numerous:

  • Taming Information Overload: Transforming complex subscription data into an easily digestible format.
  • Crafting Intuitive Navigation: Guiding users through the platform with ease.
  • Designing for Scalability: Ensuring the design could adapt to various subscription types and user needs.
  • Making financial data easy to understand.

Solutions

  • Centralize subscription management within Subsplan, empowering users to handle cancellations and account re-establishments seamlessly through APIs
  • Establish a report to visualize the usage rate
  • Develop exclusive search and advanced filtering functionalities tailored solely to services integrated with Subsplan
One application oversees multiple accounts, allowing users to effortlessly switch between services. For example, they can use Netflix for a month, pause it, and switch to Disney+, and vice versa.

UX Research

I began my research by examining the competitive landscape to understand how other apps tackle similar challenges. Utilizing user survey responses, I quantified customer expectations and pain points. Additionally, conducting one-on-one interviews allowed me to grasp user journeys and identify specific issues the app must address.

Findings:

  • In the subscription management sector, there is no direct competition, but several endeavors have been made to offer programming guides
  • Users maintained an average of 3 paid subscription services per month and expressed significant frustration due to the lack of transparency
  • Concerns varied from a basic lack of understanding ("I don't know what I'm paying for") to a strong desire for improved management ("I want to optimize my subscriptions")
  • All users encountered challenges in finding suitable programming, albeit for diverse reasons

User Persona

At first glance, it may appear that everyone shares the same goal of saving time and money. However, in-depth user research unveiled distinct motivations among individuals.

Creating personas proved vital in understanding these divergent perspectives, serving as crucial reference points during the development of functions.

Throughout the research and design process, my primary focus revolved around two personas. One heavily emphasized scrutinizing usage reports and data to make subscription decisions, while the other relied on the app's browse, search, and filter functions for viewing choices.

"Nasir want to be able to find family friendly content, without having to subscribe to any new subscriptions"

"Qaisara is looking for a way to track what she should watch on her paid subcriptions"

Understanding common task to foster user empathy

Through the creation and examination of journey map for the persona and the routine tasks, I discovered crucial emotional and procedural moments that required attention in Subsplan.

These moments included anxiety over potentially unnecessary expenses or the dread parents might experience while searching for content to watch with their children. To ensure the app's lasting appeal, it was essential to address these challenges effectively and avoid introducing additional points of friction.

User Flow
User Journey Map
Creating Structure

Derived from surveys and interviews, this site map visually outlines the three primary task streams for the high fidelity prototype: 1. Onboarding and registration, 2. Subscription management (subscribing and unsubscribing to services), and 3. Programming and search-related functions. Building upon this framework, along with the valuable user insights gathered, it would serve as a guiding reference for design decisions in the future.

Sitemap

Design

User-centric approach sketches

Through rapid sketching, I delved into design patterns prevalent in competitive apps, discerning elements that should be incorporated into Subsplan to ensure familiarity. This process also unveiled screen types capable of serving multiple functions and identified intuitive swiping/touch gestures for optimal user experience.

Early sketches

Low-fidelity prototype

Conducting low-fidelity prototype testing provided valuable insights into users' expectations while completing the targeted tasks. Analyzing their touch and swipe gestures, coupled with engaging discussions about their preferences, guided the necessary adjustments for a more comprehensive high fidelity prototype. Critical aspects like actionable and consistent iconography, as well as coherent navigation paths, emerged as vital elements in shaping the design system.

Sample low-fidelity screens depict onboarding, main UI and filter function

Overview of the subscribed plan and pausing feature

An overview screen layout serves multiple purpose, including billing report, search result and watch later list

Final Design

The prototype design played a crucial role in gathering user insights. Starting with a low-fidelity prototype, we observed users' interactions and preferences while performing tasks. This informed the evolution to a high-fidelity prototype, where we refined critical aspects like visual layout and coherent navigation paths. The final design incorporates user feedback, ensuring a seamless and enjoyable user experience. You can find the link to the final prototype here.

Lesson Learnt

  • Initially, I approached this project with the assumption that the app's sole purpose was to become a directory for which streaming service provide a particular content. However, I soon realized that users required additional information to make well-informed decisions
  • Sharing sensitive information, such as credentials for other accounts, triggered suspicion among users. The app's promise to reduce bills further heightened doubts. To address these concerns, thoughtful copy on key screens and clear explanations, along with access to support, were necessary
  • Users searched for content in diverse ways, indicating a preference for more filtering options rather than fewer

Outcome

Finding streaming service that provide the content I stumble upon on tiktok has never been easier

The high-fidelity prototype provided test users with an experience closely resembling reality, uncovering several concerns. Although users successfully completed the onboarding process, the lifelike nature exposed apprehensions related to security, privacy, password retrieval, and suspicion, voiced by test subjects. Additionally, this iteration prompted users to verbalize a newfound requirement: visualizing the value derived from each subscribed streaming service, empowering them to make informed financial decisions and faster content discovery.