Le Cinéphile

Adding a Subscription Model to a Movie Streaming Site
Role:
UX Design, UI Design
Platform:
Android Phone
Tools:
Figma, Miro, Google Forms, Pen and paper, Marvel, and Google Sheets

The Problem

Le Cinéphile is a streaming service with a library consisting of renowned films, animation, and shows from across the world. For the past 2 years Le Cinéphile has been operating as a free service relying solely on ad revenue as a source of income, but now the company is ready to introduce a paid subscription option for their service along with better benefits for premium users.  

Before this subscription model is rolled out, however, the company needs to adjust the current UI to both draw attention to the new subscription and allow new and returning users to subscribe to this premium model.

See PrototypeAn eye character with a film roll in the middle holding up a button above it and saying "In a hurry? Here is the Final Prototype of this project!"

The Process

Due to time restrictions, it was important for me that I pick the methods that were most effective and most efficient for the task at hand. I chose to perform a modified and condensed human-centered design approach with a heavy emphasis on usability testing and design iteration because I knew competitive analysis would give me a solid head start on the early iterations for this project and I wanted to focus more of my time on how to adjust the subscription solution specifically for use on Le Cinéphile’s service.

The Steps I Took in this Project Organized in the Non-Linear Structure of Design Thinking

The Solution

In order to get users to try out the new subscription a 14 day risk free trial was added to the app. The app's premium options were also priced lower than the streaming competition at a mere $5.99 per month to make sure the price would not be a deterrent for our budget friendly users.

Constraints:

Generating Ideas Through Competitive Analysis

Since there are a large variety of media sites out there that could be of use in competitive analysis I split this analysis into three main groups:

  1. Media groups with a freemium (free and premium) options
  2. Video streaming sites with cinematic and foreign film content
  3. Video streaming sites that did not have similar content and were premium only models

1. UI Inspiration from the Freemium Models

I did the most in-depth comparison of the streaming apps of Peacock, YouTube, and Crunchyroll to focus on:

A Competitive Analysis of NBC’s streaming site Peacock

2. Cinematic Streaming Sites

For these sites I mainly looked at how they were filtering their content and the price of their subscriptions.

3. Other Popular Streaming Sites

I looked at Amazon Prime Video, Netflix, HBO Max, Disney +, Hulu, and Funimation as another baseline as to what benefits premium subscriptions typically offer and how much these subscriptions cost. Overall I found the most common subscription benefits to be:

Gathering Subscription Information Through User Surveys

Since streaming services are a common type of app and we already knew quite a bit about our users at Le Cinéphile I decided to use short user surveys to get users’ opinions on what kind of benefits they wanted from a premium subscription and how much they expected a premium streaming service to cost.

Survey Responses to the Question: What kinds of benefits do you care about when you are looking at subscription plans?

Using Personas to Determine What Users Need from Our App

Although our company already had a persona for the free version of our app, since the app was changing I decided it was a good time to update our main user persona. This tool not only helped me to keep our users and their needs top of mind as I worked, but also helped me to think about areas of opportunity within the app that could help differentiate Le Cinéphile in the already over saturated field of movie streaming.

Persona Takeaways

Synthesizing Discovery Research with an Affinity Map

In order to help me make sense of all the information I had collected during my user surveys and competitive analysis I decided to visually organize the information I collected in an affinity map. By looking at the information in a visual way I was able to discover what benefits in the subscription model should be prioritized. I also learned what price ranges for our subscription were viable options in the competitive market of video streaming.

Affinity Map Takeaways

  1. The main subscription benefits users wanted were: ad free videos, additional content, offline viewing capabilities, and discounts for longer subscriptions
  2. Most users expected a streaming site to cost around $10 and they were willing to pay around $10 for a streaming site
  3. Common filter categories for streaming sites with similar content were: cast, genres, decades, countries, and directors
Affinity Map of Discovery Research: The Pink Sticky Notes are Taken from Competitive Analysis Research While Users’ Survey Responses are Represented by the Other Individual Colors

Examining a Common User Scenario Through Journey Mapping

In order to get an idea of the basic steps a user would take to watch a movie using a free trial and how they would feel along the course of this journey I decided to make a journey map. This helped me to brainstorm how the subscription flow would ultimately combine with the overall main flow of the app: a user finding and watching a movie. It also helped me discern low points that would occur for a user during this flow and how to minimize these pains within the app.

Journey Map Takeaways

  1. The sign up is the most frustrating process for the user
  2. Personalization along with movie and show options is vitally important to the success of the app
  3. The browsing is the most exciting part of the process for the user
A Journey Map Depicting the Persona’s Journey Through the Le Cinéphile’s App

Using User Flows to Integrate the Subscription Flow into the App

Although journey mapping gave me a basic idea of how the subscription flow might fit into the larger movie watching flow, I now needed to get a more detailed idea of how this would happen.  By figuring out the more detailed steps the user would take in the app before creating the app designs it gave me a basic idea of the structure of the pages I needed to add along with some adjustments that I would need to make to the information architecture to add the subscription flow into the current app.

The User Flow for Subscription Within Le Cinéphile’s App

Forming a Solution Hypothesis Through a Sketch Prototype

In order to quickly get my design ideas out of my head and quickly iterate on them I decided to create sketches for the subscription flow I was adding into the app. My main focus was to seamlessly draw attention to the subscription plan for new and returning users in an obvious but not intrusive way.

Why I Chose to Incorporate a Free Trial Hypothesis

I chose to make the free trial a no risk trial because it did not collect the user’s credit card information and it automatically expired. I knew that many free trials ask for the payment information up front and renew automatically after the free trial, but I honestly thought this might be turning users off from trying the subscription and that it might feel manipulative to some users and make them distrust the company more. If this was the case, it could affect how many people try the free trial (and ultimately sign up for the subscription) along with the number of returning users (free users, in particular, who would still bring in ad revenue for the company).

My thinking behind the Free Trial Hypothesis:
Free Trial Screen
  1. Benefits of a Free Trial listed out in a clear way
  2. Emphasis on automatic expiration of the trial to show the user their is no risk to trying the free trial
Free Trial Home Screen
  1. Go Premium is in a highly visible spot making it easy for users to sign up for premium if they want it
  2. Premium picks show what movies/ shows are available only with a premium subscription
Free User Account Screen
  1. Shows the current plan the user has: none, free trial, or premium (Free trial and premium are listed with duration dates)
  2. If the user is not a premium member they have the option to go to the premium sign-up screen through their account
Go Premium Selection Screen
  1. Premium benefits are listed out in a clear way
  2. Users are given the choice between a monthly subscription and a yearly subscription (which is cheaper than the monthly subscription)

Testing My Sketches with Low Fidelity Usability Testing

In order to save time, I decided to go forward and test my sketch prototypes to get fast feedback rather than taking the time to build interactive wireframes. I decided the amount of time needed to build these wireframes would not bring enough of an improvement in user feedback to warrant the time I would spend building them. In order to save even more time I also tested with 5 users using remote usability tests.

Testing Questions

Along with testing the subscription flows I also wanted feedback on the free trial. I used the following questions to come up with the tasks I wanted users to go through during the usability test:

The Subscription Flows that Users Were Tested On

The Results: Free Trial Feedback and Task Completion

Out of the 4 users who were asked (I added the question after I finished testing the 1st user) all 4 users preferred a free trial that did not require entering their credit card information and automatically expired, so my hypothesis that the free trial that auto-renewed was deterring users from trying the premium service was correct.​ In order to make the transition from the free trial to the premium subscription easier for the users who wanted it, however, I learned that I needed to add a seamless transition from the end of the free trial to a prompt asking the user to sign-up for the premium subscription.

"For me if I’m budget conscious I just want to try [the free trial] just cause it’s free and then I’ll do the work of putting in my credit card if I actually want to use it” - User 2

"I do not like providing my credit card details… and the additional fear of  them collecting my credit card information just turns me off from so many services”    - User 4

"I’ve gotten burned too many times [from free trials that auto-renew] and then I have to dig for where to shut it off and so I don’t like giving my credit card information out [for free trials]”  - User 3

High Fidelity Usability Testing

I chose to make a high fidelity prototype because I wanted to get feedback on the interactions as well as the designs. It takes more time, but interactions can cause a variety of usability problems so I wanted to discover as many usability issues as possible before the design was implemented by the engineering team. In order to save time I again tested with users using remote usability tests and since recruiting went well this round and I had extra time I tested with 7 users instead of 5 to get extra feedback.

Main Testing Goals

The Overall Flow Results

Other pain points were discovered during testing, but overall the users thought the flows were intuitive and they did not feel manipulated or pressured into signing up for anything.

High Fidelity Prototypes Before and After Usability Testing

Addressing User Pain Points

Problems: Some of the language for the free trial information was not clear and some of the users were not reading/ skimming the free trial information enough to know what it was about.

My Changes:

  1. I discussed the wording with the user who thought the free trial wording was unclear and together we came up with a more precise phrasing for the free trial information
  2. I made the card color darker so it would help the benefits of the free trial and the buttons to stand out more (and hopefully draw more attention to the wording in the free trial)
  3. I added a header label to make the page less ambiguous
Problem 1: User 1 could not tell what part of the bottom navigation was selected (the white rectangle was not a clear enough indicator that the user was on the home page).
Problem 2: After user testing I discovered I did not have a way for premium users to access their downloads (which was a new feature that needed to be included per stakeholder instructions)

My Changes:

  1. After discussing with a senior designer over the course of multiple iterations I decided I need to have more of an indicator than just color to show where the user was, so I made the text bolder, filled in the icon, adjusted the bottom navigation background and icon colors, and added a rectangle above the icon
  2. I decided to move the account navigation from the bottom navigation to the top app bar to give room for the downloads to have a spot on the bottom navigation
  3. If a new user clicked on this page it would tell them that is a premium only feature (and have a link to the membership sign up page) and thus it would also help to promote the premium subscription
Problem: 4 out of 7 of the users could not tell that they had selected the annual membership

My Changes:

  1. I increased the contrast between the unselected and selected choices to make it more obvious which choice was selected and after discussions with a senior designer, I decided to add gold to highlight the selection border
  1. Instead of the selection acting like a button being pushed in I changed it to act as if something were selected and picked up (the selection became lighter instead of darker)
  1. The check mark was added to increase the accessibility of selecting an option as it gave an indicator besides just color of what was selected
See Prototype

Outcomes and Results

Over the course of my allotted project time I came up with and designed a solution for how to implement a paid subscription seamlessly into the existing app of Le Cinéphile. Although the Le Cinéphile design team will need to do more usability testing before the premium subscription is rolled out (to verify the new changes helped with the usability problems discovered during my usability testing), the fact that 100% of the 7 users were able to complete the main subscription tasks means the current flows are a viable solution to the implementation of a subscription model. I also managed to come up with a solution that met the business goals of helping users to subscribe while still maintaining trust with our users by avoiding trapping them into paying for a subscription they did not want after the free trial. It is after all more cost effective to maintain users' trust than to gain it back.

My Learnings

An eye character with a film roll in the middle saying "Thanks for reading!"