The idea

Cooking apps often need to do two things well: inspire users and help them decide what to cook. The concept behind Chef Recipes UI was to create a visually engaging overview that makes discovery feel effortless, then provide enough information on the detail page to support the next step.

The experience was designed around a simple question:

How can a user move from “What could I cook?” to “I want to make this” with as little friction as possible?

The user flow

1. Browse the overview

The overview page presents popular recipes and gives users a clear way to move between categories such as:

• Appetizers

• Entrées

• Desserts

The category navigation provides a simple starting point for exploration, while recipe cards create immediate visual inspiration.

2. Explore recipe suggestions

Within a category, users can browse different recipe suggestions. The interface uses large food imagery, recipe names, ratings and lightweight metadata to help users compare options quickly.

For the featured recipe, the overview communicates:

• Recipe title

• Rating

• Estimated preparation time

• Number of likes

• Number of comments

• A short description

• A favourite action

This combination supports both quick scanning and more deliberate selection.

3. Open the recipe detail

Once users select a recipe, they reach a focused detail page. The recipe image becomes the main visual anchor, followed by the title, rating and description.

The detail view also introduces a shopping-list action and displays the required ingredients. This creates a natural bridge between inspiration and preparation.

Design approach

Lead with visual appetite appeal

Food is highly visual, so the experience gives photography a central role. Large recipe imagery creates an emotional entry point and helps users understand the character of a dish before reading the details.

Keep discovery lightweight

The overview does not overwhelm users with too much information. Categories, recipe cards and a small set of useful metadata make it easy to scan and decide where to look next.

Use familiar interaction patterns

The prototype uses recognisable patterns such as category tabs, horizontal recipe browsing, favourite actions, ratings and a shopping-list icon. These conventions reduce the learning effort and let users focus on finding something appealing.

Support the transition from inspiration to action

The detail page is not only a recipe description. By including the shopping-list entry point and ingredients, it supports the user’s next practical step after choosing a dish.

Key screens

Recipe overview

The overview screen acts as the discovery hub. It combines category navigation with recipe suggestions and highlights a selected recipe using a large image, title, rating, engagement data and a short description.

Recipe detail

The detail screen expands the selected recipe into a more focused view. It includes the hero image, recipe title, rating, description, shopping-list action and ingredient list.

Visual direction

The visual direction combines a clean mobile layout with warm food photography and a focused accent colour for actions and navigation.

The interface uses:

• Large, immersive food imagery

• A bright, uncluttered content area

• Red-coral accents for active states and actions

• Blue typography for recipe titles and section headings

• Generous spacing between content groups

• A restrained set of icons for search, favourites, comments and shopping list

The result is intended to feel inviting and approachable rather than overly technical or dense.

What I explored

This personal project allowed me to explore:

• How visual hierarchy can support recipe discovery

• How category navigation affects browsing behaviour

• How much metadata is useful before opening a recipe

• How a detail page can support the transition from inspiration to preparation

• How shopping-list functionality can become part of the recipe experience

• How mobile layouts can balance imagery, information and action

Outcome

The result is an interactive mobile prototype that demonstrates a complete discovery-to-detail flow:

• Users can browse recipe categories.

• Users can explore recipe suggestions within a category.

• Users can select a recipe.

• Users can view detailed recipe information.

• Users can access the shopping list and ingredients needed for preparation.

Because this was a personal exploration, the focus was not on launching a production-ready product or measuring business KPIs. The goal was to explore a clear, visually engaging recipe experience and practise translating a simple product idea into a coherent mobile flow.

Reflection

This project reminded me that even a small prototype benefits from a clear purpose. The experience does not try to solve every cooking-related problem. Instead, it focuses on one useful journey: helping users discover a recipe and understand what they need to make it.

The most important design decision was to separate discovery from detail. The overview is built for browsing and inspiration, while the detail page is built for commitment and preparation. This distinction keeps the first interaction light and gives users more information only when they have chosen a direction.