UI UX Design
SUBEEFY

Overview

This is the story of Subeefy. A Subscription management App made during a Design Sprint of 5 days. I was lucky enough to be part of a team of 4 talented designers and researchers. Below is more details about our journey!

My Role

UI Design
UX Design
Art Direction

Problem

In today’s booming Subscription Economy, 66% of Americans juggle multiple subscription services, from TV streaming platforms like Netflix or Hulu, e-commerce sites like Amazon, and even meal delivery boxes like Freshly or Blue Apron.

Keeping track of all these subscriptions, costs, and renewal cycles can be a real challenge, and 84% of subscribers vastly underestimate how much money they spend on these service.

Challenge

We wanted to develop a solution that would help people understand the total costs of their subscriptions, while also giving them a platform to manage all of those subscriptions in one place.

designprocess
Design Process

Understand the problem

Our team of four began by brainstorming all possible challenges that people have with subscription management. We also conducted a survey with our potential audience to understand their use of and frustrations with subscription management.

survey-subeefy

Persona

Based on the survey data, we created personas to highlight various user backgrounds and needs. We summarized the critical needs we identified into a hypothesis statement for our app.

Subscribers want a comprehensive platform to view and manage their overall subscriptions but can’t because every app has its own distinct method to subscribe and pay.

subeefy-persona1

User Flow Mapping

We listed our expectations about what the app would be able to do, including a list of questions to keep in mind throughout the sprint. Based on the key items to include in our app, we started mapping out how subscribers would navigate through the platform to successfully manage their services.

popup image

We generated some “How Might We…” statements and used affinity diagramming to group our thoughts and questions. Using dots, we voted to determine which questions in each group were most critical to keep in mind as we went through the app development.

popup image

Ideate & Sketch

Before we could start sketching, we needed to do some market research to identify the most useful features within existing apps. We spent some time conducting this market analysis and took notes on features that we wanted to consider for our own app.

Information Architecture

We started first to organise the content in a way that is effective and efficient for the users. We created a detailed user flow to show all the possible pages and steps that users could take in our app.

popup image

From all the solutions we all had, we took the best one and each worked on sketching 8 variations of our app’s pages in 8 minutes as a Crazy 8s!

popup image

Decide & Storyboard

As it turned out at this point, we had all sketched different pages of the app – so we were able to identify key features that we liked about different pages, but we were also able to combine our sketches into a more complete prototype. As usual, we used dot voting to pick out the features of each sketch that we liked, and discussed areas where our designs could be improved. After dot voting, the Decider selected one screen that was deemed the most critical for inclusion.

popup image

I started sketching a storyboard based on the journey that the user would make when using the app for the first time.

popup image

Prototype

We then conducted a usability test with 5 target audience that we recruited for the sake of getting the best result and make sure that the elements on the screens was easy for them to user and understand. We used Whimsical to build the Low fidelity Wireframe

popup image

Iterate & Test

The final phase arrived! I created the high-fidelity prototype in Figma with the help of a teammate, I started by creating the Brand Guideline of the app and the overall style.

popup image

We finished the high fidelity prototype and we now had to test it. The four of us each tested the new prototype ourselves, and also recruited testers external to our team. After receiving comments from each other and external testers, we spent the day making iterative improvements and re-testing. By the end of the day we had a polished product that we were proud of!

Use the slider below to see the final product

Below is an Interactive version for you to test and see the live Figma prototype in action.

What I’ve learned

The biggest challenge for this project was that we worked as a remote team on three different time zones, which meant that we had to be flexible with working hours and diligent about assigning specific tasks that we could work on independently.

Communication is a an important part in the success of the project, It’s also important to work with the right people that have the right mindsets and complement each others to achieve great results.

The next part of the project will surely be the development of the platform it self. We decided to add some features like the ability to subscribe / unsubscribe services right inside the app, using an API as well as scan and synchronize all the user’s subscriptions using emails and not payment methods.

I would like to thank all the collaborators for their amazing respective jobs done on this project, Thanks to Aaron Nguyen, Raghurai kulkarni and Charlotte Newman

Next Project
UI UX Design
TIMHORTONS