Shoppable Recipe Page:
Designing a Seamless Moroccan Cuisine Experience for the E-Commerce Platform Casablanca Market.
Project overview
Casablanca Market’s Shoppable Recipes redefine how users explore and shop for Moroccan cuisine essentials, making the process effortless, inspiring, and accessible. By seamlessly integrating spices, condiments, and cookware, the platform enhances the cooking experience, turning every recipe into an engaging and stress-free culinary journey.
My Role
Founding Product Designer: Strategy, UX Research, UX Design, Wireframing, Mockups, Prototyping, Usability Testing, UI
Collaborators
Lean team: Lead Software Engineer, Product Manager, Product Designer
Time
July - September 2024
Situation / Context / Problem
Casablanca Market’s marketing and support teams identified a growing number of customer complaints: users who discovered recipes via social media or promotional emails struggled to locate the same recipes on the website.
Our data revealed that due to poorly structured or hard-to-find recipe pages, we were losing approximately 25% of potential engagement and experiencing up to a 15% drop in conversions compared to competitor sites with more intuitive recipe page experiences. Additionally, we estimated a 20–30% loss in website traffic, as frustrated users abandoned our platform in favor of alternative blogs, websites, or competing brands. Some users even unsubscribed from our social media channels and weekly recipe emails.
Historically, recipes were shared exclusively via email newsletters and social media, leading to scattered, outdated, or broken links whenever product pages changed. This eroded user trust and made it difficult for prospective customers—especially those arriving from paid ads, organic search, or email campaigns—to explore our Moroccan food offerings further.
The goal of this project was to design a mobile-first recipe page template that would act as a dedicated landing page for visitors from email subscriptions, social media posts, or online ads. This solution aimed to enhance user experience, drive higher engagement and satisfaction, and ultimately increase conversions.
Defining Design KPIs
Discoverability of the Recipes
Increase recipe-finding success rate by 25% (users locating recipes within 1–2 clicks).
User Satisfaction
Achieve a 4.5/5 average recipe-page rating.
User Engagement & Conversions
Boost recipe-page conversions by 15% (add-to-cart/completed purchases vs. page views).
Adoption
Increase personalized cooking tips/newsletter sign-ups by 20%, tracking new sign-ups from recipe-page interactions.
Outcome
Discoverability of the Recipes
All participants (10/10) easily located recipes. Some cited the dedicated "Recipes" link in the main navigation as the key improvement, while others highlighted the “Explore Popular Moroccan Foods & Recipes” CTA on the homepage as their main inspiration for exploration.
User Satisfaction
80% of participants rated the recipe page 5/5, while the remaining 20% gave it 4/5, resulting in an average rating of 4.8/5—demonstrating the overall strength of the new design.
User Engagement & Conversions
80% of users placed an order after exploring the Shoppable Recipe Page.
90% said they would recommend Casablanca Market’s recipes to friends and family.
70% reported that the recipe page inspired them to explore Moroccan cuisine further and shop for additional ingredients or cookware.
Adoption
80% expressed interest in subscribing to custom recipes and cooking tips based on their prior orders.
Beyond these quantitative results, qualitative feedback emphasized how the new interface improved recipe discoverability. Users appreciated the tabbed format, which made it easy to switch between ingredients, instructions, and recommended products—reducing confusion and allowing them to focus on the details they needed at each step. Test participants also valued the convenience of shopping for ingredients and cookware directly from the recipe page, with many enjoying the helpful suggestions for complementary recipes.
Here’s how we got here:
Research
To inform our design solutions, we began with secondary research into best practices for recipe-driven e-commerce. A competitive audit revealed that many competitors effectively used recipe pages to drive sales, an area where Casablanca Market was falling behind.
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.
We then conducted user interviews with 10 existing customers, validating the urgency of the problem: 100% struggled to find recipes on our website.
Key user pain points:
High Demand, Low Supply – Limited beginner-friendly Moroccan recipe sources with clear structure, ingredient guidance, and cookware recommendations.
Poorly Structured Recipe Pages – Many Moroccan food blogs and websites suffer from cluttered layouts, intrusive ads, and confusing formats.
Too Complex for Beginners – Many recipes feel overwhelming, discouraging novice cooks.
Authentic Ingredient Sourcing – Users struggle to find high-quality, ethically sourced Moroccan foods & cookware and need a trusted guide.
Lack of Personalized Ideas – Customers don’t maximize ingredients & cookware they’ve purchased, highlighting the need for tailored recipe recommendations.
Solution & Ideation
Drawing on our research findings, we decided to create shoppable, mobile-friendly recipe pages that would act as landing pages for visitors arriving from social media, email, and paid advertising. Below are the main challenges we identified and how we approached them:
Challenge 1: Creating an Easy-to-Follow Recipe Structure
Key Question: How might we design a mobile-first recipe format that is clear, structured, and user-friendly?
Recipes contain multiple elements—instructions, ingredients, cookware, dietary info, substitutions, and media (images/videos)—which can easily overwhelm users. Many described existing recipes as messy and difficult to navigate. Our challenge was to ensure recipes were mobile-friendly, intuitive, and easy to follow.
Challenge 2: Integrating an Intuitive Shopping Experience
Key Question: How might we seamlessly integrate product recommendations into recipe pages to drive engagement, conversions, and customer loyalty—without feeling intrusive?
While some competitors, including Instacart and Safeway, offered shoppable recipes, their designs varied, and it was unclear whether they were truly intuitive and helpful for users. To address this, we tested multiple design iterationsto determine the most effective and user-friendly approach.
3 Iterations
We prototyped three distinct mobile-first recipe page layouts to identify the best compact information architecture that:
✔ Provided all necessary information without overwhelming users
✔ Was intuitive and easy to use
✔ Could be scalable as a template for future recipes, cooking tips, and tutorials
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. High impact, low effort for the software team, making it an attractive option
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, ratingsa, 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
A moderated usability test revealed that the Tabbed Layout was the most intuitive and enjoyable for users—though it still required refinements. The most important observations were:
Placement of Featured Products – Users preferred ingredient lists near the top, with shoppable items appearing after they had seen the full list. This made product recommendations feel like a helpful suggestion rather than a pushy sales tactic.
Desire for More Suggested Recipes – Participants wanted side-dish pairings, related recipes, and additional content to further explore Moroccan cuisine.
Delivery Speed Concerns – A major insight from testing: Some users wanted to cook on the same day they found a recipe. This highlighted a previously overlooked need for quick delivery, pickup, or local store availability.
UI Patterns Iterations: A/B Testing
Before finalizing the design, we conducted quick A/B tests on key UI elements:
Add to Cart vs. “+” Button – Most users found the standard “Add to Cart” button more intuitive and accessible.
Scrolling Steps vs. Carousel – Users preferred scrolling to navigate recipes, finding the carousel cumbersome.
“Find a Store” Link vs. Button – While users favored a bold red button, e-commerce priorities and discussions with the software team led us to opt for a link. The link remained clearly visible, was less distracting from checkout, and was easier to implement and iterate on as we continued refining delivery, pickup, and store-locator features.
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.
Final Prototype: The Best of All Iterations
For the final prototype, we combined the most well-received features from all three iterations, ensuring the design was useful, compact, and intuitive while effectively addressing the key UX issues.
Key improvements included:
Larger, more prominent tabs for seamless navigation; smaller product tiles to reduce visual clutter; carousels for suggested products and related recipes, encouraging further exploration; accordion elements to neatly store special diets, nutritional details, and health benefits, catering to users with dietary restrictions; a "Locate a Store" link, ensuring users could find ingredients locally; while the prototype successfully enhanced discoverability, engagement, and conversions, we identified the need to further optimize the post-purchase experience.
Moving forward, we plan to collaborate with stakeholders and the business team to refine delivery, pickup, and customer retention strategies.
Takeaways & Next Steps
Key Learnings:
Fast ingredient access is crucial – Users want same-day delivery or pickup options to avoid delays. A "Locate a Store" feature was added, but further optimization is needed.
Users preferred subtle product suggestions, making the experience helpful, not pushy.
Personalized marketing is a huge opportunity – The marketing team saw potential in recipe-based email flows and custom Moroccan cooking learning paths, enhancing engagement and retention.
Next Steps:
Optimize delivery & pickup – Partner with Instacart, DoorDash, and local retailers to improve ingredient accessibility.
Expand post-purchase engagement – Implement personalized follow-ups recommending recipes based on past purchases.
Enhance influencer & affiliate programs – Enable content creators to share and submit shoppable recipes on the platform.
Iterate for scalability – Apply the recipe page template to other content, such as home décor guides and culinary tutorials.