Recipe Cards - MasterClass
Recipe Cards at MasterClass were designed to extend learning beyond video, giving members a more hands-on, interactive way to engage with lessons. The concept stemmed from user research that revealed a strong interest in complementary formats that supported and deepened video-based learning.
Project Details
Goals
Recipe Cards were designed as a result of research, where we learned that users were interested in and needed materials checklists (like ingredient checklists) for hands-on classes, like food and gardening classes.
We decided to design for food vertical classes first, as they were one of the most popular types of classes on MasterClass. To test this feature, we wanted to drive awareness of recipe cards that users could follow along with during video lessons to:
Test engagement with non-video features (which we we also exploring in parallel features)
Create product habituation with the user's need to follow along with a recipe
Reducing user friction around the video watch and recipe follow-along experience.
Hypothesis
Adding recipe cards to food classes will help MasterClass users follow along with and save recipes, creating increased lesson watch depth, product habituation via revisiting recipes, and product engagement with non-video content via saving recipes and revisiting them on the platform.
Process
Design Discovery & Iteration
I started this project by gathering market research and creating user flows to frame the project's complexity. Collaborating with my team, including Product and Engineering Managers, we defined the scope to cover the end-to-end user journey for Recipe Cards in food classes on the web and iOS. I iterated through low-fidelity mock flows to determine UX and visual design directions, considering entry points, hierarchy, component design, and retrieval flow. I also worked with cross-functional teams, including product, engineering, Brand, and Publishing, to ensure alignment and incorporate feedback. For visual design, I collaborated with our Design Systems lead to create suitable components and gathered feedback from the design team.
Final Designs
Design Delivery & Outcome
For our final designs, I prioritized video content in our visual hierarchy, which became significant when discussing hierarchy with design and brand teams. I also highlighted MasterClass’s high-quality food photography, enabled recipe card engagement during video consumption, and provided users with the option to save recipes for later on both web and iOS platforms. These decisions were influenced by user research and guidance from our design team.
For this feature’s final designs, I created end-to-end design flows and mocks at visual design fidelity for web and iOS, as well as prototypes and specs. This feature was launched to 100% of users after initial A/B testing.
Designs included:
Desktop web, responsive web, iOS