R.F.D

CookWise

UX case study

Click to watch the 2-min walkthrough

My role

UX/UI design, user research

Deliverables

User flows, style guide, responsive mockups, prototype, design system

Tools used

Figma, FigJam, Lyssna, GPT

Introduction

CookWise is an original product concept designed to make live cooking classes accessible to everyone - from beginners taking their first steps in the kitchen to pros refining their technique. Through user research, I found that existing cooking apps often relied on static recipes and lacked real-time interaction. This case study documents the CookWise process: research and discovery, information architecture, wireframing, prototyping, usability testing, and final design.

The Problem

Food lovers who want hands-on culinary growth often rely on static recipes or impersonal tools, making it hard to get tailored guidance or ask quick questions while cooking.

The Goal

Design an intuitive platform that enables users to interact directly with cooks, learn authentic techniques, and book affordable, personalized classes.

Research

To better understand user needs, I researched existing platforms and conducted semi-structured interviews with home cooks and professional chefs. These sessions revealed common pain points - limited interaction, low personalization, and difficulty finding reliable, practical guidance - which informed CookWise's core features.

Competitors

Competitor 1

Offers high-quality, pre-recorded courses by celebrity chefs like Gordon Ramsay.

Strengths

  • High production value
  • Well-structured lessons
  • Access to celebrity chefs

Weaknesses

  • No real-time interaction
  • One-size-fits-all approach
  • Expensive subscription model

Takeaway for CookWise

We differentiate by offering live interactions rather than pre-recorded courses.

Competitor 2

Connects users with professional chefs for virtual or in-person cooking classes.

Strengths

  • Personalized learning experience
  • Variety of cuisines and chefs
  • Interactive and engaging

Weaknesses

  • Sessions can be expensive
  • Booking process is slow
  • Not designed for quick, casual Q&A

Takeaway for CookWise

We simplify the process with instant Q&A alongside scheduled one-on-one classes.

Interview notes

I prefer written recipes so I can scroll back if I miss something.

I would try a live Q&A session with a cook.

I needed to learn a new skill for work, like how to debone a fish properly.

Personas & user flows

I synthesized my research into two core personas - a beginner cook looking for step-by-step confidence, and an experienced cook seeking variety and efficiency - then mapped a distinct user flow for each to ensure CookWise could flexibly support very different skill levels.

Persona 1 - Beginner

Persona: Lisa, a beginner home cook seeking step-by-step confidence

User flow: discovering & saving a recipe

User flow for saving a recipe: opens app, browses featured recipes, filters by dietary preferences, selects a recipe, views ingredients and steps, taps Save, recipe saved.

Persona 2 - Experienced

Persona: Tom, an experienced cook seeking variety and efficiency

User flow: booking a cooking lesson

User flow for booking a cooking lesson: opens app, navigates to Learn, filters by technique, browses chefs specialising in fish preparation, selects a class on deboning fish, checks for available time slots. If none, browses other chefs and returns to the chef list; if available, selects date and time, confirms and pays, lesson booked.

Information architecture

I created a sitemap based on card sorting and user flows, organizing the app into four clear areas - Home, Recipes, Learn, and Profile - with secondary options tucked into a hamburger menu to keep the main navigation clean and focused.

Site map

Cookwise sitemap: Home (featured classes, trending recipes, suggested for you, top carousel filters, search) branches to four sections: Recipes (all recipes, dietary filters, saved recipes, recipe details), Learn (one-on-one classes, live Q&A sessions, browse by skill, class details and booking), Profile (account settings, payment info, past bookings, saved Q&A threads, app preferences) and the Hamburger Menu (settings, notifications, language, help and support, log out).

From wireframes to final

I iterated from low-fidelity wireframes through mid-fidelity prototyping to colour-enhanced, testable screens - refining the navigation (moving Profile into a dedicated bottom tab) and developing the Book Class and Ask a Question actions into clear button components along the way.

Low fidelity

Mid fidelity

High fidelity

CookWise wireframes progressing from low to mid to high fidelity

Usability testing

I didn't realize I could scroll the top navigation bar.

I didn't expect to have to go through Meet the Chefs to ask a question.

I love the visuals - it really feels like a modern cookbook.

Key findings

01

Carousels didn't look scrollable

Users missed content in the carousels until prompted, and thought they were static.

What I changed

The next card now peeks in at the edge, so it's clear there's more to swipe.

02

Following up with a chef was hard to find

Users missed the Q&A button on the chef profile and didn't expect to go through Meet the Chefs to ask a question.

What I changed

Added a way to ask a chef a question directly, without going through Meet the Chefs.

03

Booking caused hesitation

The calendar layout and date spacing slowed users down when booking a class.

What I changed

Simplified the calendar layout so choosing a date is quicker and clearer.

Design system

Colour

Warm, energetic yellows to reflect creativity and appetite, balanced with neutral tones for contrast and readability.

  • #FAFAFABackground
  • #9E9E9EMuted text
  • #424242Body text
  • #000000Headings
  • #FFE5A6Highlight
  • #FFC257Primary
  • #FFA200CTA / Accent

Typography

A clear type hierarchy pairing League Spartan headings with Helvetica Neue body and Inter UI text.

CookWise style guide - typography

Icons & navigation

Cohesive, approachable icons and a consistent bottom nav, reinforcing CookWise's friendly tone.

CookWise style guide - icons and navigation

Responsive grid

A responsive grid keeps cards and carousels balanced and adaptable across screen sizes.

CookWise style guide - responsive grid

Final designs

Each element of the final design was refined to balance warmth, usability, and visual hierarchy - bringing the CookWise concept to life as a polished, engaging product.

CookWise final screens - chef discovery and Ask a Question chatCookWise final screens - Butchery class listings and Trending recipes

Reflection & next steps

CookWise demonstrates my ability to take an idea from research through to a polished prototype, while refining my skills in iteration, accessibility, and responsive design. My next steps would include more usability testing with chefs and refining notifications.

Thanks for reading.

Robert Fennell - UX/UI Designer ยท robertfennelldesign@gmail.com

Contact