Gesture Interaction · Recipe UX · 2024

YolkWave

A touch-free recipe experience for the moment when hands are occupied, wet, or covered in ingredients. Simple gestures keep the instructions moving without interrupting the act of cooking.

Role
Research · UX/UI · Motion
Format
Gesture-led recipe app
Tools
Figma · After Effects · Rotato
Focus
Hands-busy interaction
View the original project deck Watch the motion prototype

Recipe gesture design · Smoke effect

Keep
cooking.
Wave on.

Move through recipes with a small vocabulary of gestures, keeping attention on the food instead of a contaminated screen.

SWIPE · SELECT · BACK · TIMER
YolkWave recipe interface shown across mobile devices

01 · The Interruption

A recipe screen becomes inconvenient at exactly the wrong moment

Cooking repeatedly moves between ingredients, heat, tools, and instructions. Touching a phone means stopping to clean or dry the hands; skipping that step risks covering the device in water, flour, or oil.

YolkWave reframes navigation as a small set of visible, learnable movements. The interaction stays close enough to familiar touch gestures that the user does not need to memorize an entirely new language.

01

Hands stay occupied

Preparation and cooking make direct screen contact inconvenient or unhygienic.

02

Attention stays divided

The recipe must remain readable while the user watches time, heat, and ingredients.

03

Gestures need feedback

Every motion needs a clear response so the user knows what the system understood.

YolkWave project introduction and gesture concept board
Concept overview · touch-free recipe navigation built around the realities of cooking

02 · Research

The gesture vocabulary begins with movements people already understand

Desk research connected gesture communication, cooking behavior, recipe products, and screen-free interaction. Surveys and interviews identified the recurring friction around dirty hands, repeated cleaning, and losing the correct recipe step.

Testing then reduced the gesture set to movements with distinct silhouettes and low physical effort, supported by on-screen animation rather than invisible commands.

YolkWave research, survey, testing, flow, and persona board
Research synthesis · gesture meaning, cooking context, user survey, testing, personas, and task flow

03 · Interaction System

Four gestures carry the core recipe journey

01 · SCROLL

Wave vertically

Browse recipes and move through longer ingredient or instruction lists.

02 · SELECT

Hold to confirm

Choose a recipe or step only after the interface shows a clear selection state.

03 · BACK

Reverse the motion

Return to the previous screen without reaching for a small navigation control.

04 · TIMER

Start and stop

Control the cooking timer while the active step remains visible.

YolkWave style guide, cooking scenario, and wireflow board
System definition · Inter type, appetizing yellow, cooking scenario, gesture icons, and wireflow

04 · Final Solution

A warm visual language keeps the interaction light and legible

Yellow acts as the appetite-led brand color and the primary interaction cue. White recipe cards separate content from food photography, while animated smoke and gesture feedback make touch-free actions feel immediate rather than mechanical.

Final YolkWave interface and mobile mockups
Final solution · recipe browsing, ingredient details, guided cooking steps, and the motion prototype
YOLKWAVE · GESTURE RECIPE UX

Keep the hands in the recipe and the interface within reach.

Back to all projects