Situation & Problem

Casablanca Market’s marketing and support teams noticed a growing number of customer complaints: people who saw recipes on social media or in promotional emails reported being unable to locate those same recipes on the website. Our data showed that, due to poorly structured or hard-to-find recipe pages, we were losing an estimated 25% of potential engagement and seeing up to a 15% drop in conversions compared to competitor sites that offered more discoverable recipe content. Moreover, we estimated a 20–30% loss in website traffic, as users who couldn’t find recipes on our platform turned to alternative websites or even competing brands.

Historically, recipes were shared only via email newsletters or social media, resulting in scattered, outdated, or broken links once product pages changed. This undermined user trust and made it difficult for prospective customers—especially those coming from paid ads, organic search, or email campaigns—to continue exploring our Moroccan offerings.

Solution & Outcomes

We designed a mobile-first, shoppable recipe page to improve discoverability, engagement, and conversions from social and email traffic. The final design achieved a 4.8/5 satisfaction rating, 80% conversion rate, and a 20% increase in subscription intent. Users praised the intuitive layout, seamless navigation, and ability to shop directly from the recipe—making Moroccan cooking feel accessible and inspiring.

Design Process: How We Achieved These Results

We began by auditing the e-commerce landscape and analyzing recipe-driven experiences. A competitive audit revealed a missed opportunity: while many brands used recipes to boost product engagement, Casablanca Market lacked a clear recipe experience.

To validate this, we interviewed 10 existing customers. All participants failed to locate a recipe on the current site, confirming a discoverability issue. Additional pain points included: cluttered recipe layouts, lack of beginner-friendly content, and missed opportunities for personalized suggestions based on purchased items.

Challenge : Make Recipes Easily Discoverable

Solution: Introduce multiple entry points:

• A clear “Recipes” tab in the navigation

• Optimized on-site search with autocomplete

• SEO-optimized recipe pages to capture traffic from social, email, and ads

• Links from product pages to relevant recipes

Challenge : Create a Seamless Shopping Experience from the Recipe Page

Solution: Embed shoppable elements:

• Make ingredients and cookware used in the recipe “shoppable” - easy add to cart feature

• Mobile-friendly IA, to conveniently feature all the necessary information: ingredients, recipe steps, dietary restrictions, cookware used, recommended recipes to pair with, other similar recipes.

• Clear visuals and subtle recommendations to enhance the Moroccan cuisine exploration journey.

Iterative Prototyping

We tested three layouts:

• Scroll: Long-form, linear flow—familiar, but overwhelming - too much scrolling!

• Accordion: Compact, expandable, but a bit too dense, and if not collapsed, again, - too much scrolling!

• Tabbed: Clean navigation for ingredients, instructions, and cookware. Less scrolling, clear information grouping, but possibly intimidating for people who are used to a more traditional recipe layout.

The Tabbed Layout emerged as the most intuitive. However, usability tests revealed the need for further refinement:

• Users wanted ingredients up top and shoppable products later

• Users expressed the desire to see even more side-dish pairings and recipe & food recommendations

• Local availability (or time of delivery) mattered for time-sensitive recipes

  
  

A/B Testing & Refinement

We also tested UI patterns:

• “Add to Cart” outperformed the “+” icon

• Scroll over carousel for cooking steps

• Subtle “Find a Store” link instead of a button to keep checkout flow smooth

  
  

Final Outcome

We refined the tabbed layout with larger tabs, smaller product tiles, and collapsible nutrition info. The result was a mobile-first, shoppable recipe experience that balanced clarity, usability, and conversion goals—all grounded in continuous user feedback and iterative design.

Takeaways & Future thinking

• Shoppable Recipes: Making local or fast shipping options visible is essential for immediate cooking plans. Partnerships with services like Instacart or Uber Eats could fill this gap.

• Marketing Integration: Personalized emails based on past purchases (e.g., Recipes featuring Harissa) can nurture loyalty and boost repeat orders.

• Scalable Design: The same interface can translate into décor tutorials or other lifestyle guides, maximizing development investments.

• Subscription Services: Monthly Moroccan cuisine kits with video tutorials, perfect for both novices and seasoned cooks.

• Onboarding Experiences: Separate funnels for beginner foodies vs. loyal customers, offering custom recipe tips and cultural context to meet varied cooking skill levels.

By creating shoppable recipe pages, Casablanca Market stands to deepen customer loyalty, expand brand reach, and solidify its status as the premier destination for authentic Moroccan cooking in the U.S.