Taste Of Home - Recipe Product Page

This project was to redesign a recipe page to optimize it for search engines, increase revenue from affiliate links, and create a clean, user-friendly layout.

Role

Product Design Lead

Timeline

4 months

Impact

Affiliate Revenue is up 92%

a cell phone on a table
a cell phone on a table
a cell phone on a table

The Problem

I've listed some of the issues that were causing the friction, and what stands out to me as the main pain points are the following:

  1. 1. The info and recipe didn’t show right away.

  2. The content is pushed all the way to the bottom.

  3. Users must click the "View Recipe" button to reveal all the elements.

  4. The order of the content is confusing

  5. The writer’s quote (Romance) took over the space above the fold

  6. So many lists on the submenu

  7. The next recipe already showed up without even seeing the actual recipe

  8. Revenue is affected by them because ads are breaking

Who have we talked to?

To validate my assumptions, we did a usability test on 15 individuals who are typical users of recipe sites. Since I have only gathered 15 participants, we break these into 5 types of personas.

  1. Angeli - 37, studied culinary arts, married, stay-at-home wife, loves cooking for her husband and parents, is an enthusiastic party planner, and enjoys hosting parties at her house.

  2. Michelle - 33, enjoys baking as a hobby, loves to bake every week, and gives baked goodies to friends and co-workers.

  3. Lisa, 45, stay-at-home mom, self-taught baker (and aspiring chef) and baker entrepreneur, started her baking business online.

  4. David, 32, is a football player who loves to cook for his family in his free time. He also runs a small food business selling baked Takoyaki.

  5. Marilou - 65, retired and loves to host parties and cook for 10-20 visitors.

Usability Test

To discover opportunities to improve a user's experience, we conducted a usability test that involved completing a simple online task, such as viewing a recipe detail, on their phone in mobile view, while recording the session. The interview script consisted of 3 sections: pre-task questions, performing the task itself, and post-interview questions.

Users Responses

As I watched and listened to each recording, I took notes of some quotes from each interview. Below, you will find the user responses to my questions and any notable user quotes.

The Problem

I've listed some of the issues that were causing the friction, and what stands out to me as the main pain points are the following:

  1. 1. The info and recipe didn’t show right away.

  2. The content is pushed all the way to the bottom.

  3. Users must click the "View Recipe" button to reveal all the elements.

  4. The order of the content is confusing

  5. The writer’s quote (Romance) took over the space above the fold

  6. So many lists on the submenu

  7. The next recipe already showed up without even seeing the actual recipe

  8. Revenue is affected by them because ads are breaking

Who have we talked to?

To validate my assumptions, we did a usability test on 15 individuals who are typical users of recipe sites. Since I have only gathered 15 participants, we break these into 5 types of personas.

  1. Angeli - 37, studied culinary arts, married, stay-at-home wife, loves cooking for her husband and parents, is an enthusiastic party planner, and enjoys hosting parties at her house.

  2. Michelle - 33, enjoys baking as a hobby, loves to bake every week, and gives baked goodies to friends and co-workers.

  3. Lisa, 45, stay-at-home mom, self-taught baker (and aspiring chef) and baker entrepreneur, started her baking business online.

  4. David, 32, is a football player who loves to cook for his family in his free time. He also runs a small food business selling baked Takoyaki.

  5. Marilou - 65, retired and loves to host parties and cook for 10-20 visitors.

Usability Test

To discover opportunities to improve a user's experience, we conducted a usability test that involved completing a simple online task, such as viewing a recipe detail, on their phone in mobile view, while recording the session. The interview script consisted of 3 sections: pre-task questions, performing the task itself, and post-interview questions.

Users Responses

As I watched and listened to each recording, I took notes of some quotes from each interview. Below, you will find the user responses to my questions and any notable user quotes.

Opportunities

Based on their feedback, I’ve listed some ways to improve the user experience and find solutions. The following solutions were designed to focus the user on achieving their goals and address real user pain points identified through the usability test.

  1. Making sure that once they arrived at the recipe page, the information they were looking for is there, and there’s no reason for them to waste time doing additional steps.

  2. Design a mobile version with tabs for ingredients and directions to prevent over-scrolling.

  3. The food photo should be placed after the title and star reviews so that users can see what they're going to get.

  4. The prep time and servings icons need to be placed above the fold; users want to know how much time they're gonna spend making the food.

  5. I added difficulty scale icons at the top before reading the ingredients so that they will not be discouraged from cooking or baking.

  6. Test Kitchen-approved and Contest Winners badges should also be displayed at the top.

  7. To make another option, if the recipe is a video, it needs to add a continuous play on scroll.

  8. Making sure info is there before users jump into the next recommended recipe and video

  9. I want to ensure there’s still an ad running that doesn’t break the page. Ad cleaning and restyling.

  10. Icons need to be restyled for website accessibility

  11. Overall, pages need to look cleaner and fresher, which is important for the brand and for sales, and should be easier for our users to navigate and consume. It also provides a baseline for testing new features and optimizing ad placements.

Design explorations and Ideating Solutions

After defining the overall structure, it was time to work on sketches. I created low-fidelity wireframes for mobile devices and conducted user feedback audits. It took a few concepts and revisions until I created a structure that was clear, concise, and easy to use.

  • Experimenting with the placement of the header and advertising, which one will go first

  • Time, serving, and easy level icons were placed after the writer’s name and reviews

  • Food photo after the header title

  • Tab to toggle Ingredient and direction to avoid over-scroll

  • Experimenting with video pre-roll

  • Experimenting with ad placements

Prototype

A. I removed the extra sticky top bar (utility bar) that has the “Save, Share, Next Recipe” options to avoid confusion; I want to be able to showcase the information before users save and move to the next recipe. I also removed the list menu (Recipe, Dinner, Baking, etc.) as it is redundant, since those are already included in the menu navigation.

B. 320 x 50 ad mobile leaderboard

C. Title + Reviews + Contest Winner + Test Kitchen Approved placed on top is because I found out that when people are watching video recipes, they immediately go to the comments section, and they want to know the experience of the other users before they do the recipe. The reviews button automatically scrolls or anchors down to the reviews section

D. Recipe image above the fold

E. Total Time + Servings/yield + Difficulty scale - these icons provide enough information to showcase how much time they're gonna work on the recipe, for how many people, and how easy it is to make.

F. Video recipe continues to play like a preroll


A. Restyled and increased the size of social media share buttons for social engagement.

B. I don’t want to remove the quotes (Romance) from the author because they give a personal approach to the users, so I decided to put this section below the social icons, and if the copy is long, it should have truncation.

C. Rate + Review + Save + Print are re-styled to pass the web accessibility compliance. Added some interaction, the button changed its color to solid on tap/click (hover on desktop)

D. Recirculation metric "Recommended" to create a loyal audience

E. Programmatic Advertising - Background restyled to create a separation from the content

F. Ingredients and directions tab that you can toggle, so users won’t get lost by over-scrolling.

G. New Feature - Branded Ingredients insert as native ad to boost revenue

H. Buy ingredients button for shopping commerce using Chicory, added for both ingredients and directions

I. New Feature - Text Ingredients (click to text) button for user engagement

J. New Feature - Wake-lock function to prevent your screen from going dark while you cook.

A. Test Kitchen Tip module redesigned

B. Tags for SEO focused on keywords – no over-tagging allowed: a single post should only have two or three tags that fit the bill.

C. Recommended Video - to create a loyal audience

D. Reviews/Commenting via OpenWeb has more functionality, better moderation, new revenue stream

E. Programmatic Advertising - Background restyled to create a separation from the content

F. More from TOH - to create a loyal audience


Results on New Features

  • Text Ingredients - In the first week, 35,000 people took advantage of this feature!

  • More engagement on recirc units (recommended, more from etc.) comments/reviews, etc.

  • Affiliate Revenue is up 92% for November, mainly Chicory

  • Highest programmatic ad revenue day at $176,000, the day before Thanksgiving

  • The recipe page has been upgraded to be a WCAG & ADA Compliance Solution- this means that people with visual and hearing impairments can more easily engage with our content.

Other projects

Copyright 2025 by Dazzle Creates

Copyright 2025 by Dazzle Creates

Copyright 2025 by Dazzle Creates