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.
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?
From user research, I defined the following needs as problem spaces that Culture Cook could resolve:
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.
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.
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.
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.
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.
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.
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?
Team
Role
Duration
Tools
Self-directed, with feedback given from mentor and peers
Branding
UI/UX Designer
4 weeks
Sep. - Oct. 2019
Figma
Marvel
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
Purpose: Scoping out the current market and potential users
Process: Market Research, Competitive Analysis, Provisional Personas, User Interviews, Empathy Map Insights & Needs, Persona
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.
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?
are more inclined to remain connected to their traditional way of cooking.
often make fusion-styled dishes due to lack of available ingredients, different palates, and/or clashing cultural identities.
generally try ethnic-inspired foods at restaurants before prepping them at home.
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.
2 out of 3 get recipes from online videos (namely, YouTube).
They also like the culinary process as much as the finished dish.
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.
tend to cook at home often. Boomers even more so, as they tend to be exposed to food education at a younger age.
The market for cultural dishes is burgeoning, and Culture Cook needs cater to a wide demographic that have varying interests with cooking.
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.
Above is a preview of the analysis. Please click here if you would like to view the full file.
From my market research and competitive analysis, I created three provisional personas to use as a framework for potential users and interviewees.
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.
After gathering data from interviews, I mapped the responses out using an empathy map to observe repeating answers. I then clustered them into categories.
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.
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.
Purpose: Create actionable problem spaces, ideate solutions, and map out new features
Process: POV + HMW Statements, Individual Brainstorming, Feature Prioritization, App Map, Card Sorting
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.
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.
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.
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.
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.
Purpose: Understand user's journey through website
Process: User Flow, Task Flow, Mid-Fidelity Prototype
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.
If you would like to view all three user flows, please click here.
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.
If you would like to view all three task flows, please click here.
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.
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.
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.
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.
Using the recommendations from usability testing, I updated the mid fidelity wireframes.
Purpose: Create a brand identity and apply it create a high fidelity prototype
Process: Mood Board, Style Guide, UI Kit, High Fidelity Prototype
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.
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.
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.
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.
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.