Recipe Cards - MasterClass
Recipe Cards at MasterClass were designed to experiment with features that would create new, interactive learning experiences outside of video. We invested in this feature design after completing research that validated users' interest in learning with MasterClass in ways that accompanied video content.
Project Details / Process
Project Goals:
Recipe Cards were designed as a result of research, where we learned that users were interested in and needed materials checklists (like ingredients checklists) for food and gardening classes. To test this feature, we wanted to drive awareness of recipe cards 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 user's needs of following along with a recipe
Reducing user friction around the video watch and recipe follow-along experience.
Role:
Lead Designer, UX, Visual Design
Process:
I started this project by gathering market research and creating various 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
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.
Designs included:
Desktop web, responsive web, iOS
