Design Process

To achieve this, I followed a structured, user-centered design process that guided how I analyzed requirements, explored solutions, and delivered the final output. My process is divided into four key phases:

Persona: Joy

I began the design process by developing a clear understanding of the target audience. To anchor my design decisions, I created a primary persona: Joy, a beginner home cook who lives in a university dormitory. By understanding her daily cooking behaviors, her goals of finding beginner-friendly recipes, and her frustrations with complex instructions, I was able to design solutions that directly address her needs.

Joy's Journey Map

To visualize Joy’s step-by-step experience on a mobile device, I created a User Journey Map. This framework illustrates how she interacts with the app across four key phases: discovering a recipe, reviewing details, adding ingredients to her cart, and following cooking instructions. It aligns the project brief with her specific goals and frustrations.

Goal: Cook a new recipe and efficiently identify missing ingredients using a mobile app.

Design Strategy & Key Principles

Translating insights from the Empathize and Define phases into actionable solutions, I established five core design principles. These pillars ensure the final UI effectively resolves the user's pain points while remaining focused on the Minimum Viable Product (MVP) scope.

Information Architecture

To establish a clear and intuitive navigation system, I mapped out the application's Information Architecture. The structure is built around the core recipe exploration flow, seamlessly integrating the grocery planning features and activity history as supportive elements. This setup ensures users can easily transition from discovering a recipe to managing their shopping list without losing context.

User Flow

Building upon the Information Architecture (IA), I mapped out a detailed User Flow to visualize Joy’s end-to-end journey. This flow illustrates her seamless progression through the app: from exploring recipes and reviewing ingredient requirements, to adding missing items to her cart (acting as a digital shopping list), and finally following the step-by-step cooking guide.

This structured path minimizes friction at key decision points, ensuring an intuitive experience that supports her ultimate goal of cooking confidently without confusion.

Mockups and High-Fidelity Prototype

After analyzing user needs and establishing a solid structural flow, I translated these strategic insights into a polished visual design. The high-fidelity prototype brings the Recipe Discovery application to life, focusing on four core features: Recipe Discovery, Recipe Detail View, Shopping List, and Activity History.

FEATURE 1  

Recipe Discovery & Exploration

The user journey begins on a thoughtfully structured Home Screen designed to accommodate various browsing behaviors and help users find inspiration efficiently. The interface offers multiple intuitive discovery paths, including a prominently Featured Banner for daily recommendations, Quick-access 'Food Categories' filters, and Curated Thematic Sections.

Additionally, users can utilize the direct search function with proactive recommendations for specific cravings, and easily bookmark appealing meals using the 'Heart' feature to save them into a personalized Favorites library for quick retrieval later. 

◆ Interactive Step Mode

To support users actively in the kitchen, tapping the "Start Cooking" button transitions the app into a distraction-free Interactive Step Mode where steps are presented one at a time with large visual cues (photos or videos) to ensure accuracy. A top progress bar and prominent "Previous/Next" buttons allow users to navigate at their own pace without losing context. Deliberately separating the static Recipe Detail View from this interactive experience creates a frictionless workflow, smoothly shifting the user's mindset from meal planning to active cooking and significantly reducing cognitive load when their hands are full.

FEATURE 3

Grocery Planning & Shopping List

◆ Pre-Shopping List     

To seamlessly bridge meal planning and grocery shopping, users can tap 'Add to Shopping List' directly from the recipe's ingredient list. This action opens a flexible selection screen where users can manually choose individual missing items or use the 'Add All' feature for convenience. Upon confirming their selection, a success state provides clear next steps—either navigating to the active Shopping List or returning to the recipe. This ensures users maintain full control over their workflow without unnecessary friction.

FEATURE 4

Activity History

To support continuous user engagement and continuity, the Activity History feature enables users to effortlessly revisit recipes they have previously interacted with. The interface utilizes segmented tabs to cleanly categorize recipes by 'All,' 'Viewed,' and 'Cooked,' allowing users to quickly filter their past culinary journeys. Additionally, a dedicated search bar empowers users to instantly locate specific recipes within their history, minimizing the friction of retrieving a previously enjoyed meal.

Design System

To ensure visual consistency and build user trust, I established a clean, minimalist design system tailored for an engaging culinary experience. The visual language was intentionally designed to reduce cognitive load while making critical recipe information and cooking steps instantly recognizable.