• Ins
  • Vimeo
  • LinkedIn
cover.jpg

The Lure

The theme of this project is to develop a food editorial website that can provide the users a better experience to find and follow cooking recipes. 

For chefs, home cooks, and travelers to find recipes, food news, and local restaurant reviews. 

RIT Fall 2019

Individual

School Project

Deliverables

Webpage Demos
Mobile Prototypes
Interaction Demos

Tools

Adobe XD CC

Adobe Illustrator

Photoshop

After Effect

InDesign

Baking
 

Problem & Solution

Problem

According to my research, most food recipe websites have problems with the layout, especially the homepage and recipe pages. Because these pages always have lots of information, they are hard to organize. 

Target

For chefs, home cooks, and travelers to find recipes, food news, and local restaurant reviews. 

Solution

A good layout will provide users a better experience to find and follow a cooking recipe. 


Design a clean and easy-to-follow homepage and provide users a better browsing experience. Develop a side navigation and pin menu for recipe pages to guide users step by step. 

Interaction Design 

Homepage Prototype

The homepage includes 4 categories: 

  1. Featured Food News 

  2. Featured Daily Recipes based on users' search

  3. Featured Restaurant Reviews based on users' location

  4. Featured Travel Food based on users' travel search

There is side navigation on the left side of each category to guide users when they scroll down.  

On the homepage, differentiated categories by background colors and shapes. Add hover state for images and types, so it is easier for users to choose which article or recipe they want to click and save. 

hover state for images to guide users

tags for recipe classification 

side navigation for each category and makes it easier to follow

hover state for article and recipe to show save button

 

featured recipes based on user search

tag search and selection options help users to find the recipe they want

special holiday recipes

Interaction Design 

Find a Recipe

Recipes filter by tags .  Tags for the recipe can show what kind of food it is, such as: 

  • food category

  • cooking duration

  • vegetarian food

  • cuisine by country

  • cooking technique

  • different flavor 

Users can search and add several different tags to filter and find the recipe they want, or users can add tags from selection options. The special holiday recipe also available for celebrations. 

Add hover state for images and recipes, so it is easier for users to choose the recipe they want to click and save. 

Interaction Design 

Follow a Recipe

The first page provides the chef’s information, the cooking duration, cooking level, and the recipe tags. Users can follow the chef if they like.

 

There is a side navigation bar on the left side of the recipe page to make it easier for users to follow the recipe while cooking.

The button of the ingredients list and nutrition facts fix on the right side, and users can check them any time. The save and share button of the recipe fix on the top right corner, and users can save and share any time they want. 

category menu

horizontal scrolling

Interaction Design 

Mobile Prototype

The mobile homepage provides featured articles for each category. Users can find more articles through the category menu on the top and side. The horizontal scrolling function makes the entire homepage shorter, which is more convenient for a small screen. 

filter for search

fix menu

use the save button without opening the article

 
 

User Stories

As a Home Cook

  • I want to filter the flavor of recipes so I can find the specific flavor recipe I like. 

  • I want to classify recipes by holidays or season so I can find recipes for holiday celebrations. 

  • I want to follow the recipe or the chef I like so I can find them later. 

  • I want to know the cooking time, so I can plan for dinner.

As a Foodie

  • I want to share articles so I can share the food news or restaurant reviews with my friends. 

  • I want to classify articles, so I can separate the critic I wrote. 

As a Traveler

  • I want to filter restaurant reviews by cities to find out which restaurant in my city is better. 

Unresolved Issues

1. Recipe Filter

Users want to classify recipes from many different aspects, such as flavor, country, world area, most popular, season, holiday...

2. Recipe Information

Home cooks always want to know lots of information about the recipes, such as cooking time, cooking level, ingredient list...

3. Save & Share

Users always want to save or share the articles and recipes they find at any time. 

Competitive

Chobani Foodservice

When the users scroll down, a navigation bar will appear at the top of the recipe page to show the step number. 

Milk Street 

Display the ingredients list, nutrition facts, and cooking process at the same time to guide users while cooking. 

Feinkoch

The design is beautiful. It used different dots to classify different kinds of food. 

Comparative

The New York Times

Use lines to separate each article which made the web looks clean but boring. Maybe make some changes to the layout and add some hierarchy. 

Evidence-Based Design 

It uses clean typefaces with different colors to classify different kinds of content and articles. 

Readymag Stories 

This website uses one full page for each content. Scroll down one full page to read another section to make it clean and easy to read. 

 

Approaches

1. Recipe Tags

Create a tag system for users to find specific recipes they need, including flavors, countries/regions, seasons, holidays, etc. 

2. New Layout

Design a clean and easy-to-follow homepage, and develop a side navigation and pin menu for recipe pages to guide users step by step. 

3. Fixed Save & Share

Design fixed save and share buttons for articles and recipes, so users can save and share any time, even without open the articles. 

Initial Sketches

 

Information Architecture

 

Wireframe Flow

Visual Design

Since it is about food, I want it to be clean and joyful. I combine a clean font with a playful font and some pleasant colors for its visual design. I also design line art icons for each category. 

 
 

Low-fi & Grid

Follow a Recipe

Design Iteration

I simplify the recipe page and hide the ingredients list and nutrition facts in buttons on the right, so users can see them when they need them. 


Develop a navigation bar on the left side, and use one full page for each step to make the cooking process easier. 

New

Old

 

Wrap-up

There are already many food editorial websites for users to find articles and recipes. However, most of them are difficult to find the needed recipes.  The recipe pages are full of information and hard to follow. 


In this project, I develop a new layout that provides users a better experience to find articles and recipes and simplify recipe pages for home cooks.

© 2021 by Yinting Fan