Culture Cook App Overview Banner

Miss that delicious fried rice you used to have at your grandma's?
Or that fancy cacio e pepe you had on a trip to Italy?
Sad you never learned how to make any of these?
Culture Cook can teach you!

There’s a reason why cultural foods are called just that: They are a part of culture.  These foods are prevalent in everyone’s life, whether it is eating them in homecooked meals, eating out at local restaurants, or wafting their smell as you walk down the streets in a country far away.  For those who want to learn more about these dishes, there is no centralized way to gather this information.  Enter: Culture Cook.  The app works as a one-stop shop to discover different cultural foods, learn about their context and how they fit into a culture, and the recipes to cook them.

The Challenge

How do we structure the vast amount of information in a way that is accessible and enticing to users and will get them interested to learn more about cultural dishes and how to cook them?

The Needs

From user research, I defined the following needs as problem spaces that Culture Cook could resolve:

Cooks find recipes using multiple metrics

Home cooks tend to lack the fundamental knowledge on different foods, especially when it comes to cultural dishes that have a particular background and/or technique.  They need sources that they can trust to provide them this information.

Accessibility to reputable sources is needed

Home cooks tend to lack the fundamental knowledge on different foods, especially when it comes to cultural dishes that have a particular background and/or technique.  They need sources that they can trust to provide them this information.

Cooks like to experiment when using recipes

By steering away from recipes word-for-word, they can better adjust a recipe to their own taste buds.  Problem is, they typically don’t have a way to record this for later.

Serving size can vary

Cooks sometimes cook for themselves, or they sometimes cook for a whole family--it all depends on the situation.  They need to understand how to scale their dishes for different groups.

The Features

Determining the features to meet user’s needs was rooted in understanding UI patterns, utilizing information architecture, mapping out the user experience, and iterating wireframes based on usability testing.

Metrics for Searching Galore

Picture of Culture Cook's Screens for Filtering and Photo Scanning

Leveling Up One's Knowledge

Picture of Culture Cook's Screens for Cooking Academy, In-Recipe Links, and Forward from Recipe's Writer

For the Culinary Mad Scientists

Picture of Culture Cook's Screens for Note Submission

Party of One... or Ten?  No problem!

Picture of Culture Cook's Screens for Adjusting Serving Size

Background

The Problem

There is no app currently available for all the information that surrounds cultural food, despite how often people eat them. Culture Cook has a vast amount of information on different foods from different cultures across the world (think foods like gyros, paella, or chicken adobo). With their large database, Culture Cook now wants to create a mobile app that is also able to utilize the technology of smart phones.

Disclaimer: This is a speculative project, and Culture Cook is a fictional company, created from the workings of my own mind.

The Challenge

How do we structure the vast amount of information in a way that is accessible and enticing to users and will get them interested to learn more about cultural dishes and how to cook them?

Logistics

Team

Role

Duration

Tools

Self-directed, with feedback given from mentor and peers

Branding
UI/UX Designer

4 weeks
Sep. - Oct. 2019

Figma
Marvel

The End Product

View Final Prototype

Design Process

01. Research & Analysis

02. Ideate & Define

03. Interaction Design

04. Usability Testing

05. UI Design

Researched the current market and potential users

Created problem spaces and determined how to resolve them

Mapped user's journey and began designing

Evaluated viability of product's features through testing and feedback

Created and implemented brand identity

01. Research & Analysis

Purpose: Scoping out the current market and potential users

Process: Market Research, Competitive Analysis, Provisional Personas, User Interviews, Empathy Map Insights & Needs, Persona

Market Research

Culture Cook revolves around three realms: Cultural Dishes, Home Cooking, and Recipes.  By uncovering contextual information for these three topics, as well as people's experiences, I could create an app that would be relevant to particular set of users.

What’s Up with Cultural Dishes

As a proud Vietnamese-American with an open palette, I wanted to dispel a notion I had that everyone loves ethnic cuisines and are willing to try them.

Comparing two surveys taken a year apart, more than half of those surveyed said they were more interested in trying an ethnic cuisine compared to the previous year.

VOA: Top 10 Most Popular Ethnic Cuisines in US

So good, people have become increasingly more interested in trying out new dishes.  How about cooking them?

1st generation immigrants

are more inclined to remain connected to their traditional way of cooking.

2nd + 3rd generations

often make fusion-styled dishes due to lack of available ingredients, different palates, and/or clashing cultural identities.

61% of consumers

generally try ethnic-inspired foods at restaurants before prepping them at home.

Broadening the Scope

Understanding now how cultural dishes fit into home cooking, I wanted to see how people generally cook at home, and use recipes to assist them.

Millennials

2 out of 3 get recipes from online videos (namely, YouTube).

They also like the culinary process as much as the finished dish.

31-60 minutes

is the ideal time for prepping a meal.  For those that cook over 60 minutes, 30% of them consider themselves as just “home cooks”, compared to the 48% of passionate cooks.

The “Older Generation”

tend to cook at home often. Boomers even more so, as they tend to be exposed to food education at a younger age.

Key Takeaways

The market for cultural dishes is burgeoning, and Culture Cook needs cater to a wide demographic that have varying interests with cooking.

Competitive Analysis

Although (to my knowledge) there is no app that provides the same offerings as Culture Cook, I still conducted competitive analysis. This way, I could understand the features that other recipe apps have to offer, which would guide my design decisions for Culture Cook's app.

Competitive Analysis of Different Cooking Apps

Above is a preview of the analysis. Please click here if you would like to view the full file.

Provisional Personas

From my market research and competitive analysis, I created three provisional personas to use as a framework for potential users and interviewees.

Provisional Personas to Use as a Framework for Culture Cook's Interviews and Potential Users

User Interviews

To understand people's experiences with cooking, I conducted interviews with eight home cooks, scouting them at markets and asking them open-ended questions.

At the same time, I tasted a little bit at each step and wrote down any changes I made...

Participant #1, Rong, on a recent experience of cooking using a new recipe

They are hard because there’s so many ingredients and flavors, and I learned none of them.  So I’m starting from scratch.

Participant #7, Yashna, on her reasoning for cooking cultural dishes

These interviews helped me identify how home cooks utilize recipes and their experiences with cooking cultural dishes--both important aspects to Culture Cook's app.

Empathy Map

After gathering data from interviews, I mapped the responses out using an empathy map to observe repeating answers. I then clustered them into categories.

Empathy Map, Analyzing Data from Culture Cook Interviews

Insights & Needs

Through the empathy map clusters, I established user insights and needs--this would later create problem spaces that I could solve via Culture Cook's app and enhance it beyond any features requested in the project brief.

Insights & Needs for Problem Spaces

Persona

Once I established user needs, I made a persona by the name of "Sooah", who captured the essence of a primary user. Through Sooah, I would ensure that the end product would help match what she is looking out of a cultural cooking app.

Persona for Sooah, A Primary User of Culture Cook

02. Ideate & Define

Purpose: Create actionable problem spaces, ideate solutions, and map out new features

Process: POV + HMW Statements, Individual Brainstorming, Feature Prioritization, App Map, Card Sorting

POV + HMW Statements

Using Sooah, I reframed the user insights and needs from her point of view and as HMW statements so I could solve them with Culture Cook's additional features.

POV + HMW Statements to Reframe User Insights & Needs

Individual Brainstorming

For each HMW question, I conducted a brainstorm session (for a total of 2 rounds, 2 minutes each). Rapidly devising potential solutions would help exercise my creativity and think of novel ways to meet each problem space.

Different Ideas for Culture Cook Features from a Brainstorm Session

Feature Prioritization

After choosing the features for each HMW statement, I categorized each one based on the need to have it in the app. Since "different categorization scales" was a feature already required by Culture Cook's project brief, this was the highest priority to design.

Prioritizing Features Chosen to Answer the HMW Statements

App Map

Next, I constructed the overall architecture of the app's screens. As I had found from competitive analysis, there were many ways to link screens to one another. Thus, I also established multiple pathways between screens.

App Map for Culture Cook's Screens

Card Sorting

Given Culture Cook's vast database and multiple features for sorting through the available dishes, I conducted an open card sorting with six participants to gain insight on what would be the most user-friendly way to filter through dishes.

Reoccurring categories were by geographic location, meal type, and dietary restrictions. These would help guide the design of the "Recipes" screen and filters.

03. Interaction Design

Purpose: Understand user's journey through website

Process: User Flow, Task Flow,  Mid-Fidelity Prototype

User Flow

With an app map to reference, I created three user flows, each taking Sooah through various screens and actions. By visualizing her journey through Culture Cook, I could get a high level overview of how a user would use the additional features.

User Flow for Learning Japchae via Culture Cook

If you would like to view all three user flows, please click here.

Task Flow

I then broke each user flow down into specific, linear task flows. These flows would set the expectation of how a user should use Culture Cook to complete a task.

Multiple Task Flows for Culture Cook's App

If you would like to view all three task flows, please click here.

Mid-Fidelity Prototype

After sketching Culture Cook's screens, I created mid-fidelity wireframes using Figma, then imported them into Marvel to create a prototype. This prototype would be used to gain feedback based on usability testing and reviews from peers.

Mid-Fidelity Mockups for Culture Cook

04. Usability Testing

Purpose: Test the viability of implemented features through usability and feedback

Process: Usability Tasks, Affinity Map, Revised Wireframes

I conducted think-out-loud, moderated usability testing with six participants. Through usability testing, I would be able to get feedback on what was and wasn't working with the additional features to ensure they stayed user-friendly.

Usability Tasks

I provided a series of tasks for users to complete. This way, I could uncover any user pain points or successes with the additional features.

  • User Tasks
  1. Read about the author's forward for japchae
  2. Read japchae's recipe
  3. Learn how to julienne from japchae's recipe screen
  4. Filter out a shakshuka recipe search for one that takes less than 30 min. to make
  5. Adjust shakshuka's serving size to view how many ingredients are required
  6. Use the photo scan feature to find a recipe fore eggplant parmigiana
  7. Add a note for the parmigiana to substitute ricotta with a blend of cashew and tofu

Affinity Map

After gathering organizing data from the usability tests into an affinity map, I determined the updates that were needed to Culture Cook's app to make it more functional.

Insights & Recs for Priority Revisions

Revised Wireframes

Using the recommendations from usability testing, I updated the mid fidelity wireframes.

Revised Wireframe for Home Screen After Priority Revisions

05. User
Interface Design

Purpose: Create a brand identity and apply it create a high fidelity prototype

Process: Mood Board, Style Guide, UI Kit, High Fidelity Prototype

Style Guide

Now that I had working mid fidelity wireframes, I could start to build Culture Cook's brand and start applying it to their app. I first made a mood board, to gather inspiration, then designed a style guide to use for reference on Culture Cook's brand.

Style Guide for Culture Cook

UI Kit

Before designing the high fidelity wireframes, I created a UI kit of all the UI elements that will be implemented in the app. By creating the elements before implementing them into the wireframes, I could ensure they adhere to Culture Cook's brand identity.

UI Kit for Culture Cook

High Fidelity Prototype

Using the UI kit, I updated the mid-fidelity prototype to be high fidelity. This prototype will be the intended design for developer handoff and live implementation.

High Fidelity Prototype for Culture Cook

Conclusion

On top considering the features that were in the project brief, my research also led me to design additional features. In turn, the scale of the project increased greatly, making the information architecture even more complex. Even so, referencing what was already available from other recipe apps ensured that I was using common design patterns so that I could create a functional and enjoyable end-to-end recipe + info app that met the challenge presented by Culture Cook.

Next Steps

Continue User Testing
While I did test the additional features with users, I had only found one reoccuring insight from usability testing from the pool of six participants. In order to reinforce this insight and/or determine more, I would want to test with more participants.

Build Out the Remaining Features + Test
For the scope of this project, I solely focused on designing the additional features. Culture Cook's project brief intended to have other features (such as favoriting recipes into collections, having a grocery list), which I would want to design and test to create a fully functional design for Culture Cook.

^
Back to the top
Culture CookSpotifyJaunt Coffee RoastersZeit