UX – Cooking for All

A Responsive Recipe Website and App

After becoming allergic to several cooking ingredients later on in life, I discovered how difficult it is to find good recipes online that avoid certain food items. I created Cooking for All to be a recipe repository with a robust search engine, allowing visitors to search for certain dietary limitations (no gluten, for example), or to also search for specific ingredients.

My Role

Project Lead

Responsibilities

User research, design, wireframing, prototyping

User Research Findings

Based on user research I determined that many users are frustrated with many recipe websites that are online today. Some of the feedback I heard about many current recipe websites were:

  • They have too many ads, or other clutter on the page, making it hard to find the things you are looking for.
  • Often have the recipe ingredients far away from the steps, so you have to constantly scroll back and forth.
  • It’s hard to specifically search for a wide array of recipes if you have a particular food allergy.

Site Map

In the wireframe, the robust search is I began the thought process for the app by creating a site map, highlighting that the site would be heavily search-based, with an array of categories the user can filter by.

Digital Wireframes: Desktop

In the wireframe of the recipe page, following the feedback from the usability study, the ingredients and the steps are listed side by side so they can be easily referred to while cooking.

In the wireframe of the recipe page, following the feedback from the usability study, the ingredients and the steps are listed side by side so they can be easily referred to while cooking.

Digital Wireframes: Mobile

The robust search will still be present in the mobile version, however it will be in a flyout menu.

Low Fidelity Prototype

In the low fidelity prototype I highlighted the flow in which a user could use the robust search engine to find a recipe, or instead to view a categorical page and choose a recipe from there, based on pictures.

Usability Study Findings

Usability studies focused on the ease of following the flow of finding a recipe, and if any issues were encountered.

  • Sometimes it was not obvious that you could scroll through recipes in the carousel.
  • When you go from the search box on the main page to the search results, it would be helpful to see what you searched for.
  • It would be nice to see all the possible categories and things that you could search for in one place.

Mockup: Desktop

Based on user feedback, a footer was added after the low fidelity prototype stage, adding a list of many of the categories that could be searched.

Mockup: Mobile

Based on user feedback, changes were made to the carousel. Having the content be split on the left and right provides a visual cue to the user that there is more information that can be paged through.

High Fidelity Prototypes

Impact

“Very well done. Especially the highlights that appear under the navigation features when you hover over it.”

What I Learned

It was interesting to finally learn how to make high fidelity prototypes in Adobe XD, and take into account user research to iterate on these prototypes to make them better.