World Cuisine

Year

2022

Theme

UXUI Design / Branding

Type

Course Personal Project / 3 month

As an avid cook who loves experimenting with new recipes, I envisioned a meal kit concept that offers a variety of dishes from diverse backgrounds and flavors. This concept caters to people who are new to cooking as well as culinary adventurers seeking to explore and enjoy high-quality cooking experiences. In this project, I designed a product that helps users easily prepare and enjoy new dishes through a process of research, testing, and design.

WORLD CUISINE
1. INTRO
2. Key features
3. Behind the scene
4. design process
5. Brand vi

Problem Statement

Adventurous home cooks who love exploring new cuisines often find it difficult to source unique ingredients and reliable recipes.

The Opportunity

How might we provide pre-portioned ingredients and step-by-step recipes to help these cooks easily discover and prepare diverse, high-quality dishes?

Introducing World Cuisine

World Cuisine offers pre-portioned ingredients and recipes for cooking beginners and culinary adventurers alike. Unlike brands focused on healthy diets and subscription plans, World Cuisine conveys a spirit of exploration, adventure, and high-quality living.

Key Features

Starting a culinary trip

Website onboarding

• A quick view of the brand’s mission and tone.
• Showcase of top dishes with click-to-view details.
• Highlights of the chef team and unique features.

Explore dishes and build

I understand that users are curious and excited to explore new dishes. To cater to this, I organized the content into chunks, highlighting key information.
‍
• Explore all dish choices with filter and preferences.
• Simple and easy-understanding guide of the dish;
• Build customized dish kit by choosing the ingredients.

Purchase & Deliver

Cart & Order Info Page

• Explore all dish choices with filter and preferences.
• Simple and easy-understanding guide of the dish;
• Build customized dish kit by choosing the ingredients.

Choose a recipe

App Recipe Collection

• The purchased recipes will be shown in the collection as cards.
• Cards provides appealing visual of the dish and clear goal.
• Accesse to all recipes and scanning recipe.

1 kit, 1 unique recipe

Recipe Tutorials

• Quick step jumps and displaying step durations.
• Switch between image or video mode.
• Very detailed and fitting recipe for each kit.

Behind the scene

In this section, I will share how I made choices, my thoughts during design.

Tone. Sharp or empathetic?

Moodboard

I dismissed the idea of a healthy, green look because it feels more suited for long-term use, rather than evoking the excitement and curiosity of ordering a specialty dish at a fine dining restaurant. I need a visual that’s impactful but not chaotic.

A starting by packaging

Why packaging?

In the UI design, I used octagonal shapes to carry over the branding from the packaging. In fact, I initially designed the packaging first. Inspired by Chinese mooncake boxes, The intricate octagonal design attracted me and the complexity and elegance make the gift feel more precious, so I incorporated this visual element into the brand visuals.

Designing for short reading time

" A customer picks up and puts it back in 10 seconds, that is the only opportunity, to sell our product."
— Green Toy Founder, Robert von Goeben

1. An eye-catching style

First goal is to make it visually appealing, I intergrated a dark background with gold accents for an elegant feel. I combined large serif fonts for headings and modern sans-serif fonts for body text, balancing tradition and modernity. It went through 2 versions by user tests, the main improvement is what I gradually turn text-heavy websites into more interactive and information chunked layout.

JUMP TO DESIGN ITERATION

2. Design for reading easily and fast

After several revisions, I concluded this：
If users can't quickly find the next step, they'll close the page.

Multiple page tests and timing calculations show that homepage efficiency is about 5s, and the dish details page is about 6s.

Why CARD?

App homepage interaction

Cards convey a sense of collection and represent the recipes effectively. Based on user feedback, I modified the card interaction from a swipe mechanism to a card gallery. This change allows users to view and choose from multiple cards in context.

Design Process

01

Empathize

02

Define

03

Ideate

04

Protype

05

User Test

Empathize

The goal of this stage is to fully understand the current market for trendy prepared food products and to learn about the user community. To successfully achieve this goal, I analyzed competing products and applications, and completed the user experience research process.

Competitor Analysis(2022)

By analyzing each competitor's services and applications to identify their strengths and weaknesses, I can discover potential innovative concepts and features to differentiate myself.

Conducting UX Research

Next, I conducted user experience research to better understand the needs and requirements of individuals who seek convenient meal prep options. This will help add context and insight to the design process, ultimately providing the best solutions for users.

User Questionnaire

As a culinary enthusiast keen on exploring diverse tastes, I sought to understand people's current food interests and needs. I distributed 157 questionnaires, receiving 124 effective responses. Here's what I learned.

User Interview

The interviews were driven by open-ended questions aimed at understanding users' habits and pain points regarding purchasing ingredients, cooking, and recipes. I gathered information from individuals who are interested in cooking and enjoy trying new recipes. From this, I could understand the social behaviors of potential users on other platforms and what might satisfy them. Based on these assumptions, we categorized the selection criteria for the interviewed users as follows:

1. Individuals who cook and are interested in trying new recipes: 4 participants.
2. 21-45 years old;
3. Cooking time > 1h;
4. Using cooking app or recipes to cook.

Creating the Persona

Define

Define the problem

After creating the persona, I needed to define the design challenges and frame them as problems to help me better brainstorm a range of solutions.

Assigning Structures(old sitemap)

I created the first edition app map for World Cuisines that shows how the features will be idesigned.

Prototype

Charting Path

I started by creating a task flow that identified key tasks that all users completed in the same way.

Initial Wireframes(old design)

After a long process of drawing low&mid-fidelity diagrams, I had the first high-fidelity wireframes that could be used as prototypes in the first usability tests.

Website pages prototype examples:

App wireframes prototype examples:

Testing

Usability Testing

The purpose of testing is to evaluate the usability of functionality, interface design, information flow, and information architecture. The four tests were conducted, with a total of 4 participants participating in the usability testing.

The main problem is that the interface is not clearly expressed enough, which causes some understanding problems for users. But overall users can get the corresponding information.

New Design

After a long process of drawing low&mid-fidelity diagrams, I had the first high-fidelity wireframes that could be used as prototypes in the first usability tests.

Website pages prototype examples:

Brand Visual Identity