Birdseye Media
Incorporating Premium Subscription Options in Movie Streaming Service
Introduction
Birdseye Media is a free TV and movie streaming service that has a loyal user base. The company wants to offer a premium subscription to increase profits. I have been tasked with designing their interface to include a premium subscription that their users will be interested in acquiring.
My Role
Sole UI/UX Designer. I have analyzed industry leaders, conducted statistical research, and gathered user data through blog posts/reviews. I have built wireframes, built high fidelity designs, and conducted usability tests at each stage of the design process.
Goal
Utilize design thinking to redesign the interface in a way that enables, motivates, and channels users to convert to a premium subscription.
Exploratory Research
Competitor Analysis
I have analyzed YouTube, Crunchyroll, and Pandora to understand common practices regarding premium subscriptions in media streaming applications with free versions. I have paid particular attention to Crunchyroll since it has the highest percentage of premium subscribers (24%) of the 3 services.
Netnographic Analysis
User data was acquired through blog posts and reviews of Youtube Premium and Crunchyroll Premium. Primary reasons for users acquiring premium subscriptions include: removing ads, gaining early access to content, and gaining access to exclusive content.
“Crunchyroll Premium members can watch shows the same day they air in Japan”
“Subscribers get access to bonus content like deleted scenes and director's cuts”
“I had to watch 7 ads to get through the show and then got annoyed into buying crunchy roll premium”
Solution: Incorporating Premium Subscription
User Flow
This User Flow chart represents the possible steps a user could take when accessing the application. Specifically, this chart displays steps for logging in or creating an account, and accessing premium or free versions. Creating this flow chart helped envision the necessary screens that needed to be designed in order to meet user needs and increase business profits by enabling users to acquire a paid premium subscription. The following wireframes, representing these flows, were created to quickly test the effectiveness of design solutions.
Account Creation Flow Screens
The wireframe of the Account Creation flow addresses business goals by prompting users to explore premium upon completion of registration. Similarly, the Sign In flow prompts users to explore premium.
Acquiring Premium Flow Screens
The wireframe of the Acquiring Premium Flow is essential to the business goals because it represents the steps users would take to acquire a premium subscription, like selecting premium tier and entering payment information.
Media Viewer Screen
The wireframe of the Media Viewer screen aims to generate user interest in premium by prompting users to acquire a premium subscription in order to watch the selected content.
Homepage
The wireframe of the homepage aims to generate user interest in a premium subscription by prompting users to explore premium with a highly salient CTA.
Design System
A design system was created in order to maintain consistency across screens. By documenting font size/weight, color palette, and UI elements, screens can be created more quickly and cohesively. Roboto was chosen as the font to contribute to legibility and align with industry standards. Color palette choices contribute to the relaxing feel associated with video streaming and align with brand attributes of bold and smart.
Low Fidelity Usability Test & Redesign
This round of usability testing consisted of 5 remote moderated tests where participants completed tasks in a low fidelity prototype in Figma. The most impactful usability issues had to do with the invasiveness of the premium CTAs/banners, confusion on the Tier Comparison screen, and dissatisfaction with the Payment Details screen.
Confusion on Premium Tier Comparison
Problem : Confusion on Premium Tier Comparison page, caused by inadequate mapping of tier selection buttons to their tier features.
“This doesn’t match. For High, I’d expect the button to be right here (in the High tier column).”
Goal: Improve clarity of relationship between selection button and tier features.
Solution : Radial button to select premium tier placed within the tier column.
Confusion on Payment Details
Problem: Confusion on Payment Details page caused by lack of payment options that users are accustomed to seeing, and lack of clarity regarding what items are in their checkout cart.
“Is this my only option to pay?...I just hate typing in my information”
“Sometimes I’ll go to check out and get instant brain fog, like ‘what am I getting again?’”
Goal: Offer additional payment options and clarify cart information.
Solution: Include Paypal and Apple Pay, in addition to credit card, on Payment Details screen. Display cart information, including selected tier and cost.
Intrusive Premium CTA
Problem: Premium CTA in homepage and banners on media viewing page are causing frustration because they are intrusive.
“It felt very invasive, like I couldn’t get rid of that button (Explore Premium CTA on Homepage).”
Goal: Reduce intrusiveness of Premium CTA and banners.
Solution: Premium page where users can view premium benefits. Replace banners with less intrusive ribbons.
High Fidelity Usability Test & Redesign
This round of usability testing consisted of 2 remote and 3 in person moderated tests where participants completed tasks in a high fidelity prototype in Figma. The most important issues identified are listed below with their solutions.
Motivation Issue
Problem: Users have no interest in exploring premium during sign in flow.
“I wouldn’t Explore Premium from here because I don’t even know what the Premium offers are.”
Goal: Generate more interest in exploring premium during sign in flow.
Solution: Display premium features in sign in flow.
Premium Ribbon Impact
Problem: Users are not noticing Premium Ribbons denoting premium content in feed.
“Continue Watching, Recommended, Popular…how am I supposed to select a Premium title?”
Goal: Increase salience of premium content.
Solution: Place premium content in a separate feed.
Premium CTA Impact
Problem: Confusion regarding how to acquire premium subscription once in the Media Viewer page after selecting premium content.
“I don’t know if you would maybe click on Premium (ribbon)...it did not look like I could click it.”
Goal: Provide a clear method to acquire premium from the Media Viewer page.
Solution: Incorporate premium CTA on Media Viewer page.
Clarity of Recurring Charge
Problem: Frustration due to lack of clarity about whether Premium Subscription charge will be recurring and, if so, when charge will occur next.
“If it’s recurring I’m not sure…am I buying a monthly subscription or weekly or one time?”
Goal: Display whether charge is recurring and, if so, when the next charge will occur.
Solution: Check Box in checkout flow where users can choose to be charged automatically or not. Text displaying when the next charge will occur.
Confusion on Premium Tier Comparison
Problem: Confusion regarding content on the Premium Tier Comparison Page.
“Maybe be more specific with the information, like 2 dollars per month.”
“High, Mid, Low is kind of unclear, I’m not really sure what that means.”
Goal: Improve clarity of content on Tier Comparison Page.
Solution: Reorganize content and place tier information into separate cards.
Prototype
Reflection
In redesigning Birdseye Media, the business goal of increasing profit has been addressed by enabling and motivating users to explore premium subscription options when creating an account, signing in, and trying to view premium content. Usability issues discovered through user testing have been addressed, including lack of interest in the premium CTA, confusion regarding premium tier comparison, and lack of clarity when purchasing a premium subscription. Future steps for this application will include incorporating a free premium trial to increase user conversion, as well as further user testing aimed at increasing the percentage of premium subscribers and improving usability. This process has demonstrated to me the effectiveness of utilizing, and constantly updating, a design system. I have also come to better understand the importance of conducting competitor analysis and gaining inspiration from industry leaders.