MasterChef Recipe + Rewards Website

A case study in creating a compelling rewards program website

MasterChef Recipes and Rewards Website  | Desktop Website

The Problem / My Role

The Problem

My Role

  • One of two product designers
  • Developer of desktop website

MasterChef is a cooking competition show featured in over 40 countries around the world.

Objectives / Constraints

The Objective

In order to generate interest in MasterChef products, patrons would get exclusive access to recipes featured on the show, as well as other insider news.

The Constraints

  • 5 weeks to research, design and build a minimum viable product.
  • The product would be a desktop website to be adapted to tablet and mobile later on.
  • An existing set of brand guidelines.
  • 30 Recipes to start with more to follow

Problem Statement:

How can the MasterChef brand increase customer loyalty and engagement with their existing consumer base and generate interest in their line of cookware products?

Week 1

Competitive Analysis

After studying several popular loyalty benefit programs,  we proposed the following loyalty benefit features:

  • Warranties
  • News/Updates
  • Offers/Discounts
  • Point system
  • First access to new products, teaser trailers to new seasons, and recipes

A chart showcasing the features of popular loyalty benefit programs.

We then  researched trends and features for the recipe catalogue of this MVP. 

After studying three popular recipe websites, we proposed the following features:

  • Videos of recipes being made
  • Save feature
  • Reviews 
  • Meet the Chef (bio) 
  • Shows  (sorrt function)
  • Recommended / Trending 
  • Expert Tips
  • Newsletter

A chart showcasing the features of popular recipe websites

Week 1

User Interviews

The second step was to interview a number of users to answer our objective questions:

  • What do you look for in an online recipe? 
  • What do you find most and least appealing about loyalty programs?

Target Audience:

  • 60% Female 40% Male
  • Ages 18-55
  • Casual cooks/food hobbyists
  • Participate in loyalty programs
  • Fans of cooking competition shows

"Above all else, I am loyal to brands that are consistent in quality throughout the years."

 - User

Key Insights

I was able to distill the interviews into 5 key insights.

At this point I knew that the success of the product hinged upon:

  • Conveying the value proposition of registering one’s products early on
  • Generate consumer loyalty by creating a recipe and product catalogue that ties back to the show.

Interview Insights:

1.  Clear list of necessary equipment.

2. Detailed and meticulous recipe directions (anticipating what a reader may misinterpret).

3.  Notes from the Chef (tips, advice, and stories before commencing the recipe)

4.  Loyal to brands that are consistent.

Week 1

Empathizing with the user

It was imperative to identify what loyal fans of MasterChef and cooking hobbyists expect from their loyalty programs and online recipe providers.

I chose to organize my insights and observations into an empathy map in order to better understand their pain points, feelings, goals, thoughts, and behaviors.

An empathy map of the MasterChef fan and patron, showcasing their various, pains, frustrations.

The MasterChef fan and patron has a few noteworthy pain points, desires and goals:

  • Users are interested in learning more about MasterChef contestants 
  • Users want more engagement with the show (news/contestants) after the show ends
  • Users want access to worthwhile perks for being a patron of MasterChef products

Week 1

Information Architecture

Keeping in mind the MVP features, I used a card sorting exercise to allow users to identify site’s navigation.

The purpose of this card sort was to generate an intuitive navigation. The activity was done remotely using Optimal Sort.

  • These cards were  sorted by the same users I interviewed. 
  • There was a large  consensus around the information

A Similarity Matrix shows the proportion of the participants who grouped any two cards in the same category.

Week 1

Site Map

The card sorting exercise gave me valuable insight into how users envisioned the structure of this website.

  • The navigation was ultimately categorized into:
  • Landing Page (with Login/Register)
  • “Home” (recommended recipes and products)
  • “Recipes” (recipe catalogue)
  • “Products” (product categories and catalogues)
  • “Newsletter”
  • “Account” (account/general settings).

A site map is a diagram of a site’s navigational hierarchy. It helps keep track of all screens while detailing their relationship to one another.

Upon collecting sufficient data I began to lay out a detailed site map to guide the design.

Initially the site map did not have a “Home” page, however testing revealed that a Home page was necessary to orient the user.

Other changes that altered the architecture:

  • The location of “My Favorites”
  • The addition of a “Home” screen
  • Product category page 

Week 2

Sketches

With the site map laid out, I started to create iterations of hand-drawn sketches before diving into wireframing. The core function of this website is to browse recipes from the show; we had to make that flow as intuitive as possible.

One way we explored  this is by having recipe cards that prominently display the dish and the most pressing info first:

  • Diet
  • Time estimate
  • Chef

Remember: users reported wanting clear recipe directions AND recipes tied back to the show. On hover a video of the recipe being made plays for users to facilitate that connection. 

Sketches helped me explore ideas quickly without committing to detail.

Week 2

Wireframes / Prototypes

Upon testing, users thought the landing page was interesting and they were curious to see more. All users reported the site being intuitive. All users scored a 5/5 on the sites usability however there were three pressing issues:

Hero image on home page with a product registration CTA

Issue 1: Home page had mixed opinions

  • One user thought that the home page looked like an ad, making it feel unwelcoming.  This may be due to the first carousel picture saying “Register Your Product”. 
  • One user recommended the banner be a carousel with recipes instead.

The product category page showing cards with the various names of product collections

Issue 2: The word “Collections” is vague

  • Some users did not understand what “Collections were and where to find products. 
  • The prototype categorized products by which collection it belongs to vs. product type.

The “My Collections” page under Support where users Register their MasterChef products.

Issue 3: Confusion about how to register one’s products 

  • Users thought that the “Register Your Product” on the home page would lead them to register additional products.
  • Most users went to “My Collections” first, they did not realize they had to click on the “Edit” button to register an additional product.

The final set of wireframes before moving onto high-fidelity mock-ups.

Proposed Solutions:

  • Change banner on  home page to showcase recipes.
  • Replace word  “Collections” to “Products” (everywhere).
  • Add an “All Products” category (a compromise between what the users and MasterChef wanted).
  • Creating an “Add” button for registering additional products under “My Collection”.

Week 3

Style Guide

Using the 60-30-10 rule, I decided to implement MasterChef’s existing brand colors into the design proportionally:

  • White the dominant hue
  • Black the secondary
  • Orange the signature accent color. 

The existing color palette for MasterChef’s Brand guidelines

In order to be cohesive, I decided to use variations of only one font, Steradian (Bold, Regular, and Medium).

Header (H1) : 100pt

Header (H2): 40pt

Header (H3): 24pt

Body Copy: 18pt

Button Text: 18pt

The existing typography for MasterChef’s Brand guidelines

Week 4

High-Fidelity MVP

After the first couple rounds of user testing, I was ready to implement the changes to the website. With the style guide in hand, I set out to produce the high-fidelity prototype.  High-fidelity prototypes are ideal for testing.  Another round of testing would clarify  what needs to be fixed.

Flow 1:

Registering User and Product

The Landing page was in flux for the majority of the design. Would we require the user to be directed to the homepage after registration?

We decided to create a concise landing page with a clear value proposition to encourage users to register. 

Flow 2:

Home Page Feed Flow

The initial plan was to for-go a traditional home page and direct users to the recipe catalogue.

However, user testing revealed that the home page was necessary to orient the user and was an opportunity to provide recipe recommendations and news..

Flow 3:

Recipe Catalogue Flow

To tie fans back to the show we added  a “Series” filter, and to encourage use of MasterChef products, we added a “Products Used” filter.

The recipe cards highlight the chef and upon hover reveal other stats about the recipe. A looped video of the recipe plays upon hover as well.

Flow 4:

Product Catalogue Flow

MasterChef insisted on the use of “Collections” as a way of categorizing their products. However, user testing clearly showed confusion with this word.

We compromised by adding an “All Products” category for those looking for a particular product. Testing will be needed to validate this decision. 

Flow 5:

Account/Settings Flow

Initially, the “My Favorites” section (a collection of favorited recipes/products) of the website was part of the main navigation.

Users generally assumed “My Favorites” was under account, so it was moved to the account section. 

Next Steps:

Five weeks was enough to scratch the surface. However, as this platform expands, a few key things need to evolve:

  • A fleshing out of the rewards programs and a point system.
  • The addition of more recipes and products may call for a rethinking of the information architecture.
  • The adaptation of this platform to tablet and mobile (to increase consumer engagement and conversion).
  • Strategies to build a community will ensure visitors come back to the site frequently.

Previous Post

VENT: Virtual Group therapy Case Study

Next Post

PostUp: Rethinking Remote Work

Back to Top