Problems

How can we help the users get to the informations they need more efficiently and make cooking experience stress free?

RESEARCH

Interviews

• I interviewed 3 people (24-35 age groups) to find out what they look for when searching for recipes and cooking tutorials.

Competitive Analysis Highlights

• Large image of a recipe to highlight on homepage.

• Most companies have links to order ingredients online.

• Simple and not overwhelming amount of recipe categories in the navigation bar.

MyRecipe's Current Website

Currently, the way the website is organized is inconsistent. The information under "Course" from the homepage doesn't match when user clicks on "see all courses". Information isn't displayed concisely for easy navigation for users and too many contents to scan through.

Pain Points

Too much information

- Overwhelmed by contents on the home page forces people to scroll endlessly or even miss some contents

- Long titles make it hard to scan through the menu

Missing a step

- people mentioned it's easy to skip a step when going back and forth from measurements to steps

- steps are already marked with a check mark and makes it confusing

Saving recipes

People usually have a mental note of what they want to try 

Persona

IDEATION

Created user journey map, information architecture, crazy 8 sketches, and lofi-wireframe sketches.

Drag or click on arrows

Concepts and Solutions

Organizing with the most important categories 

Narrow down on categories to popular and simple lists and change to drop down menu for easy access.

Feature to save recipe for later

Instead of going on other platforms, users can save recipes on the website.

Tags at the photos to differentiate collection, recipe, and video

Marking collections with tags so users can easily know which ones will take them directly recipes and collection of recipes at a glance as well as recipes with videos.

feature to buy groceries from a different platform

preloaded grocery bags and all the users have to do is pay it from other apps and websites.

Lo-fi Wireflow

User Testing&Iteration

Keep it clear at a glance

1.Users missed the filter at first so I created a button so it's easy to discover.

2. folder as a tag was confusing and users thought it was to save so I created a tag with numbers and words so that the users will know that it's a collection and know how many recipes are going to be shown when clicked on at a glance.

Bold and less confusing.

1. Heart was easy to miss so I created a bolder CTA

2. Users wanted to see the video large so I gave it bit more room.

3. users were confused as to if the list on the website was adding the ingredients into the shopping cart so changed the wording to "shop ingredients online" from "add to shopping list"

Before

After

Concise list and helpful tools to save and get groceries just in time for cooking.

Most important part about helping the users get to their recipe was to organizing the list in a simple and concise way.

CONCLUSION

Simplicity and hierarchy are two important design principles when delivering information to users. To help users find recipes more efficiently and easily, I've narrowed the menu down to the basics for a clearer and seamless user experience. I learned in this project that simply removing the fluff and reorganizing the structure of a website can greatly improve the user experience.