Yara, a voice assistant for Yummly.

A conversational interface for cooking, shopping, and meal planning, built on Yummly's existing recipe platform.

THE ROLE
Sole designer
UX research
CUI design
Motion
TIMELINE
13 weeks, Spring 2024
PROGRAMS
Figma
Illustrator
After Effects

THE BRIEF

What can a voice assistant do before, during, and after a meal?

CONTEXT

Home cooking is spread across a whole day in fragments — a defrost that needed starting in the morning, an ingredient bought last week that may or may not still be good, three components finishing at three different times. Very little of it happens while standing still, looking at a screen.

Cooking is rarely the only thing happening.

YARA'S KINETIC STATES

Yara's states were designed to be easily distinguishable and approachable so that talking to the app in your own kitchen doesn't feel strange.

THE PROBLEM

Cooking is the worst possible time to use a phone.

Greasy screens. Displays that time out mid-step. A glance away that lasts long enough for something to burn.

But 24 surveys and 4 interviews turned up a second problem underneath that one. Nobody struggled with following an instruction. They struggled with instructions running in parallel — and with preparation that needed to happen hours before anyone turned on a burner.

Three concerns came up repeatedly: whether an ingredient had spoiled, losing track of one dish while attending to another, and forgetting to defrost or marinate ahead of time.

I don’t want to touch my phone right now.

Screens go dark mid-step. Phone gets greasy.

I forgot about the pasta.

Three things running at once, and one of them needed defrosting hours ago.

?

Is this still good?

Herbs from some point last week. Not sure how to balance food waste from food poisoning.

THE SOLUTION

Yara is a voice assistant built into Yummly.

The goal was to provide help at the right moment rather than when it's asked for.

FEATURES

01

Recipes from what's already in the kitchen

Yara suggests recipes based on inventory, past ratings, and current cravings, and flags ingredients running low or nearing expiration.

02

Timing handled in advance and in the moment

Timers are set from the recipe rather than by request. Pre-cooking steps — defrosting, marinating, picking up an ingredient — surface hours or days ahead, pulled from the Yummly meal plan.

03

Adjustments mid-cook

Recipes adapt to dietary preferences, which persist for next time. Yara converts measurements, pulls up technique videos, troubleshoots problems like food sticking, and adjusts connected appliances directly.

DEEP DIVES

You're just looking at a snippet of the design process.

DEEP DIVE 01

A supporting role

How can Yara build on the recommendations and meal planning Yummly already does, rather than duplicate them?

DEEP DIVE 02

Recovery mid-cook

How can Yara step in when something goes wrong, without taking the cook’s hands or attention?

DEEP DIVE 03

Reaching the kitchen

Where can Yara reach past the phone, into the appliances and inventory around it?

CRAFT

The states had to read at notification size.

Legible small, distinguishable from each other, and recognizably Yummly. The final form came from a carrot — orange, hand-drawn, consistent with the existing illustration style.

Sketched in Figma, drawn in Illustrator, animated in After Effects.

Sketched in Figma
Drawn in Illustrator
Animated in After Effects

NEXT

The whole system assumes groceries get scanned. That's the riskiest assumption in it, and the first thing worth testing — likely against receipt scanning or a photo of an open fridge, either of which asks less of the person.

← BACK TO ALL WORK