Back

Cookify

Cookify is a food scanning recipe app that scans your kitchen to generate recipes based on selected ingredients.

It offers step-by-step guidance for preparing and cooking dishes, enhancing culinary exploration.

Still of the Cookify app on a phone: a recipe card with a photo of a salmon poke bowl, the name Salmon Poke Bowl and a cook recipe button, a green rail on the left with the words search, discover, list and current recipe, and a dark tab bar.
Project Type
Food FuturesEnd-to-end ServiceProduct DesignUX/UI
Skills
Visual Identity DesignDesign LibraryInformation ArchitectureUsability TestingUser Interface DesignPrototypingProject Management
Mentors
Sandra Kaufmann
Collaboration
ZHdK University
Duration
2 weeks
My Role
Product ResearchConcept DevelopmentUI & UX DesignIdeating DesignPrototypingBranding DesignProject Management

Short read

My Role

The design process focused on a user-centered approach, involving comprehensive user research, defining personas, creating wireframes and high-fidelity prototypes, and conducting usability testing to ensure a seamless and engaging user experience.

Users

Our users are busy, health-conscious individuals seeking convenience. They want a tool that simplifies meal planning with ingredients on hand, offering personalized, easy-to-follow recipes to enhance their cooking experience.

Still from the Cookify film: two hands hold a phone above a dark bowl of salad on a wooden table. The phone shows the Cookify home screen with the wordmark, a search field and four tiles. A knife and fork lie to the right.

Main Challenge

Cookify’s challenge was to design an intuitive app that caters to home cooks of all levels, offering recipes based on available ingredients and accommodating dietary needs. The app needed to balance simplicity with a comprehensive feature set, including an easy-to-use fridge and pantry scanning feature for a seamless user experience.

Key Findings

By conducting over 20 interviews with a diverse range of users, from busy professionals to hobbyist cooks, we uncovered a demand for simplified meal planning that adapts to dietary restrictions and available ingredients.

  • Need for easy-to-follow, customizable recipes.
  • Desire for dietary restriction filters and allergy considerations.
  • Preference for minimal food waste through smart pantry management.

Our Solution

Cookify transforms cooking into a creative experience by scanning your kitchen ingredients to generate personalized recipes.

Scan to See What You Can Cook

Users can snap pictures of their countertop, pantry, and fridge, enabling AI to identify available ingredients. The generated ingredient list empowers users to choose the items they want to use, and the search tab simplifies finding similar recipes.

Home screen of the Cookify app: the greeting Hello, Meghan, welcome to, beside a round portrait, then on very dark green the COOKIFY wordmark, the line what shall we cook today?, a search recipe field, four tiles named food allergies, food preference, create recipe and share recipe, a bar reading scan to discover, and an olive green tab bar with five icons.
Scan screen: a photo of an open fridge with white frames around the food, labelled Broccoli, Apple, Eggs, Paprika, Bambu, Cucumber, Carrots, Avocado, Champignon, Iceberg Lettuce and Salmon. On the left edge the words fridge, pantry and counter top, at the bottom a round shutter button and an olive green button reading create recipe.
Select ingredients screen: a list with a green check mark on every row, among them sushi-grade ahi tuna, soy sauce, sesame oil, rice vinegar, honey, light mayo, sriracha, cooked brown rice and diced cucumber. An olive green rail on the left edge reads search, discover, list and current recipe, with a round notch at list. A light green button reads create recipe.
Search recipe screen: a search field above two columns of food photos with rounded corners, bowls and plates seen from above. An olive green rail on the left edge reads search, discover, list and current recipe, with a round notch at search.
Discover screen in a phone frame: one tall card with a photo of a poke bowl, five stars, the title Salmon Poke Bowl, filler text and a light green button reading cook recipe. The olive green rail on the left edge has its round notch at discover.
Favorites screen: two columns of food photos with rounded corners, salads and bowls seen from above. In the tab bar the heart icon is filled.
Share recipe screen: a photo of a poke bowl, an olive green band with six round icons of messaging and social apps, and a contacts list with Alex Lee, Nina May, Charlie Whitmore and Nele Bay.

Step 1 / 7 Home Screen

Discovery Menu

Vertical menu for quick browsing: switch between search, discover, lists, and recipes effortlessly.

Search recipe screen: a search field above two columns of food photos with rounded corners, bowls and plates seen from above. An olive green rail on the left edge reads search, discover, list and current recipe, with a round notch at search.

Recipe Personalization Logic

Cookify’s recipe personalization intelligently combines user input on ingredients, dietary needs, and cooking skills to generate tailored suggestions.

The food allergies screen in a phone frame: an olive green bar with the field alergic to anything else?, and a list with toggles for gluten, wheat, lactose, nut, eggs, fish, shellfish, gluten and soybean. Only lactose is switched on.

Assets

The key assets for our application blend minimalist design with vintage and classic elements, using a bold color scheme to enhance both usability and visual appeal.

Start screen of the Cookify app, very dark green: a white logo of a spoon lying across a round plate in the upper half, and the small COOKIFY wordmark at the bottom.

Spoon Loading

A sleek loading animation that serves as the main logo, adding a playful and engaging touch to the app.

Home screen of the Cookify app: the greeting Hello, Meghan, welcome to, beside a round portrait, then on very dark green the COOKIFY wordmark, the line what shall we cook today?, a search recipe field, four tiles named food allergies, food preference, create recipe and share recipe, a bar reading scan to discover, and an olive green tab bar with five icons.

Central Navbar

A streamlined navigation bar that connects users to essential app sections. Its minimalistic design and intuitive icons ensure easy access to home, favorites, recipe creation, and more.

Intro screen on very dark green: a white line drawing of kitchen boxes and a phone scanning them, with an olive green circle behind it. Below it the words scan kitchen., three dots, and the COOKIFY wordmark at the bottom.

Function of App Illustrations

Upon logging in, users will encounter three screens crafted to guide them through the application's intended functionality.

Branding

The flexible design suits all skill levels, and the branding emphasizes simplicity and efficiency, making it accessible to all.

The Cookify logo mark in white on very dark green: a spoon lying across a round plate, drawn in thick lines.
The Cookify wordmark in white capital letters with a doubled outline, set across an olive green circle on very dark green.
  • #FFFFFF
  • #C6D055
  • #708C1B
  • #041619

Typeface: Roboto

A hand holds a phone above a dark bowl of salad on a wooden table. The phone shows a Cookify recipe screen with a food photo, a checklist of steps and an olive green rail on its left edge. A plate with green slices stands behind.

The app’s intuitive interface guides users step-by-step, offering real-time tips and catering to dietary needs, promoting culinary exploration while reducing food waste.

The full process

Still from the Cookify film: two hands hold a phone above a dark bowl of salad on a wooden table. The phone shows the Cookify home screen with the wordmark, a search field and four tiles. A knife and fork lie to the right.

Cookify is a food scanning recipe app that scans your kitchen to generate recipes based on selected ingredients. It offers step-by-step guidance for preparing and cooking dishes, enhancing culinary exploration.

Project Type
Food FuturesEnd-to-end ServiceProduct DesignUX/UI
Skills
Visual Identity DesignDesign LibraryInformation ArchitectureUsability TestingUser Interface DesignPrototypingProject Management
Mentors
Sandra Kaufmann
Collaboration
ZHdK University
Duration
2 weeks
A hand holds a phone above a dark bowl of salad on a wooden table. The phone shows a Cookify recipe screen with a food photo, a checklist of steps and an olive green rail on its left edge. A plate with green slices stands behind.

My Role

  • Product Research
  • Concept Development
  • UI & UX Design
  • Ideating Design
  • Prototyping
  • Branding Design
  • Project Management

The design process focused on a user-centered approach, involving comprehensive user research, defining personas, creating wireframes and high-fidelity prototypes, and conducting usability testing to ensure a seamless and engaging user experience.

Main Challenge

Cookify’s challenge was to design an intuitive app that caters to home cooks of all levels, offering recipes based on available ingredients and accommodating dietary needs. The app needed to balance simplicity with a comprehensive feature set, including an easy-to-use fridge and pantry scanning feature for a seamless user experience.

Users

Our users are busy, health-conscious individuals seeking convenience. They want a tool that simplifies meal planning with ingredients on hand, offering personalized, easy-to-follow recipes to enhance their cooking experience.

Our Solution

Cookify transforms cooking into a creative experience by scanning your kitchen ingredients to generate personalized recipes. The app’s intuitive interface guides users step-by-step, offering real-time tips and catering to dietary needs, promoting culinary exploration while reducing food waste.

A woman in a grey blue top tosses a salad in a dark bowl in a dim kitchen, with bowls of vegetables and fruit on the counter in front of her.

Our research for Cookify combined thorough analysis with practical insights to shape an app that truly resonates with users’ needs and cooking habits.

Market and Competitive Analysis

We analyzed existing meal-planning apps and identified a lack of personalized meal suggestions and inventory tracking. Cookify fills this gap with AI-driven recipe suggestions and ingredient scanning for a more tailored user experience.

Understanding User Needs

By conducting over 20 interviews with a diverse range of users, from busy professionals to hobbyist cooks, we uncovered a demand for simplified meal planning that adapts to dietary restrictions and available ingredients. These insights drove the development of key features, ensuring Cookify meets both novice and seasoned cooks where they are.

Key Findings

• Need for easy-to-follow, customizable recipes.

• Desire for dietary restriction filters and allergy considerations.

• Preference for minimal food waste through smart pantry management.

Defining User Profiles

Persona

We target busy professionals seeking quick, customized recipes using available ingredients, tailored to dietary needs, and easy to fit into tight schedules.

Portrait for the persona Meghan: a woman with dark wavy hair in a grey top, standing in a dim kitchen with warm light behind her.
Meghan
Age

27-year-old

Occupation

Marketing Specialist

Location

San Francisco

Tech Literate

Medium

Mention

“I’m learning how to cook and do not have much time. I desire an app that creates recipes with what I have at home by simply scanning my fridge and pantry. Also, I have some allergies like lactose intolerance; if the app could show the recipes best suited for me, that would be awesome!”

Personality

Organized, Tech-Adaptable, Foodie-in-Training, Appreciates Simplicity

Bio

Meghan is a busy marketing specialist from San Francisco who is eager to learn cooking despite her limited time. She values tools that help simplify her life and is looking for a solution that can accommodate her dietary needs while making cooking easy and efficient.

Core Needs

Time Efficiency: Needs a quick and simple way to find recipes using ingredients she already has.

Dietary Customization: Desires an app that takes her lactose intolerance and other dietary needs into account.

Learning & Exploration: Wants to explore new cooking techniques and recipes without spending too much time searching.

Frustrations

Limited Time: Finds it challenging to balance her work and personal life, leaving little time for cooking.

Dietary Constraints: Struggles with finding recipes that fit her dietary needs, such as lactose-free options.

Complex Recipes: Dislikes complicated recipes that require ingredients she doesn’t have on hand or doesn’t know how to use.

Field Research and Direct Feedback

We attended food events and conducted workshops to gather real-time feedback and observe cooking challenges firsthand. These experiences allowed us to refine the user interface and features, ensuring Cookify is both practical and delightful to use.

Technology Exploration

To set Cookify apart, we explored AI and AR technologies like those used by Tasty and Whisk for personalized recipes and smart meal planning. Features like AR pantry scanning and AI-driven recipe suggestions enhance user engagement, ensuring Cookify stays ahead of tech trends and user needs.

  • Information Architecture
  • User Flow
  • Recipe Personalization Logic
  • Visual Identity

To shape Cookify, we used user insights and prototype testing to create a seamless experience, from scanning ingredients to personalized recipes. The flexible design suits all skill levels, and the branding emphasizes simplicity and efficiency, making it accessible to all.​

How does it work?
Find Delicious Recipes with What You Have at Home
Scan to See What You Can Cook
Discover a new recipe tailored to your needs and preferences, using what you already have at home.
Gather Ingedients
Cook Smart with What You’ve Got!

App User Flow Sketch

Information Architecture

This illustrates the user journey within Cookify, from scanning ingredients to generating personalized recipes. It starts with clear onboarding steps, guiding users through inputting their available ingredients and dietary preferences.

Hand drawn sketch in white lines on black: about a dozen small phone screens in two rows joined by arrows, with a column of more screens on the right.
User flow diagram drawn in white lines: start and step nodes on the left lead through grey panels with lists of screens into a field of decision diamonds and end nodes on the right.

Recipe Personalization Logic

Cookify’s recipe personalization intelligently combines user input on ingredients, dietary needs, and cooking skills to generate tailored suggestions. It analyzes pantry items, nutritional needs, and flavor profiles to offer practical and exciting meals, promoting exploration and reducing food waste.

Moodboard

The design emphasizes a clean, modern style with minimalistic elements and soft colors for a calm, engaging user experience. The interface combines sleek typography with inviting visuals, making navigation easy and appealing for all skill levels.

Moodboard reference: two screens of a plant care app in green and white, one titled My plants with an Explore row, one showing a Calathea with values for humidity, fertilizer and watering.
Moodboard reference: a tall plant with large green leaves in a black pot, in front of a black wall next to a bed and a light curtain.
Moodboard reference: two screens of a plant app on light grey, one greeting Hello, Sara! with plant cards and round green icons, one showing a cactus named Pachanoi Cristata with a green bar at the bottom.
Moodboard reference: a white bowl of noodles with beef, broccoli and red pepper, seen from above, with chopsticks lifting some noodles.
Moodboard reference: a classic kitchen with a black and white checkered floor, a dark kitchen island, pale cabinets, woven pendant lamps and a bay window.

  • Logo
  • Colour Scheme
The Cookify logo mark in white on very dark green: a spoon lying across a round plate, drawn in thick lines.
The Cookify wordmark in white capital letters with a doubled outline, set across an olive green circle on very dark green.

Typeface: Roboto

  • #FFFFFF
  • #C6D055
  • #708C1B
  • #041619

System Design

The Cookify app design embraces a clean, minimalist style inspired by modern plant care apps and sleek recipe layouts. Using soft color palettes and crisp, sharp typography, it creates a fresh, “tasty” visual experience that feels both inviting and easy to navigate. The design balances simplicity with sophistication, ensuring it looks appetizing and accessible for all users.

Start screen of the Cookify app, very dark green: a white logo of a spoon lying across a round plate in the upper half, and the small COOKIFY wordmark at the bottom.
Login screen, very dark green: the COOKIFY wordmark across an olive green circle, two white fields reading username and password, and two buttons, Login and Signup.
Home screen of the Cookify app: the greeting Hello, Meghan, welcome to, beside a round portrait, then on very dark green the COOKIFY wordmark, the line what shall we cook today?, a search recipe field, four tiles named food allergies, food preference, create recipe and share recipe, a bar reading scan to discover, and an olive green tab bar with five icons.

Wireframes

The wireframe assisted us in incorporating the interface into the design.

Wireframe of the home screen in greys: a round avatar, a dark panel with a title bar, a search bar, four square tiles, one wide bar and five dots as tab bar.
Wireframe of the recipe screen in greys: a rail on the left edge, a picture area with a play triangle, a row of four circles, a list of rows with check marks and five dots as tab bar.
Wireframe of the allergies screen in greys: a dark bar with an input field, a list of rows each ending in a toggle, and five dots as tab bar.
Wireframe of the discover screen in greys: a rail on the left edge, one tall card with five small stars, two text blocks and a small button, and five dots as tab bar.
Wireframe of the search screen in greys: a rail on the left edge, a search bar, two columns of tiles of different heights and five dots as tab bar.

Assets

The key assets for our application blend minimalist design with vintage and classic elements, using a bold color scheme to enhance both usability and visual appeal.

Discovery Menu

Vertical menu for quick browsing: switch between search, discover, lists, and recipes effortlessly.

Home Navigation

Quick-access icons for sharing, creating, and personalizing recipes.

Rounded square button in white on a translucent grey ground: three linked circles above the words share recipe.
Rounded square button: a pencil on a square above the words create recipe.
Rounded square button: a plus sign in a square above the words food allergies.
Rounded square button: a plus sign in a circle above the words food preference.
Favourite

Feature allows users to save & access their preferred recipes quickly.

A bowl of salad with red and yellow petals and two spoons, seen from above on a dark table.
Spoon Loading

A sleek loading animation that serves as the main logo, adding a playful and engaging touch to the app.

Central Navbar

A streamlined navigation bar that connects users to essential app sections. Its minimalistic design and intuitive icons ensure easy access to home, favorites, recipe creation, and more.

Function of App Illustrations

Upon logging in, users will encounter three screens crafted to guide them through the application's intended functionality.

Intro screen on very dark green: a white line drawing of kitchen boxes and a phone scanning them, with an olive green circle behind it. Below it the words scan kitchen., three dots, and the COOKIFY wordmark at the bottom.
Intro screen on very dark green: a white line drawing of a fridge with a magnifying glass, with an olive green circle behind it. Below it the words looking for a recipe ?, three dots, and the COOKIFY wordmark at the bottom.
Intro screen on very dark green: a white line drawing of a phone showing a plate, with an olive green circle behind it. Below it the words discover & eat., three dots, and the COOKIFY wordmark at the bottom.

Home Screen

Start your journey by exploring recipes, setting preferences, or creating and sharing your own dishes. Navigate easily and discover personalized cooking options right from the main screen.

Home screen of the Cookify app: the greeting Hello, Meghan, welcome to, beside a round portrait, then on very dark green the COOKIFY wordmark, the line what shall we cook today?, a search recipe field, four tiles named food allergies, food preference, create recipe and share recipe, a bar reading scan to discover, and an olive green tab bar with five icons.
Intro screen on very dark green: a white line drawing of a fridge with a magnifying glass, with an olive green circle behind it. Below it the words looking for a recipe ?, three dots, and the COOKIFY wordmark at the bottom.
Intro screen on very dark green: a white line drawing of kitchen boxes and a phone scanning them, with an olive green circle behind it. Below it the words scan kitchen., three dots, and the COOKIFY wordmark at the bottom.
Intro screen on very dark green: a white line drawing of a phone showing a plate, with an olive green circle behind it. Below it the words discover & eat., three dots, and the COOKIFY wordmark at the bottom.
A woman in a pink top seasons a large bowl of salad on a wooden counter covered with bowls of vegetables, herbs and cutlery, in a dim kitchen.

The Food Allergies page, located in the home menu, offers a curated selection of recipes tailored to individual user preferences.

The food allergies screen in a phone frame: an olive green bar with the field alergic to anything else?, and a list with toggles for gluten, wheat, lactose, nut, eggs, fish, shellfish, gluten and soybean. Only lactose is switched on.

Users can capture images of their countertop, pantry, and fridge; an AI then identifies the available food items.

Scan screen: a photo of an open fridge with white frames around the food, labelled Broccoli, Apple, Eggs, Paprika, Bambu, Cucumber, Carrots, Avocado, Champignon, Iceberg Lettuce and Salmon. On the left edge the words fridge, pantry and counter top, at the bottom a round shutter button and an olive green button reading create recipe.

The AI generates an ingredient list, allowing users to select the items they wish to use.

Select ingredients screen: a list with a green check mark on every row, among them sushi-grade ahi tuna, soy sauce, sesame oil, rice vinegar, honey, light mayo, sriracha, cooked brown rice and diced cucumber. An olive green rail on the left edge reads search, discover, list and current recipe, with a round notch at list. A light green button reads create recipe.

The search tab allows users to find similar recipes easily. Designed to help users discover new recipes tailored to their unique preferences

Search recipe screen: a search field above two columns of food photos with rounded corners, bowls and plates seen from above. An olive green rail on the left edge reads search, discover, list and current recipe, with a round notch at search.
A woman in a white blouse stands at a kitchen counter and looks down at a phone in her hands. In front of her a plate of cutlets, a bowl of salad, glass bottles and limes.

In the Discover menu, users can browse through various recipe options based on selected ingredients. When ready to either cook or preview a recipe, a simple upward scroll is all it takes.

Discover screen in a phone frame: one tall card with a photo of a poke bowl, five stars, the title Salmon Poke Bowl, filler text and a light green button reading cook recipe. The olive green rail on the left edge has its round notch at discover.

The menu features a heart icon, serving as the user's Favorites page for quick access to preferred recipes.

Favorites screen: two columns of food photos with rounded corners, salads and bowls seen from above. In the tab bar the heart icon is filled.

Users can easily share and showcase their favorite or self-created recipes with a simple sharing feature.

Share recipe screen: a photo of a poke bowl, an olive green band with six round icons of messaging and social apps, and a contacts list with Alex Lee, Nina May, Charlie Whitmore and Nele Bay.

The system menu streamlines user navigation, offering a curated list of pages for quick access to specific content.

System menu screen: a sign in button, a help field, and a list with allergies, food preference, home, favourites, scan and recipe, under recipe the entries search recipe, descover, list and current recipe, then create recipe.
A hand holds a phone above a dark bowl of salad on a wooden table. The phone shows a Cookify recipe screen with a food photo, a checklist of steps and an olive green rail on its left edge. A plate with green slices stands behind.