Recipe Page Design | UX Portfolio

Transforming a recipe page experience for an e-commerce integration:

Redesigning Casablanca Market's recipe pages to empower users on their Moroccan cuisine cooking journey.

Summary

Casablanca Market (CM) is an e-commerce brand specializing in Moroccan food products, kitchenware, and home décor. My role involved redesigning CM's recipe pages and crafting an intuitive, user-centric experience aimed at helping users new to Moroccan cuisine effortlessly explore and shop Moroccan recipes, ensuring an easy, fun, inspiring, and stress-free cooking adventure.

Role: End-to-End Product Design (UX Research, UX Design, Wireframing, Prototyping, Usability Testing, UI)

Duration: July - August 2024

Tools: Figma, Miro, Photoshop

Recipes as the Main Content Marketing Strategy

Casablanca Market utilized recipes as a way to provide value and engage customers, but had traditionally done so solely via email newsletters. The company decided to create recipe pages that would exist on the website, aiming not only to drive SEO traffic but also to allow customers to shop for mentioned items directly.

I was tasked with designing a new experience by creating recipe template pages. I first wanted to draw lessons from the original method of sending recipes through email. The recipe content was often verbose and included numerous links, photos, videos, and instructions, which led to a chaotic experience for the customer, as they had to piece the recipe together. If a customer wanted to purchase items from the recipe, they would need to open multiple tabs, creating a distracting and fragmented experience.

This fragmented approach limits Casablanca Market’s ability to build trust, provide value to users, and establish itself as a leading voice in the Moroccan food niche. As 70% of the company's content marketing is recipe-driven, improving this area is crucial to staying competitive, especially since other brands are already leveraging recipe pages effectively to drive sales and engagement.

The weekly recipe email newsletter, "The Recipe of the Week" is one of the best performing content marketing strategies.

Research

I conducted a competitive audit and user interviews to understand what our target users expect to find on a recipe page and how they experience and interact with the current CM recipe pages.

Competitive analysis

I analyzed the websites of our direct and indirect competitors to see how they designed and utilized their recipe pages:

I reviewed recipe pages on competitor websites, bookmarking the features I liked and disliked to inform our own design solutions.

Direct competitors included companies that sold similar food items and kitchenware, such as Villa Jerada, Mina, New York Shuk, and Verve Culture.

Indirect competitors included brands that sell, feature, and deliver CM products and/or are go-to brands for food, kitchenware, and home décor for our target customers. These included Safeway, Instacart, World Market, Whole Foods, and Williams Sonoma. These competitors are larger in volume and scale, offering an interesting comparison between a boutique approach and a mass-market one.

The competitive audit helped brainstorm potential ideas and solutions for the new recipe page design. Some key takeaways included:

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.

Based on the user interviews, I updated the existing "Passionate Home Chef" User Persona, and crafted a user persona Empathy map to better visualize users' feelings, needs and pain points:

Combining the insights gained through user interviews and the key findings from the competitive audit, I developed the following problem statement:

Problem Statement

How might we design a Recipe Page that empowers cooks relatively new to Moroccan cuisine to confidently explore this rich culinary tradition by providing clear, step-by-step instructions with visual aids, an intuitive shopping experience for essential ingredients and tools, and inspiring content that encourages ongoing culinary exploration?

Design Process

Wireframes

From the interviews I learned that specific and detailed 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 created dozens of wireframes. The wireframes I drew focused on building on the existing recipe pages (first wireframe), and turning them into e-commerce cooking adventure experiences rather than just blog posts:

I explored different design solutions including classic scroll design, tabs, accordion, and considered interactive gamified recipe designs. I also focused on how to create re-usable product tiles and UI patterns that can be flexible for both recipe pages (showing food and kitchen items) but also for home decor items on other pages of the website.

Products Tiles UI Design

In my UI component exploration, I focused on identifying the key elements to include and their optimal placement to ensure users can quickly and easily process product information. I experimented with various information architectures, image sizes, and placements to create optimal and reusable product tiles.

I've designed three potential formats for the featured products component on the recipe page: list, tile, and carousel. User testing will determine the most effective layout.

Hi-Fi Mockups & Prototypes

After multiple iterations and applying the design library styles, I created three recipe page designs to test with CM users.

Iteration 1 : Scroll page

Target User: Experienced cook, somewhat familiar with Moroccan cuisine.

This design uses a traditional scrolling page layout, visually separating four main sections: Ingredients, Kitchenware, Instructions, and Related Content.

Products are featured in a carousel after each relevant section.

This layout follows the typical mental model that most users expect to find online, making it ideal for experienced cooks who know exactly what they're looking for. The product carousels act as suggestions for those already familiar with Moroccan cuisine, giving users the autonomy to explore the products or move directly to the next section.

Iteration 2: Accordion

Target User: Intermediate cook, new to Moroccan cuisine.

This iteration uses an accordion system, prioritizing a minimalistic design and clean structure. It minimizes scrolling by organizing content into four main dropdown sections: Ingredients, Kitchenware, Instructions, and Related Content.

Designed with an intermediate cook in mind, this layout offers extensive guidance for those new to Moroccan cuisine. The accordion structure allows for more detailed product lists and instructions. Each step in the instruction section is illustrated with images to enhance the cooking process.

The Ingredients and Kitchenware sections are product-first, showing suggested products when the dropdown is opened. This iteration also includes user reviews, ratings, and special diet specifications. The accordion design keeps the page clean and allows users to choose which sections to expand based on their knowledge and skill level.

Iteration 3: Tabs

Target User: Beginner to intermediate cook, new to Moroccan cuisine

This design uses a tab system, allowing users to easily switch between three tabs: Ingredients, Cookware, and Instructions.

Similar to Iteration 2, this design organizes content with tabs instead of an accordion. It includes additional information and step-by-step images in the instructions section. The layout emphasizes CM products, clearly showing which items are essential in the Ingredients and Cookware tabs. Users can quickly toggle between tabs to see the visuals of the Moroccan dish and follow the detailed instructions.

This iteration is ideal for beginner-to-intermediate cooks or novice Moroccan food enthusiasts who may not be familiar with specific Moroccan cookware, ingredients, and cooking processes. It prioritizes imagery and breaks down steps granularly, helping users learn and grow in their Moroccan cuisine journey.

Usability Test Study & Iterations

I conducted a moderated usability test with five passionate home cooks new to Moroccan cuisine to evaluate three designs, aiming to identify the most user-friendly version and determine which features were most helpful or problematic.

The majority of users preferred the 3rd iteration (tabs) due to its ease of navigation, though they noted several challenges, that I took into consideration working on the next iterations.

Affinity diagram from the usability test study

Main actionable takeaways from the moderated usability test study:

Information Structure & Clarity:

Users missed a recipe overview and found that the current format of the ingredients list didn’t match their mental model.

Navigation Issues:

Users disliked scrolling up to switch between tabs and found it tiresome to switch back and forth between the ingredients and instructions tabs since the instructions didn’t include ingredient amounts.

To solve these two challenges, I edited the instructions tab and placed it first on the recipe page. When users open the recipe page, they can immediately see the recipe overview, special diets, and easy-to-follow illustrated steps.

I also modified the instructions to include the exact quantities of each ingredient at the relevant step, allowing users to remain on one tab instead of switching back and forth.

Additionally, I added a "back to top" button that appears as users scroll down the page:

"Salesy" Ingredients Tab:

The product placements at the top of the page felt too pushy for some users, disrupting the recipe experience.

I made the “Ingredients” tab a second tab, with a user-friendly ingredient list prioritized first, followed by shoppable ingredients:

Redundant Cookware List:

The presence of obvious cookware (e.g., cutting board, knives) cluttered the page, and the long list discouraged some users from trying the recipe.

To address redundancy, I refined the third tab, "Tools," to display only specific Moroccan items (e.g., tagine, heat diffuser) needed for the recipe. This tab also includes substitution options and a carousel with additional cookware tools that might be useful, optimizing the user experience and making the page less intimidating.

Demand for More Recipe Recommendations

Users wanted more suggested recipes, side dishes, and pairing tips to continue their exploration of Moroccan cuisine.

To meet the demand for more recipes and cooking tips, I added complementary Moroccan recipes that pair well with the featured recipe, followed by related content such as cooking tips and information on how to care for Moroccan cookware. These are presented in a carousel format to display more content while minimizing scrolling.

Shopping Behavior Insights:

Users reported typically looking up recipes on the same day they plan to cook, creating urgency in product delivery. While they appreciated product suggestions, users mentioned that they usually prefer to shop locally, unless they are planning to make the recipe for a special occasion and are able to wait for the ingredients to be shipped within 5-8 days.

Regarding the challenge of fast ingredient shipping, this issue needs further discussion with stakeholders. For now, I’ve added a "locate a store" and "shop the recipe on Instacart" link to help users find the ingredients they want to get faster:

Additional improvements

Additionally I improved some ui elements & components to make the new iteration more user friendly:

More prominent tabs

Smaller special diets icons. I also added the accordion element to compactly store useful information such as special diets, nutritional details, and health benefits—features appreciated by users, particularly those with dietary restrictions.

Results & Takeaways

1) Shoppable Recipes:

Usability testing revealed that fast shipping or instant availability of ingredients nearby is crucial for some users. To address this, the current design includes options to locate nearby stores or shop the recipe on Instacart. While this could drive traffic away from our site, not offering it might result in lost sales or customers to competitors. The business team needs to weigh these pros and cons and explore additional partnerships with stores and delivery services to provide more shopping options.

2) Marketing Integration:

The new recipe pages can be integrated into email marketing to enhance the customer’s cooking journey. For example, after purchasing Harissa, users would receive a recipe email linking to the recipe page, encouraging them to try a new recipe with the ingredients they already bought. This approach fosters a deeper connection with the brand, builds trust, establishes CM as a go-to website for Moroccan cuisine, and increases customer lifetime value.

3) Reusable Design:

The new page layout can be adapted for other content, such as home décor tips, maintaining consistency across design and maximizing its utility. For example, a page on 'How to Decorate a Mirror with Mediterranean Tiles' could benefit from a similar tab structure, including Instructions, Products, and Tools.