Shoppable Recipe Page:
Designing a Moroccan cuisine exploration experience for an e-commerce brand Casablanca Market.
Casablanca Market's Shoppable Recipes make exploring Moroccan cuisine easy and enjoyable. Seamlessly integrating essential Moroccan spices, condiments, and cookware, the platform ensures a fun, inspiring, and stress-free cooking adventure.
Project overview
My Role
Product Designer: Strategy, UX Research, UX Design, Wireframing, Mockups, Prototyping, Usability Testing, UI
Collaborators
Lean team: a Software Engineer, a Project Manager, & me.
Outcome:
Delivered Shoppable Recipe Page Template
Received a 4.5/5 rating by users who tested the prototype
Time
July - September 2024
Design Stages:
Problem Statement
Moroccan recipes are in high demand, but there’s no reliable, go-to source for recipes, cooking tips, and recommendations for authentic Moroccan ingredients and cookware. Casablanca Market aims to become the leading Moroccan food brand, but customers are struggling to find recipes or cooking instructions for the ingredients and cookware they purchase, leading to frustration and them seeking alternative cooking websites. Meanwhile, competitors are using shoppable recipe pages to drive user engagement and upsell.
Why should we care?
Moroccan cuisine is considered one of the most popular cuisines worldwide, yet consumers in the U.S. struggle to find high-quality, ethically sourced, and authentic Moroccan ingredients and cookware. CM's mission is to bridge this gap by connecting U.S. customers with Moroccan artisanal products that are organic, ethically sourced, and of premium quality. Our goal is to introduce U.S. customers to Moroccan artisans, their culture, and traditions through authentic spices, foods, cookware, and centuries-old recipes.
Casablanca Market has utilized recipes as a way to provide value and engage customers, but has traditionally done so solely through email newsletters and social media posts. Our existing customers often complain that they are unable to find the recipes they received via email or saw on social media on our website. Additionally, some of the emailed recipes have broken links due to website updates or changes in product and catalog pages.
Solution:
Here’s how I got here:
Defining Design KPIs
Discoverability of the Recipes
How easy is it for users to discover Moroccan recipes on CM website?
User Satisfaction
User ratings for the experience & how likely they are to recommend CM Recipes to their friends & family
User Engagement & Conversions
No. of conversions vs number of recipe page views;
Adoption
No. of users willing to subscribe to personalized recipe/ cooking tips recommendations after exploring the CM recipe pages.
Research
User Interviews
I interviewed 10 existing CM customers. During the interview process, I asked them about their interest in Moroccan cuisine, their level of expertise, how they usually shop for Moroccan ingredients, and their main pain points and frustrations related to Moroccan recipes and cooking. I also inquired about where they find inspiration for recipes and their usual expectations from recipe pages. Finally, I asked them to locate recipes on the CM website—a task that every single user failed to accomplish.
User pain points
Existing CM customers fail to find recipes on CM website!
Users struggle to find authentic high quality ethically sourced, organic non-GMO Moroccan ingredients and good quality, authentic artisanal, handmade Moroccan cookware locally (in the USA).
Existing Moroccan cooking blogs and websites have too many disruptive ads, and often have poorly structured recipe pages. Users reported to be irritated by inconvenient recipe formats, poorly organized content, excessive scrolling, and being overwhelmed by too many irrelevant ads.
Many recipes existing online seem too complicated for beginner cooks, who are just starting their Moroccan cuisine exploration journey, so the users are discouraged to try them.
Many existing CM customers are unaware of all possible uses of the ingredients or cookware they already purchased. They would highly appreciate customized recipes and cooking tips suggestions
Empathy map
Hears
Charlotte loves to watch cook shows and travel shows. She often hears about the benefits of the Mediterranean diet.
Does
Charlotte loves cooking and enjoys trying new recipes. After travelling to Morocco with her husband, she’s now eager to further explore Moroccan cuisine.
Pains
Charlotte couldn’t bring foods, spices, and cookware from her travels. She’s struggling to find authentic, ethically sourced, high quality Moroccan foods and cookware in the US. Plus, she needs guidance on how to use Moroccan spices and cookware.
Sees
Charlotte sees many Moroccan websites and blogs, but many of them are cluttered with irrelevant ads, are poorly structured, lack details on where to source ingredients or cookware.
Thinks/Feels
Charlotte feels nostalgic when remembering her recent travels. She’s excited to replicate some of the dishes she tried in Morocco. She feels energized thinking about how she’s going to surprise her family and friends with new dishes.
Gains
Charlotte hopes to find a go-to online resource for her Moroccan cuisine exploration. She wants a beginner friendly, easy to follow, step-by step guidance, with cooking tips, resources to find and shop ingredients and cookware.
Competitive audit
I learned that the majority of our competitors used shoppable recipe pages, allowing the users to not only easily find the recipes on the website, follow the recipe step by step, but also shop for the necessary ingredients directly from the recipe page!
I reviewed recipe pages on competitor websites, bookmarking the features I liked and disliked to inform our own design solutions:
Key takeaways:
Star ratings & customer reviews to help customers determine the most popular recipes, and to provide or see other users’ tips or feedback.
Clear step by step instructions with images (and/or video) - to provide clear step by step guidance for users.
Featured products tiles - to give the affordance to users to easily shop the ingredients and cookware directly from the recipe page.
Special diet icons - to help users easily assess if the recipe fits their special diet requirements.
Tabs and accordions to organize & structure the content, and optimize the navigation.
Ideation
Based on the research conducted and the business goals discussed with stakeholders and the team, we identified two main challenges to focus on:
Challenge 1: How might we make Moroccan recipes easily discoverable on the CM website? How do we entice users to embark on a journey of Moroccan cuisine exploration?
Solution: Designing for multiple entry points.
Menu: Make recipes discoverable through the Menu Bar Navigation.
Optimizing search: Ensure recipes are easily found via website search and autocomplete.
Homepage: Feature recipes on the homepage, including Moroccan Recipes ( Maybe carousels: Popular Recipes, Trending Recipes), and CTAs encouraging users to explore Moroccan cuisine.
Product page: Suggest recipes related to the product.
Direct access to Recipe Pages: Ensure users can land directly on a Recipe Page from online searches, social media, or email—optimize SEO and make the Recipe Page experience engaging and intuitive.
Challenge 2: How might we integrate an intuitive shopping experience into the Recipe Page that is helpful to the user and supports their Moroccan cuisine exploration journey, while also helping the business increase engagement, conversions, and customer lifetime value?
3 Iterations
From the research I learned that specific and detailed step by step instructions, along with precise ingredients and cookware recommendations, create greater value for the user. Customers who are still learning about the cuisine, and familiarizing themselves with the culture want easy-to-follow, almost foolproof steps, with lots of visual materials.
Based on these insights, I rapidly prototyped three recipe page iterations to test with our existing users and see what iteration they would find the most useful, easy to navigate and shop.
01 : Scroll page
This design uses a traditional scrolling layout with four sections: Ingredients, Kitchenware, Instructions, and Related Content. Products appear in a carousel after each section. This iteration aligns with the traditional recipe page mental model, making it ideal for experienced cooks.
02: Accordion
This iteration features a minimalist accordion layout with four dropdown sections: Ingredients, Kitchenware, Instructions, and Related Content. This design provides detailed guidance: each instruction step is paired with images. The design includes user reviews, ratings, and diet specs. The accordion system minimizes scrolling, letting users expand sections based on their knowledge and skill level.
03: Tabs
This design features a tab system with three sections: Ingredients, Cookware, and Instructions. Users can quickly toggle between tabs to see the ingredients, and follow the detailed instructions. This iteration prioritizes imagery and clear step-by-step instructions, helping users learn and grow in their Moroccan cuisine journey.
Usability Test Study
I conducted a moderated usability test study that demonstrated that the third design iteration (the tabs) was the most useful and intuitive for our users. However, it still had some issues that needed fixing:
One key finding was that users often look up recipes on the same day they plan to cook. This creates urgency for product delivery. For example, in the morning, they might search for a dinner recipe. This means they want the ingredients to be available that day or the next at the latest, unless they are meal prepping or planning an event. Alternatively, they want to find the necessary ingredients at a local store.
Another key finding about the shoppable recipes was that while users liked the ingredient suggestions, placing the featured ingredients at the top of the recipe page felt “pushy” or “too salesy.” Many users said they preferred the ingredients list to be at the top, with product suggestions appearing later in the page.
Users also expressed a desire for more similar recipes, suggestions for side dishes, and tips on recipe pairings.
Additionally, users pointed out issues with recipe structure and navigation: the formatting of the recipe steps demanded constant switching between the ingredients and instructions tabs, redundant cookware listings; a lack of cookware substitution options; and confusing formatting of the ingredients list.
UI Patterns Iterations: A/B Testing
As we discussed possible solutions with my team for the identified issues, we decided to conduct a quick A/B test for certain UI patterns before testing the new design prototype.
Some stakeholders mentioned the new widespread "Add to Cart" button pattern, like the + button used in apps such as UberEats and Instacart. Since this pattern allows for more space on mobile, we decided to test it with our users.
To minimize scrolling and save space on mobile, we decided to test a carousel for recipe steps.
Finally, since we learned that users want an alternative to online shopping for faster food delivery, we decided to test a few versions of the “Locate a store” link/button.
A: Product tiles with traditional “Add to cart” button.
B: Product tiles with minimalistic “+” button.
A: Recipe steps scroll page.
B: Recipe steps carousel.
A: Locate a store link.
B: Locate a store red button.
A: Locate a store white button.
From this A/B testing, we learned that our users prefer the traditional “Add to Cart” button. Although the + button seemed more trendy and had a “cool animation,” users found it less useful for a few reasons: it was unclear how to edit the product quantity (“Do you do it in the cart? But what if I want to do it now?”), and the + button appeared too small for some users. Additionally, older users were confused by this new pattern—it wasn’t an accessible solution that provided full affordance, especially for our current user group.
Regarding the recipe steps carousel: while some users found it more useful, the majority preferred the traditional mental model. They said that scrolling up and down to follow the recipe steps felt more intuitive and easier than using the carousel—it required less cognitive effort, and it was something they were already used to.
Most users voted for the “Find a Store” red button, explaining that it was a very clear CTA. However, after deliberating with our sales team and software developers, we decided to opt for a link instead. It’s still a clearly visible CTA, but it requires less effort to execute. Additionally, the business, being an e-commerce platform, still wants to incentivize users to shop online.
Final Prototype Iteration & Testing
I made sure to address all the aforementioned UX issues, and the A/B test results in my new iteration, optimizing the space to eliminate excessive scrolling while keeping the designs accessible and intuitive. Additionally, I improved some UI elements and components to make the new iteration even more compact and user-friendly: bigger, more prominent tabs, smaller product tiles, and practical carousels for suggested products and other recipes to explore. I also added the accordion element to compactly store useful information such as special diets, nutritional details, and health benefits—features appreciated by some users, particularly those with dietary restrictions.
Measuring the business impact of user prototype testing
Discoverability of the Recipes
All users successfully managed to find recipes on CM website 10/10. The most useful solution turned out to be featuring Recipes in the Menu navigation.
User Satisfaction
80% of users gave a 4.5 rating based on their Recipe page exploration experience.
User Engagement & Conversions
80% of users completed an order after exploring the CM recipe page
90% of users said they will recommend the CM recipes to their family and friends
70% of users reported that the recipe page enticed them to continue exploring Moroccan Recipes and shop for ingredients and cookware featured in the recipes.
Adoption
80% of users said they would subscribe to receive custom recipe and cooking tips suggestions based on their previous order.
Takeaways & Next Steps
Shoppable Recipes: Usability testing revealed that fast shipping or local ingredient availability is crucial for some users. The final design includes a feature to locate nearby stores with the suggested ingredients, which may reduce online conversions but could prevent lost sales to competitors. The business team should evaluate the trade-offs and explore options to make the delivery faster, or consider partnerships with more local stores and delivery services like Instacart, DoorDash, and Uber Eats.
Marketing Integration: The new recipe pages can be integrated into email marketing to enhance the cooking journey. For example, after purchasing Harissa, users would receive an email with several recipes featuring Harissa, encouraging them to try new dishes with the ingredients they have already bought. This personalized approach builds trust, positions CM as the go-to site for Moroccan cuisine, and increases customer lifetime value.
Reusable Design: The layout is adaptable for other content, such as home décor tips, ensuring consistency and maximizing utility. For example, a page on "How to Decorate a Mirror with Mediterranean Tiles" could follow a similar tab structure.
Future Thinking:
To add more value to our users and further enhance their Moroccan cuisine exploration experience while developing and growing the business, I proposed the following ideas to the business and marketing team:
Create a subscription-based service: Moroccan cuisine online course with monthly food bundles delivery.
Develop a subscription model where users receive monthly bundles containing the necessary cooking ingredients along with video, digital, and printed guides featuring step-by-step cooking instructions.
Additionally, we could design an onboarding experience to help users start exploring Moroccan cuisine at a level they're comfortable with. This is crucial as our user base is diverse:
Younger Foodies: the brand is planning to target Gen Z and Millennials who are beginning their culinary journey and are interested in exploring Moroccan cuisine.
Loyal Customers: Cater to our existing customers, including Moroccan expats, retired couples who enjoy cooking together, and stay-at-home moms aged 40+ who have a hobby of exploring Moroccan cuisine.
These audiences have different needs and levels of expertise: some are very advanced, but would enjoy some tips, or fusion ideas, others are just starting their culinary journey. We need to make each and everyone feel included and excited! Therefore, it would be beneficial to design a tailored onboarding experience specifically for Moroccan cuisine enthusiasts to further develop and enrich this service.