cookery-mock-up-2b.jpg

Client Name

Project Name

Project Description

Cookery Non-Profit*

Cookery App and Website

Cookery wants to create an app and website to provide free information about nutrition and healthy recipes to people who are trying to improve their habits.

Project Goal

To build an intuitive tool that users feel they can rely on for scientifically sound information about nutrition and to find tested healthy recipes.

My role

  • UX Designer

  • UX Researcher 

  • UX Writer

Responsibilities

  • User research

  • Wireframing

  • Prototyping

  • Usability testing

*Project created within the Google UX Design Professional Certificate, Cookery is a fictional company.

User Research

Interviews were conducted to find out what users expect from an app and website offering resources about healthy eating. 


What came out of these interviews is an interest in the ability to customize the user experience, with functions like adjusting a recipe to the desired number of portions and the ability to create a grocery list within the app. Also, the labeling of recipes as fitting dietary restrictions seemed like a desired feature, allowing you to know at a glance if a certain recipe is suited to you.

Two personas were created representing the goals and concerns identified :

Persona 1 - Cookery App and Website
Persona 2 - Cookery App and Website

Starting the design

The main focus during ideation was the way information is organized and the incorporation of complementary features  such as advanced search options and a ‘Grocery List’ function.

Paper Wireframes - Cookery App and Website
Paper Wireframes - Cookery App and Website

Low-fidelity prototypes

Low-Fidelity Prototype - Cookery App and Website

Usability study

Study type

Location

Participants

Length

Unmoderated Usability Study

Canada (remote)

5 participants

30-60 minutes

1

Category names

The category names should better represent their content (replace the words 'Learn' and 'Cook').

2

Flatten the curve

The app should integrate some more explanations where needed to make the learning curve flatter.

3

Add to Grocery List icon

The 'Add to Grocery List' icon should be easier to understand for users, in order for them to use the functionality at all.

Refining the design

Mockup Changes - Cookery App and Website

The names of the two main categories were changed to more descriptive terms : Nutrition Facts and Recipes. This makes it easier to know where to find specific content and helps flattening the learning curve. 

Mockup Changes - Cookery App and Website

In the recipe cards, the 'Add to Grocery List' icon was changed to resemble the 'Grocery List' section icon. The user should be able to more easily make the link between the two.

Final mock-ups and high-fidelity prototype

Mockups

Final Mockups - Cookery App and Website

High-fidelity prototype

High-Fidelity Prototype - Cookery App and Website

Takeaways

Impact

'This product looks and feels reliable. I could see myself using it when I need culinary inspiration!'

- Participant B, usability study

What I learned

Working on a socially responsible project took my sense of empathy for the user to another level. During this project, I was also pushed to think about the way products are used on different devices and the adaptations that are needed. 

The Next Step

1) Further usability testing will be held to make sure the functionalities are optimal.

2) The product will be launched and promoted. 

3) Following user feedback, changes to the design will be made periodically.