Create a better way of making a subscription
A user flow improvement case study
INTRODUCTION
As a free media product, InnerCity has already created a healthy user base of free users. The company’s business strategy was to first build a user base by offering a free product, and then evolve the feature set, so they could monetize on a premium (paid) product. Now, the company wants to design an experience that will allow users to either subscribe to the premium product upon registration in the signup user flow or upgrade to premium once logged in.
My role
Visual designer
Interaction designer
Iterating screens with participants
Tool used
Figma
Zoom
Slack
Project duration
20 days/ 90 hours
Challenges
At this point, the product does not provide opportunities for users to become paid users at the existing signup flow as well as within the product. Moreover, users will only be willing to pay for the premium membership with better features than the free experience.
My solution
Since the time budget of this project is tight (around 90 hours), I chose to conduct research by looking at other similar apps. Two rounds of usability tests were conducted to reveal the problems of user flows and increase the satisfaction of future potential users.
Users and audience
The company describes its target users as below:
18 - 24 years old
Very tech-savvy — they are on their phones for several hours a day
budget-conscious
This type of media [music/movies/books] is a very important part of their lives
My Solution
The Process
Project Plan
🎸
Heuristic analysis
🥁
User Flow
🎻
Project Plan 🎸 Heuristic analysis 🥁 User Flow 🎻
Project plan
As I only had 90 hours to complete the project, it was necessary for me to create a project plan before working on the project. I checked the template that Springboard gave to me, and decided to make some changes. Firstly, I planned for more time on the discovery part, as I felt it was the most important part of this project. Knowing users' behavior and learning from other competitors’ products can help me design a better user flow. Secondly, I decided to still work on designing the prototype of it instead of creating mock-ups, since, from my previous designing experience, some serious problems can come up from the interaction screens. Thirdly, I decided to recruit a few participants to test my final product even with the limited time budget, as I need to ensure smooth user flow to avoid losing potential users when it hits the market.
Competitors and Heuristic analysis
Considering the tight time constraints and just need to design the user flow, I chose to conduct competitive research on media apps offered by industry leaders that can help me gain knowledge on common user flow and study the pros and cons of each competitive product to improve our unique user flow. I studied 7 apps, YouTube Music, Amazon Music, Spotify, SoundCloud, Audible, Prime Video, and Netflix.
For each app studied, I created a new account to see how people most commonly subscribe to the premium product upon registration in the signup flow. Then I logged in as a free user and observed the screens to see how to register as a paid user within the product. To avoid repeat work, I took screenshots for each step of this research for further analysis.
-
YouTube Music
Music streaming service
-
Amazon Music
Music streaming platform and online music store
-
Spotify
Audio streaming and media services provider
-
SoundCloud
Online audio distribution platform
-
Audible
Online audiobook store
-
Prime Video
Subscription video on-demand over-the-top streaming and rental service
-
Netflix
American subscription streaming service
Mapping out user flow
Instead of breaking the whole user flows into two parts, which are returning users with free version and new users, I decided to create a user flow including those two, so that I can avoid problems users encounter when redirecting screens. This time I used FigJam file to create my user flow (last time I used Miro to do it), since I wanted to be familiar with most frequently used tools then I can save time in the future when I work on other projects.
Design starts
Hand Sketch
🎧
Low-fi Wireframe
🎷
Hi-fi Prototype
🪕
Hand Sketch 🎧 Low-fi Wireframe 🎷 Hi-fi Prototype 🪕
Hand-sketch screens
Before creating digital screens, I used my iPad to sketch the key screens by hand to provide myself with basic frames. I was provided with some wireframes and tips for the previous free product, and I created the landing screens and homepage with a similar layout when I sketched, to make sure the old users feel consistent with the updated product. I also checked the important notes from the Product Manager and kept those in my mind all the way while designing. To get inspiration from, I spent 2 hours looking at media project already launched, and other redesign products created on Behance.
Creating low-fidelity wireframes
After completing the sketches, I created the low-fidelity wireframes using Figma. I made some small changes on the screens of wireframes, such as moving some design units to left than center, adding a divided line, changing color of tabs and buttons since I want to create dark mode, and changing the font size and color to indicate the difference of importance. Of course, I knew I should not spend lot time designing this font part, so I just made small changes to save time for the next part.
Here I just present some key screens of the wireframes, since they are similar to the sketches I posted above.
Iterations of low-fidelity mockups and prototype
I decided to conduct my first round of usability test on wireframes other than sketch, since I felt they are more real. Then I recruited 5 participants from Slack and conducted usability tests with them. Before the test, I thought that users may feel confused with the faded color (as I get this inspiration from some Asian apps, but the users of this product are from North America). I took notes during each conversation, and sorted the problems I found out by the importance(critical, major and minor), then I made some changes based on the written summary I wrote for the result of the test.
Participants confused about faded color of member-exclusive features
Users reported problems finding out the meaning of those faded colors
Homepage was overwhelming with equal-sized items
Users could be easily distracted and have no idea where to look at for the first time using the application
Users hoped to see the ‘Biggest Hit’ at the top
Users tended to check the biggest hits of the day in a typical user flow
Users felt unhappy with the frequent ads
Ads should only appear on somewhere important and avoid having ads everywhere
Not sure if the ads/photos can be switched
Small size and faded color could make it hard to see the sliders
Wouldn’t read the feature if they could directly click sign in/sign up
Users would jump to the last page without reading the ads
Creating my style
Before starting design, I browsed on Behance and Dribble to find inspirations. As the company’s brand attributes are bold, smart and hip, I decided to use purple colour since it provided users the similar feelings of the brand attributes. At first, I wanted to use two colours as my brand colour, which are purple and yellow. I tried yellow on some secondary buttons and tabs to indicate the tab being selected, but then I decided to only use the purple colour, as two bright colour can distract users’ attention and bring a feeling of messy.
I also looked at the brand personality, which is uniquely diverse, but somehow always familiar, to decide the name of this media product. I chose InnerCity as the app’s name as it balance that tension. Moreover, to make it smart and bold enough, I decided to use dark mode to design this app.
Iterating from testing
After completing the high-fidelity prototype, I recruited 5 new participants to test my prototype. Before the test, I thought users may want to have a skip button on the landing page, as sometimes I want it myself when I was going through those screens. And I was not sure if they felt comfortable with the lock icon, so I included questions regard to their thoughts about the meaning of this icon in my script. I also wanted to know the users feel about the whole product. Does it bring them a feeling of bold and smart? Do I have to make some changes on the colour I choose?
It turned out that some problems users encounter matched my hypothesis, and some other new problems rise up. Based on the findings, I made some changes on the first version.
Users felt the app tried to manipulate them by not having the skip-for-now button
Users said they felt confused by the ‘link’ expression as they were asked to paste the link to go to the pet profile page
Users felt waste time swiping pages
Add a skip button allow users to directly go to the last page
Users felt confused as they were new users of the app
Add a quick quiz letting users pick their artist and music taste
Participants confused about lock icon
Labelling those features with ‘Premium’
A Quick usability test of the third round
Conducting a complete test can reveal new problems and helps me build a better product, but there's always something to change and nothing can become perfect. I conducted the third round usability test after making those changes to check if users still feel confused about the icon. I mainly asked them their feeling about this 'premium' label and if anything stuck. To save time, I reached out to my friends to test with them so I can save time waiting for responses and arranging meetings. Luckily, they knew the meaning of the label for the first time they use the product, and they said nothing stuck when they used the product.
The final product
Project takeaways
Scope and constraints
Before actually working on the project, I thought designing and iterating were important, so I planned to work most hours on those two part and only a fraction of the working hours are given to the research part. However, I find that I am more productive than planned and have a lot of time left. Creating project plans too hastily makes time allocation unreasonable. Conducting deeper research, such as conducting interviews, can make this project even better.
Outcomes and results
Some participants of the tests said that they love the subscription page as it listed the features of the premium so that they can make a decision, others said the number of ads is just right, showing the benefits of premium without being too overwhelming.