Library - MasterClass
As part of the Consumer Product Design team, I led a redesign of MasterClass’s Library experience to improve engagement and discovery across both Consumer and Enterprise products. This initiative addressed a key insight: Enterprise users sought to browse by skills and goals, revealing an opportunity to evolve how MasterClass organizes and surfaces its content.
Project Details
Goals
Our goals for this project were to create a product catalogue that was easy for users to browse content and enhance discoverability, with the hope that these improvements would increase engagement.
We also wanted to create a clear differentiation between our home page, whose purpose was to discover new content and help users continue watching and engaging with classes they had already started.
Additionally, a goal for this project was to scale our Library design to both Consumer and Enterprise use cases, with the inclusion of tagging content with class categories for our Consumer product and including a new IA structure in skills category tagging and meta data display for Enterprise users.
Process
Design Discovery
To begin this project, I did market research and jumped into early wireframes while our project scope was being set. I discussed these wireframes with my direct Product Manager and Design Manager to discuss differing levels of scope and complexity. I then kicked off this project by having a white-boarding session with a product designer who was working on our Enterprise product to align on perspective.
While aligning with our larger team (including a secondary Product Manager on our Enterprise team) on project goals and timeline, I put together a design brief including a design schedule the team could use to reference major checkpoint meetings and design handoff dates.
Additionally, since this work included the development of a new tile pattern that was intended to be used globally on our web, iOS, and Android platforms, I worked closely with a Design Systems designer and managed his workflow, and created systems alignment for this project.
Design Definition & Iteration
After timeline and scope expectations were set with the team, I worked with our Enterprise designer as we created different wireframes informed by our sketching session. After this stage, I took the lead on design, creating wireframes for both our Enterprise and Consumer verticals, considering both platforms' needs, informed by our Enterprise Designer and team. A main challenge of this project was creating scalable cross-platform designs that would include the needs of both Consumer and Enterprise verticals.
UX Research
One of the main challenges of this project was creating scalable designs that met the needs of both Consumer and Enterprise verticals.
In order to ensure our designs were intuitive for both Enterprise and Consumer designs, I worked with UX Research at MasterClass, who conducted qualitative sessions to validate our assumptions and improve user engagement with content. Based on the results, I made design updates, such as fine-tuning copy usage and refining selected states for mobile.
Final Designs
Design Delivery
After concluding user testing, we held final checkpoint meetings with our enterprise engineering team and leadership for directional sign-off. I then executed final visual designs for Web, iOS, and Android platforms for both Enterprise and Consumer verticals, incorporating our Design Systems' designer's tile pattern. I created specs and collaborated with the engineering team on design questions and QA during the project build.
Results & Outcome
Our Library redesign was launched first as an A/B test for Consumer users, and to 100% of Enterprise users, and then was released to 100% of all post-paywall users.
Client feedback from large Enterprise organizations was positive as we were addressing their needs of browsing content by time and by Skills for Enterprise users.
Since our timeline was condensed for this project, I also explored some visual design improvements we could make for this project to improve visual impact.
Designs included
Desktop web, responsive web, iOS, Android