A startup company launched a media product two years ago. It is based on freemium service model and has a mobile app for both iOS and Android. 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. At this point, the product has been well received and has a healthy user base of free users.
They now need to design an experience that will allow users to subscribe and pay a monthly fee.
Returning free users:
Become paid subscribers in the sign-in flow as well as within the product (once logged in).
New users:
Subscribe to the premium product upon registration in the signup flow.
Before diving into problem-solving, I step back and take a look at industry experts first. Freemium is a common business model with many industry leaders, and they have faced the conversion problem and provide their own solutions. This study helps me to gain a deeper understanding of the issues and solutions.
Spotify, Pandora and AllTrails are the three companies chosen for the study.
Free is the key message to attract users.
Apps do not even mention the premium information during the sign-up process. They focus on getting the users to sign-up.
Negative reinforcement: disrupting the experience.
Some users may be willing to stick with the basic product, however, the experience will be disrupted all the time by ads and other promotions. The negative experience may drive the users to convert.
Positive reinforcement: encouraging conversion with better content and smoother experience.
The users will find out many convenient and quality features are available to paid users only, such as high quality songs or video, member-only contents, downloadable contents, book marks, etc. This lures the free users to convert.
I am an avid comic book reader when I was young, but at that time all I read were printed books. Therefore, I am thrilled to use this opportunity to design the media app as a comic-reading app.
ComicFox is a reading app that provides millions of comics to users. The company’s mission is to help users to find stories they love and enjoy the comics.
To better understand this type of media app, a Heuristic Analysis of Competitors is conducted to help me better understand both the User Interface and User Experience.
The core of a media app is to let the users focus on the contents and have a smooth reading experience.
The most relevant Heuristics would be:
- Flexibility and efficiency of use
- Aesthetic and minimal design
- Recognition rather than recall
- Ashley is a young college student
- She is tech-savvy — she is on her phone for several hours a day
- She is very budget-conscious
- The comic is a very important part of her life - - - She usually follows multiple series
Crunchyroll is a video streaming services provider focusing on animation and comics. It is based on a freemium model, which provides free access to certain content, with advertisements. The paid users have additional features such as accessing all contents ads-free, offline viewing, etc.
Webtoon is an online cartoon publisher that provides free content to its users. It is a platform to view, but also a place to publish user-created content. Some contents need to be purchased with coins.
Spotify is the world’s largest audio streaming services provider for music and podcasts. It is based on a freemium service model, providing free access to content with advertisement and restriction. For the paid customers, they can access to content without interruptions. Spotify’s UIUX design is very intuitive and smooth to help users to focus on the content it provides.
All three Apps provide freemium model services. To distinguish free vs. paid services, disruptive advertisement is usually a good tool to utilize. To attract free users to upgrade to the premium, the advertisement experience shall be disruptive but not too annoying. Spotify provides all content to all users, while Crunchyroll and Webtoon provide exclusive content to paid users. The free products shall be valuable to attract all users, while the contents to the premium memberships shall be special and smooth so that the users are willing to pay the extra.
The moment to provide premium signup shall be at the right place, which is integral with the flow. I am surprised to see that all three Apps do not offer premium sign up during the onboarding process. Maybe attaching users first without deterring them is the priority. All the Apps provide prompts to sign up premium when the paywall comes up, such as advertisements, users trying to download or click on the premium only contents. These are all very natural and smooth with the user flow.
On UIUX design, Spotify did the best on providing flexibility and efficiency of use, aesthetic and minimal design, and providing recognition rather than recall. Its user flow is smooth, providing users the greatest convenience and personalized experience. While the design itself is minimal, users can focus on the contents. For Crunchyroll and Webtoon, while they could improve the aspects being studied, they both did well in providing reminders and instructions that are also tied to their brand identities.
ComicFox has its unique challenges for transforming the business model. The problems I am focusing to resolve are:
- How might we help users sign-up smoothly?
- How might we provide distinctive services for free and premium members?
- How might we attract the free users who are content with the basic services to upgrade?
I put myself into the users’ shoes and list out the possible tasks they want to complete when they are interacting with the App. The Minimum Viable Products are determined based on the opportunities to convert free users to paid services:
- MVP1: Onboarding flow
- MVP2: Home page content-viewing flow.
The user flow diagram is developed based on the determined MVPs. The conversion opportunities are identified as the most important part of the development.
I choose to make a low-mid fidelity design to better illustrate the App and its purpose. After all, if there are only wireframes, it will be hard for the users to imagine and react.
The MVP1 is designed to test the onboarding flow and test if signing-up for premium upfront makes sense. It is designed as A/B testing for comparison side by side.
Flow A is leading to a recommendation page based on user’s input, with CTA to premium sign-up. The intent is to keep the users exploring premiums contents upfront.
Flow B is going straight to a page dedicated to premium functions.
- Flow B is overwhelmingly in favor by the users.
- Most of the users do not mind seeing a premium feature up front.
- Most users want to explore the app as soon as possible and thus want the signup process to be as short as possible
This flow is designed to test out with the free users who did not sign up for premium during the onboarding process. There are two opportunities to encourage users to convert, one is to provide a preview of the premium-only content, and the other is to provide disruption of advertisement during viewing.
- Most of the users agree with the approach of premium-only content and think providing a preview is useful.
- It could be more distinguishable for the premium session.
- Although it is common to display advertisements upfront before viewing the content, users do not like this. And providing a sign-up during the ad seems disruptive.
Fox has many unique meanings in the comic and manga world, mostly from Japanese culture. Kitsune (Japanese Foxes) possesses paranormal intelligence and is often portrayed as faithful guardians, friends and lovers.
The color and logo conveys the brand personality of uniquely diverse, but somehow always familiar. And the brand attributes are bold, smart and hip.
The first version of the high fidelity design is in dark theme. I thought the dark theme would suit the media app - the dark color unifies the colorful nature of all the book covers and could bring the user’s focus to the content.
Well, it turns out that it does not look great - the dark color competes with the contents, makes the app look heavy, and does not translate the brand identities well.
1. Consider the context - dark theme is better to be used in a dim environment.
2. Dark color palette conveys a feeling of style, luxury and elegance which is not appropriate for this particular App.
3. Dark theme does not unify different content types well - text, images, videos, etc.
The second iteration changes to a white theme design, which works great with the branding and the contents. White background has a minimal look to unify all the UI design and also the colorful contents. And white background divert users' attention to the contents.
1. A comic reading App is close to a reading or news app that white background can make users focus on the content.
2. The white background allows minimal color design and unifies colorful front pages well.
3. White background can achieve bold and smart brand identities with one or two primary colors.
1. Onboarding process when user first open the App
2. Content viewing as a free member
1. Continue to refine the UI/UX design and user flow.
2. Add in edge cases such as loading page, no signal page, error page, etc.
3. Complete other supporting functions such as save, search, favorite, etc.
Click the screen to interact with the project prototype.
