COOKBOOK FRESH

For this project, I was assigned to create a UI/UX and interaction design in figma using the theories we covered throughout the semester, specifically Design Thinking, which is also known as Human-Centered Design approach. I chose to design a Cooking App because it focuses on solving everyday problems through user needs. My app brings this idea to life by offering personalized meal suggestions that make cooking easier, faster, and more enjoyable for users.

The project was divided into several key phases:

Secondary Research [Interview Questions & Persona] : I researched user behaviors, cooking challenges, and time constraints to understand real needs, which informed the creation of user personas.

Competitive Analysis: I analyzed existing cooking apps to identify user pain points and gaps in the market, helping define the core problem the app aims to solve.

Storyboard: I visualized real-life scenarios to explore how users would interact with the app during everyday cooking moments.

User Flow : I mapped the user journey from onboarding to meal completion to ensure a clear and intuitive experience.

Moodboard: I explored visual styles, colors, and inspiration to ideate a warm, accessible, and culturally inclusive cooking experience.

Low Fidelity: I created low-fidelity wireframes to quickly test layout, structure, and core functionality.

Mid Fidelity: Refined screens with clearer hierarchy and interactions while iterating on usability.

High Fidelity: Developed polished, visually complete screens that closely represent the final product.

Design Pattern: Applied familiar UI patterns such as recipe cards and bottom navigation to improve usability and reduce learning time.

Design System: Built a consistent design system including colors, typography, components, and icons for scalability and cohesion.
Prototyping: I created an interactive prototype to test key user tasks like recipe selection, saving favorites, and step-by-step cooking guidance.

Primary Flow:

https://www.figma.com/proto/OSPYiCPcYmrkIaY9W0vmkD/Cooking-App-Flows?node-id=3-297&t=oUPCdgofpp6StbXa-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=3%3A297&show-proto-sidebar=1

Secondary Flow:

https://www.figma.com/proto/OSPYiCPcYmrkIaY9W0vmkD/Cooking-App-Flows?node-id=78-258&t=oUPCdgofpp6StbXa-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=78%3A258&show-proto-sidebar=1

Presentation: