Responsive Cooking Instructions Website

Designed as a part of Google's UX Design certificate​

Project overview

The product

To design a responsive website with cooking instructions. The main requirement: robust searching possibilities.

Project duration

January 2022 – March 2022

The problem

Recipes websites do not usually have an efficient recipes searching system. Therefore the interviewed users prefer using google search.

The goal

To design a webpage with an efficient searching system, integrating both keyword search and filtering.

My role

I conducted the design process from start to finish.

My responsibilities

  • Conducting interviews
  • paper and digital wireframing
  • low and high-fidelity prototyping
  • conducting usability studies
  • accounting for accessibility
  • iterating on designs
  • responsive design

Understanding the user

Summary

I  conducted four user interviews, which I then turned into empathy maps to better understand the target user and their needs.

Outcome

First group of users

Wants
an efficient way to find
reliable cooking instructions with
ingredients they have at home on
appropriate skill level because they want to
cook quickly.

I concentrated on this group.

Second group of users

Wants

a feed of

high quality recipe instructions,

because they want to

get perfect in cooking.

 

This was a suprise result.

User pain points

1. Long intros

Advertisements and  long intro texts on recipe pages.

2. Bad recipes

Unreliable recipes and long lists of unavailable ingredients.

3. Searching problems

Confusing searching systems on webs.

4. Accessibility

Small images in webs.

Personas & user statements

First group of users

Jane is a busy working mother who needs an efficient way to find reliable cooking instructions with ingredients she has at home on appropriate skill level because she does not want to spend too much time searching.

Second group of users

Lenka is an artist with a passion for cooking who needs an easy way to find inspiration because she wants to cook new meals and get better in cooking.

Competitive audit

Competitive audit revealed the following opportunity –  create a webpage with recipes that:

  1. encourages users to rate recipes
  2. has systematic and clear searching options (e.g. like nay.sk) offering multiple parameters
  3. has open, clean design with sufficient blank spaces

Starting the design

Sitemap

Ideation

Crazy eights

Sketches - Paper Wireframes

How Might We...

From Standford University

Point of view statement (POV): Jane needs to make this new cake. She needs to find a recipe quickly but she keeps finding either recipes with too many strange ingredients or too simple. The one she finally finds works out terribly.

Amplify the good: How might we help Jane be more spontaneous and  improvise?

Remove the bad: How might we remove all the bad recipes from the internet?

Explore the opposite: How might we turn a recipe on inappropriate skill level, with impossible ingredients into the most exciting cooking experience ever?

Question an assumption: How might we help Jane not cook at all?

Go after adjectives:

  • How might we turn strange ingredients into funny ingredients?
  • How might we turn a too simple recipe into a challenging recipe?
  • How might we turn terrible result into fantastic result?

Identify unexpected resources: How might we use the time browsing on the web for something different, e.g. asking a friend for a recipe?

How might we borrow missing ingredients from neighbors?

 

Create an analogy from need or context: How might we make searching the web for a recipe like solving a puzzle?

Play POV against the challenge: How might we make the recipe searching experience like something Jane is looking forward to?

Change the status quo:

  • How might we make Jane’s husband look up the recipe and cook?
  • How might we make looking for recipes real fun?

Break POV into pieces:

  1. How might we filter out unreliable recipes?
  2. How might we only offer recipes with ingredients Jane has at home?
  3. How can we offer only recipes on an appropriate skill level?
  4. How might we give Jane more time?

 

Digital wireframes

I prioritized robust
  • filtering
  • searching
  • ordering
possibilities.

Screen variations - Responsive Design

Desktop, 1920 x 1280 px

iPad, Nexus 9 – 1

iPhone 6, 7, 8, SE – 1

Low Fidelity prototype (desktop)

Usability study - Parameters & Findings

  • un-moderated usability study
  • 5 participants
  • Slovkia (remote)
  • 5 mins duration

 

1. Prototype

All users were frustrated about the elements being static, i.e. not being able to select or change anything.

 

2. Search flow

An overwhelming majority of users did not use the expected user flow by selecting a category first, but instead they selected “Search recipes” from the upper menu.

3. Keywords

Most users start their recipe search by typing keywords.

Refining the design

All usability study participants were frustrated about the prototype being completely static, so I made the HiFi prototype more dynamic, e.g. allowing check-boxes to be checked.
Most users started their search typing keywords, not by choosing category. So I changed home page accordingly.

Accessibility considerations

1.

I made fonts sufficiently large to be well readable.

2.

I used different headings to make the user flow on pages clear.

3

I chose colors to pass the WCAG AA standard.

High Fidelity prototype (desktop)

Final designs (desktop and mobile)

Going forward

Takeaways

Impact

Our target users shared that the design was intuitive to navigate through, more engaging with the images and colors, and demonstrated a clear visual hierarchy.

What I learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next steps

1.

Conduct follow-up usability testing on the new prototype.

2.

Motivate users to give feedback

3.

Add features for the second group of users, who want to get better in cooking.

 

Menu & ordering app for a cafe

Home Schooling Slovakia