MasterClass TV App Redesign
AboutMasterClass—unlock human potential in everyone!
MasterClass, the go-to streaming service for learning from global leaders. TV App saw remarkable growth following a redesign. User retention climbed by 18%, the average session length extended by 25%, and the app's rating soared from 3.5 to a remarkable 4.9 stars.
ROLEMy Role: Principal Product Designer
Tools: Figma, ProtoPie, FigJam, Kap, Gifski, MIRO, Usertesting.com
Skills: ADA, Interaction Design, Information Architecture, Prototyping, Storytelling, Apple TV HIG, UI and UX Principles, Usability Testing, User Interviews, Design System
Platforms: TvOS, SmartTV, ROKU, AndroidTV, Amazon Fire TV, xFinity
THE PROBLEMIt’s been a while…
The design of the MasterClass TV app was three years old and did not incorporate the most recent features, layouts, and functionality or the updated MasterClass brand. Additionally, there was a lack of consistency in the OTT designs across ROKU, FireTV, SmartTV, and tvOS platforms, resulting in a significant amount of effort required for support.
Skills: Information Architecture, User Feedback Analysis, User Interviews, Competitive Analysis (20+ TV Apps)
People Problems*
“Limited new content and poor personalization made me lose interest quickly"
“Navigating the app was confusing, and I couldn't find content that interested me easily, so I didn't spend much time using it"
“Chromecast feature is not working properly”
* Based on the Reviews from AppStore and Google Play, customer support feedback, emails, social.
Validated by Data, User-interviews
Business Problems
Outdated TV App
Expansive to support fragmented TV platforms
Need for Immersive Hero introduction based on Falcon and IH success
We need to reflect the new brand
Address low ratings and feedback from MC members
Minimize Customer Support tickets
market researchUnderstanding the Streaming Landscape
Based on our research, we discovered that the MasterClass TV app primarily focuses on providing a lean-back viewing experience. As a result, we primarily examined streaming TV apps that our students had already installed to better understand their preferences and expectations.
ExecutionProject Strategy
The project strategy played a crucial role in the planning phase, as it outlined the overall approach to achieving the project's goals and objectives.
planningTimeline and Prioritization
We collected various problems from internal research, interviews with MasterClass students, customer support feedback, app store reviews, and business needs. Then we brainstormed and used the Value Proposition Canvas exercise to come up with solutions.
Skills: Prioritization, ICE Model, Planning, Value Proposition Canvas, Brainstorming
This Coda Doc helped the team to stay on track and have clear vision what needs to be build and most importantly: Why?
visualsImmersive Experience
The main feature of the new TV experience was the Immersive Hero. It helped our members to discover full classes.
Design Thinking
Miller's Law
Employing Miller's Law in my AppleTV design improved user interactions by focusing on 7 classes within the immersive hero. This approach simplified choices, increased content accessibility, and led to a more intuitive interface.
Center Stage
The Center Stage design principle enhanced the immersive hero, increasing user focus and engagement. By enabling users to click and start a class directly, it improved quality breadth.
Endowment Effect
Users felt a sense of ownership over their saved classes, strengthening their attachment to the platform. This psychological phenomenon contributed to higher membership renewals.
Immersion From the Start
Collaborating with the Audio, Content, and Marketing teams to create splash screens for TV platforms was a valuable experience. Although it might seem straightforward, navigating legal approvals, sound engineering, and design reviews required significant time. Ultimately, we developed a tailored experience that aligned with the brand's identity and user expectations.
I just downloaded the app
I have an app and membership
Parallax Posters
The parallax effect is important for tvOS as it enhances the user experience, adds visual appeal, improves navigation, maintains consistency with Apple's design language, and increases accessibility.
Tool: Parallax Previewer App for macOS
* Available on tvOS only
Aspect Ratios
I have implemented a 16:9 aspect ratio for the video player page and a 2:3 poster for the class page destination, as opposed to using a single aspect ratio. This enhancement has improved navigation predictability and, based on our A/B testing, resulted in a 7% increase in the speed at which users locate the desired content.
Immersive Class Pages
A video immediately captures users' attention, making the class page more engaging and encouraging students to explore further. This led to more minutes watched and 10% increase in click-through rate (CTR)
After trying out different options, we figured out that a 3-second video delay made the biggest impact.
7 TV Platforms
It was crucial to design TV apps that work seamlessly with the unique features of each remote, such as specialized buttons, touchpads, or motion sensors. Considered total 18 remotes.
Validating Assumptions
Utilizing the ProtoPie tool, I successfully tested prototypes with our members to ensure a smooth launch of our updated app. Gradual launching allowed us to gather valuable feedback before fully deploying the app to all members.
The TeamFully Remote Cross-Functional Team
In the middle of the pandemic, I was in charge of the TV app redesign, being miles away from each other, we were able to deliver astonishing product and impressive results. It would not be possible without the most amazing team at MasterClass: Product Managers, Developers, Data team, Customer Support, Content Team, Motion Designers, User Researchers, Marketing, and Third Party Agency as well as the Content and Audio team.
Kris Jenner (MasterClass Instructor)
RESULTSUnited Force - Data on Course!
A cross-functional team united diverse skill sets, fostering collaboration & innovation. This synergy yielded valuable insights and impressive data outcomes.
User Retention58%
Before the redesign, the 30-day user retention rate was 40%. After the redesign, user retention increased to 58%.
Problem Solved: “Limited new content and poor personalization made me lose interest quickly"
Session Duration+25%
After the redesign, the average session duration increased by 25%, showing that the new design is more engaging, and users are spending more time-consuming content.
Problem Solved: “Navigating the app was confusing, and I couldn't find content that interested me easily, so I didn't spend much time using it"
USER RATINGS4.9
Prior to the redesign, the MasterClass tv app had an average rating of 3.5 stars on the App Store. After the redesign, the average rating increased to 4.9 stars.
Problem Solved: Poor ratings and reviews
Next Stepsv1 was Just a Beginning
Overall, MasterClass students provided outstanding feedback, resulting in high ratings and improved metrics. Despite these successes, we recognized the potential to enhance our Immersive Hero feature, drawing inspiration from its mobile success. We discovered that TV users prefer committing to full classes rather than watching short videos. Consequently, we shifted our focus to personalization and category exploration for version 2, aiming to further optimize the user experience.
To be continued…
Now You
“Misha was an excellent collaboration partner for the work done on OTT platforms at MasterClass. He was thoughtful when thinking about how one change would impact all 4 platforms, and eagerly incorporated all user research findings into his designs. By doing so, not only did FireTV remain the platform with the highest minutes watched (which was our north-star metric at the time) overall all 7 platforms MasterClass supported, but all OTT users had the highest retention year over year than any other platform”
— Mary Streech, Product Manager at MC