SubFlow is an iOS mobile app that helps subscription users manage their renewals with bite-sized visuals.

Timeline: August to September 2023

My Role: Research and UI/UX Design / Solo Bootcamp Project

Tools Used: Pen and paper, Zoom, Miro, Figma

  • Problem

    Managing subscriptions is time consuming and requires a lot of organizing. Subscription customers need a way to stay on track with payments to budget and avoid unnecessary payments.

  • Solution

    Subscription customers require a tool that offers spreadsheet-like effectiveness without the manual labor. They also need to be able to quickly visualize a large list of data.

Here’s what we know from the project brief:

On to the research plan

I drafted these questions to begin my desk research:

  1. How are subscription customers currently managing their renewal dates?

  2. What is lacking in exisiting subscription management methods or tools?

  3. What specific features are helping customers stay on track with renewals?

  4. What other methods are customers using to keep track of subscriptions?

My first plan of action was to do a competitor analysis by looking at competitor reviews. This would give me an idea of what current users are liking and not liking about the tools they’re using so I could do a SWOT analysis. 

I also needed to research the background of the subscription industry. My goal was to tap into existing studies and surveys that show how customers are feeling and responding to subscriptions. Knowing this would allow me to understand where the product I design fits within the current needs of the subscription marketplace.

How are customers responding to the rise in subscriptions?

Synthesizing Competitor Product Reviews

In order to organize the findings from competitor product reviews, I pasted reviews onto post-its using Miro and grouped them by similar themes. This helped me define trends which would soon help me shape some insights from this research. 

After reading through dozens of reviews, I began to see the patterns in customers’ feedback.

I highlighted portions of the reviews and then organized them into four sections: what users say, think, do and feel. With this empathy map, I was able to shortlist the users’ main needs for a subscription management tool.

The next step was to generate insights from the affinity and empathy maps. I took overlapping themes and formulated insights. Below are the insights, which led to my “how might we” question:

  • Organizing subscription costs has helped users manage their renewals.

  • Importing subscriptions needs to be an easy process.

  • Users need to be able to customize how the app works for them.

  • How might we quickly organize subscription data into customizable visuals?

On to the MVP

With the overarching goal in mind, I opened up my red routes template and started thinking about the important features that SubFlow’s users’ would absolutely need in order to get the most value out of this app. 

Then, I drew out the user flows using Miro. This helped me plan out the steps that users would take in order to reach their goal of managing their subscriptions. 

Sketches

After visualizing the user flows, I began to sketch out layouts for the screens. I thought through a lot of options but when something didn’t seem like it would work, I wrote out the user stories on the side of my sketches to bring my thought flow back to the requirements of the user. 

Wireframes

Next, I took my sketches to Figma and built out the low fidelity wireframes. As I was working on these, I was thinking about what questions a user might come across as they navigated the screens. I put those questions onto a test script to validate them through usability tests.

Usability Tests, Round 1

Since I was already thinking of questions while sketching and wireframing, I took my notes and prepared a test script to use in the first round of usability tests. I recruited 5 participants who were subscription customers and scheduled 20 minute tests to understand their experience with the app.

The top three issues that I found during testing were:

  1. Didn’t understand the information in the homescreen calendar

  2. Category page should be combined with subscriptions page

  3. The pause and cancel buttons functioned differently than users expected

In my next iteration, I turned the wireframes into high fidelity screens that also incorporated the feedback from the usability tests. 

High Fidelity Screens, Round 1

My first set of high fidelity screens were made after I put together a visual style guide. I chose colors that supported the brand’s personality. I wanted the logo to depict the colorful labels we often use to organize file folders. While the primary color in the background and cards is light and calming, the label colors add a pop of interest that helps users visually find the label they are looking for. 

The design style I chose has neumorphic shadows create a minimalist look combined with graphics that inspire a realistic look. For accessibility reasons, I was mindful to use these shadows on sections that could still function without the shadows present. 

Usability Tests, Round 2

With the iterations made after the first round of testing, I was curious to find out whether the new solutions would provide a more intuitive flow. I tested with 5 more participants who were subscription customers with the following test script:

The top three issues that I found during testing were:

  1. The calendar on the home screen was not intuitive for finding out upcoming renewals

  2. The subscription page tabs caused confusion

  3. The sections on the add subscriptions page are not defined

    I had some rethinking to do with the way the calendar on the homescreen functioned. I wanted it to be compact and minimal (going with the goal of bite-sized visuals), but I needed a way for users to know which subscription(s) were being renewed without having to click around. 

    I went back to the drawing board, opening up a new page in my Figma file called “playground” to experiment with new components. 

Iterations

Because users weren’t able to immediately understand which renewals were coming up next, I updated the home screen calendar with names of the subscriptions and a bottom sheet that shows more information.

Since the sorting tabs on the subscriptions page were mistaken for payment frequency rather than upcoming renewals, I removed them and included a sort and filter option within a bottom sheet.

And because users thought the “Add New” page offered only one option adding a subscription, I created 3 distinct sections with headers to make the features clear.

Key Learnings and Next Steps

  • To make sure this MVP serve its users well, I would need to conduct another round of usability tests to understand if my iterations improved the confusions from before or added any new ones. 

  • I learned that organizing data for a product as complex as a subscription management app requires many rounds of testing and iterations because users have unique needs for different situations. 

  • Balancing functionality with aesthetics was a challenge for this project due to the complexity of the data that needed to be organized. I found it useful to sketch out ideas and then pair them with user stories to make sure those ideas met users’ needs.

Previous
Previous

Helping parents sift through hundreds of bedtime stories in minutes

Next
Next

Helping a Naturopathic practice optimize their homepage