top of page

SubsWise

Streamlining subscription management

iOS Mobile Application

subswise wix vocer.png
Group 4534241.png
Group 4534240.png
Group 4534242.png

Introduction

Understanding the purpose of the app and the audience it will serve

Project Background

This project was a part of my UI/UX certification at Springboard. I was given a few project prompts that each included some existing research about the goals of the project and its target audience. I opted for creating a subscription management app. I chose this option because it had practical, real-world guidelines, making it a concept that could potentially be very useful for people.

Objective:

  • Create a mobile application for subscription management.

Timeline:

  • 4 weeks

Tools:

  • Figma

  • Google Forms + Google Docs

  • Pen + paper

My Role:

  • UX Researcher

  • UI Designer

My Contribution:

  • User Research

  •  Usability Testing

  • User Flows

  • Wireframes

  • Branding

  • Visual Design

  • Prototyping

  • Usability Testing.

Challenges:

  • Solo Designer

  • 4 week time constraint

  • Getting users comfortable with data security and linking their bank.

The Problem

It’s hard for people to keep track of all the products and services that they subscribe to, leading many to spend money on services they no longer need.

The Solution

There's a company with a desktop-only subscription management site. To broaden their user base, they want to develop a mobile-friendly version since most of their potential users are using mobile devices. They want this app to give users a centralized hub for managing subscriptions, receiving bill reminders, and unsubscribing from their subscriptions.

Company Objectives

Before getting started on the project, I reviewed the company's business goals and target audience to ensure that the app will align with their vision. 

What are we creating?

A mobile application where users can conveniently manage their subscriptions, including viewing, unsubscribing, and receiving notifications about upcoming ones. 

Who are we catering to?

Individuals aged 30 and above, belonging to the middle class, who equally use both their phone and desktop and are interested in becoming more budget-conscious.

The Result

sign up page.png
connect bank explanation page.png
home page.png
subscription details page.png

Research

Delving into the purpose and audience of the app

Competitive Analysis

For the first method of research, I evaluated industry-leading apps. I compared three different products in the field to gather insights into what works and what falls short in current subscription management options. I compared Rocket Money, Subscription Stopper and TrackmySubs. Analyzing these platforms revealed what I wanted to incorporate into my project.

image-removebg-preview.png
image-removebg-preview-3.png
image-removebg-preview-2.png

Competitors

Key Takeaways

  • All apps performed well in keeping users informed about their upcoming subscription charges through the use of notifications.

  • 2/3 apps gave users the option to link their bank accounts to the app so that their subscriptions could connect automatically. 

  • All apps needed to do better at emphasizing security measures in order to build user trust.

  • 2/3 apps opted for a simple and clear design, which made them easy to navigate.

Competitive Usability Testing

For the second method of research, I decided on a competitive usability test where I’d give users tasks to complete in an existing subscription management app. For example, creating an account, analyzing subscription details, and adding new subscriptions. My app choice for this test was Rocket Money because it stood out to me as the most developed app in the industry. 

Why This Method?

I decided that this method of research was the way to go because my project wasn't about starting from scratch; there were already apps out there that fit the bill. Therefore, using an existing app for testing seemed like a good way to gain insight into user pain points.  

Gathering Participants

To ensure alignment with the company's target audience of middle-class individuals over 30 seeking budget-conscious solutions, I sent out a screener survey. I recruited five participants and conducted 30-minute testing sessions via Zoom.

Test Results

Testing provided so many wonderful insights into how users interact with a subscription management app! I spent the first 15 minutes inquiring about the user’s current subscription management experience, followed by a 15-minute competitive usability test where users engaged with the Rocket Money app and shared their feedback. It was so interesting to hear about user challenges in a real-world application.

Synthesizing the Info

To make sense of all the valuable testing information, I created two affinity maps where I organized my findings by theme. The first map is about how users currently manage their subscriptions, and the second is their feedback regarding the Rocket Money app.

Map #1

User feedback on their current subscription management.png

"We know that we have a million subscriptions, but going through them would take too much time."

"I want to know exactly what they're doing with my bank account; there isn't enough information here."

"

- User Interviewees

Key Takeaways

  • Users like the idea of having their subscriptions automatically connected, but most are skeptical to add their bank information and seek detailed information about its security.

  • Most users trust PLAID and appreciate seeing that as part of the bank security.

  • Users want the choice to skip adding a bank account during sign-up and add it later, so that they can do it when they feel completely secure.

  • Most users are already overwhelmed by their subscriptions and require an app that is super simple and easy to understand for frequent use.

  • Most users prefer to view upcoming subscription charges as early and clearly as possible, making the home page or main subscriptions page ideal for this information.

  • Users forget about their subscriptions often, and like to be reminded about upcoming charges.

Arousing Empathy

After all the information was organized, I created an empathy map in order to put myself in the user's shoes and empathize with their experiences. When taking a closer look at the information, I realized that the app had two target user groups. The empathy maps for both of them are shown below.

Empathy map - user #2.png
Empathy map - user #1.png

Ideate

Mapping out the app's structure

Information Architecture

After gaining a comprehensive understanding of the app's users, I proceeded to plan the overall structure of the app. To do this, I created a sitemap that organized the app's information in a logical order.

Sitemap.png

User Flows

Next, I created user flows to map out the steps users would need to take to achieve their goals in the app. Taking into account both user needs from research and the company's objectives, I created five user flows: signing up, viewing all subscriptions in one place, canceling subscriptions, and receiving notifications about subscription activity. 

Sign up 

Onboarding and Sign Up.png

Design

Crafting the app's visual appeal

Beginning Stages

Next, I developed a light brand identity for the app. I chose the name ‘SubsWise’ because I felt that it was a suitable and recognizable name that instantly conveys the app’s purpose.

I also created a style guide that included the SubsWise typography, logo, colors, illustrations, elements, and components. In this guide, I aimed to bring out the company's brand personality of 'a trusted friend who is helping you save money.'
I revised the style guide throughout the process, so you'll see some differences in the first and second round designs.

Rectangle 3.png
Rectangle 2.png
Rectangle 1.png
Logo (traced).png
Rectangle 1.png
Rectangle 2.png
Rectangle 3.png
security.png
girl.png
connect bank.png

Low-Fidelity Designs

Then, I started creating the design! Due to time constraints, I sketched my ideas roughly on paper and quickly translated those ideas into basic, low-fidelity designs using Figma. I made the designs as simple as possible, purely focusing on the content I wanted the app to include. Below are some of the screens.

upcoming charges.png
subscription details page.png
connect your bank account page.png
cancel subscription page.png

Usability Testing

Next, I tested the designs. I sent out a second screener survey to ensure that participants fit the SubsWise user base. Fortunately, I had two participants from the competitive test who were willing to participate again! So I gathered three more participants and conducted 30-minute testing sessions via Zoom.

Test Results

Testing the low-fidelity designs brought out many great insights. Although users gave feedback on a lot of small changes, they found the app to be quite smooth. Below are the main issues I noted that needed to be prioritized in the next design phase.

Key Takeaways

  • The sign-up process can be more clear. Users were confused at the 'connect your bank' page because the wording was vague and the notifications page seemed unnecessary at that stage of the process.

  • Users wanted more information on the 'cancel for me' feature before they started the process, particularly details like how long it takes to cancel.

  • Users were curious about the meaning of the 'initiated cancellation' badge because there wasn't any info provided about it when they clicked on a specific subscription.

High Fidelity Designs - Round One

As part of the project plan, I decided to do two rounds of high-fidelity designs. During round one,
I incorporated elements from the style guide and infused the app with color and personality. 
Below is a glimpse of the designs with iterations based on insights from the previous usability testing.

connect bank explanation page-1.png
connect bank explanation page.png
all.png
initiated cancellation.png

Created another page within the 'connect your bank' process to enhance its clarity.

cancel subscription page.png

Added how many days cancellation process will take and an 'FAQs' feature for users who had questions about the process.

Screenshot 2023-10-26 at 2.42.53 PM.png

Added information about the 'initiated cancellation' badge in the subscription details page.

Changed the time that users are asked to enable notifications, because it was confusing as part of the sign up process.

Usability Testing

Next, I sent out a third screener survey and gathered fresh participants for the last leg of testing, where I tested the high-fidelity designs. You know the grind at this point :)  I gathered 5 participants for 30 minute sessions on Zoom and gave them tasks to complete within the app. These tasks were specifically related to the issues that came up in the previous testing to understand if they had been resolved, and if the app fulfilled company objectives.

High-fidelity Iterations

Users pulled through with awesome feedback once again! I reviewed the feedback with an experienced student mentor, who also pitched in some insightful suggestions for improvements. Below are the main challenges that users faced throughout testing that I prioritized for the next round of iterations:

Key Takeaways

  • Users wanted more info for the subscriptions they added manually, like billing details, and many suggested a section for storing subscription usernames and passwords.

  • Users ran into some navigation issues, like figuring out how to delete a subscription, where to find their bank info, and not having enough control over when the onboarding page advances to the next one.

  • The sorting feature didn't meet user expectations, leaving them disappointed with the limited options.

High-fidelity Designs - Round 2

After figuring out what needed to be added based on user feedback and talking to an experienced student mentor about a few additional improvements, I updated the designs for the second time. Here are some of the iterations:

sign up page.png

Changed illustrations to give the design a more mature feel. Previous ones didn't align perfectly with the app's demographics.

Developed the sorting options by offering users more choices.

onboarding page.png

Gave users more control over when they want to move to the next page by providing an arrow instead of it moving automatically.

subscription details page.png
home page.png

Provided users with their banking information since many were looking for it.

Relocated the delete subscription button to make it easier for users to find and anticipate its location.

add new subscription page.png

Added a notes feature where users can add their bank info, passwords or any other subscription-related notes.

Final Design

Changes I'd Consider With More Time:

  • Users wanted the option to add their credit card in addition to a bank account. I'd consider adding that feature.

  • Users expressed the need for a search bar on the subscriptions page, which could be a valuable customization feature to explore.

  • Users expressed interest in sharing SubsWise accounts with others, a feature that could be valuable with further research and development.

  • Developing the reports page might make the app more interesting and motivating for users.

Final Thoughts

Honestly, I really enjoyed this experience! The part I liked most was having real-life company expectations for the app. It gave the project a structured and clear sense of direction. I also want to mention that the more projects I dive into, the more I recognize the value of listening to users. They really have all the answers, and it's so cool to see how the users themselves give insight into the best changes. 

Thanks for following along  :)

Got questions about this project? Feel free to contact me.

bottom of page