Role:
UX, Visual Design
Project description:
Recipe Cards was designed as a part of experimenting with features at MasterClass that would create new, interactive learning experiences outside of video content. We invested in this feature design after completing research that validated users were interested in learning with MasterClass in ways that accompanied video content. Specifically, we learned from research that users were interested in and had a need for materials checklists (like ingredients checklists) for Food and Gardening classes.
Hypotheses and Project Goals:
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 the user need of following along with a recipe
Reducing user friction around the video watch and recipe follow along experience.
Project 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 the design and brand teams, 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.