Overview

Dishcovery helps you recognise, learn about, and cook with foods from around the world. It is a consumer app using image recognition to scan foreign ingredients and learn about their cultural and culinary contexts.

The app allows user to scan an ingredient, explore recipes by cuisine or ingredient, and save recipes for later.

Jump to final design ↓

Role

UI Designer
Front-End Engineer

Tools

Figma
React Native
Paper prototypes

Class

CS 147: Human-Computer Interaction Design
CS 194H: UX Design Project

Team Members

V2: Amrita Palaparthi
Janet Zhong
Kyla Guru

V3: Kayla Kelly
Sharon Wambu
Abena Ofosu

Awards

Best Project
Best Design (one of three)
Best Concept (one of three)

Project Duration

20 weeks
User Research

Problem space

Exploring the culinary terrain, we sought to understand the barriers that prevent individuals from engaging with and cooking cultural foods. Our goal was to identify these challenges and transform them into opportunities for deeper cultural connections through food.

Need-finding Interviews

Our need-finding mission involved face-to-face dialogues with a diverse demographic in the Bay Area—ranging from tech professionals and small business owners to artists and educators. These non-student adults, engaged in various vocations, provided a rich, nuanced understanding of the day-to-day culinary practices and the cultural significance of food in their lives.

Personas

In our need-finding phase, we engaged with a diverse array of personas (anonymised) to gain a comprehensive understanding of various cooking experiences:

  1. Martin: In his 30s, lacking strong cultural culinary connections, and not primarily motivated by food.
  2. Grace: A Taiwanese immigrant and the owner of an Asian grocery store, with insights into her customers' quests for authenticity in Asian cooking and the obstacles they face.
  3. Jaclyn: An immigrant from Peru and head chef at Comida Peruana, bringing a professional perspective on cultural cuisine and its preparation.
  4. Sofia: An immigrant from Mexico and a chef at Stanford, with a personal and professional tie to her cultural culinary roots.
  5. Amy: A server at Stanford's Decadence, who holds a deep sentimental connection to family recipes but faces emotional barriers to recreating them.
  6. Jeson: A Malaysian immigrant and founder of OpenChefs, providing a startup viewpoint on delivering authentic cultural food experiences to consumers.

Empathy Maps

We created empathy maps for each participant, such as a software engineer who misses the flavors of home and a local artist who uses food as a medium to connect with her heritage. These visual tools captured sentiments and experiences, highlighting the common thread of seeking authenticity and connection in their culinary endeavors. One such example is below.

Key Insights

  • Cultural Connection: Participants like Martin expressed a desire to reconnect with their heritage, seeking authentic culinary experiences as a bridge to their cultural roots.
  • Learning Preferences: Users such as Sofia showed a clear preference for hands-on, interactive learning methods, suggesting that experiential tools could significantly enhance their cooking journey.
  • Authenticity in Ingredients: There's a discernible trend towards valuing the authenticity of ingredients, not just in taste but in the cultural stories they tell, as highlighted by Grace.
  • Accessibility and Convenience: The ease of obtaining the right ingredients and understanding their use was a notable concern, indicating a need for accessible, user-friendly resources.
  • Community and Sharing: Many expressed that food is a communal experience, highlighting the potential for shared learnings and cultural exchange within a digital platform.

Solution Generation

HMWs (How Might We's)

The "How Might We" (HMW) questions are a set of prompts designed to open up the ideation space and encourage creative thinking. They reframe problems as opportunities for design. Our HMWs focused on making ingredients more approachable and self-explanatory for users. For instance:

  • "How might we create a system where ingredients can showcase their uses and cultural significance?"
  • “How might we use unfamiliarity itself to make cooking more exciting?”
  • “How might we make it so that unfamiliar ingredients speak for themselves?”

Experience Prototypes

Cultural Context Map Prototype

How might we create a system where ingredients can showcase their uses and cultural significance?
Objective

To gauge whether additional context about a dish's cultural and historical background enhances its appeal.

Method

Participants viewed images of culturally specific dishes, initially without, then with historical and cultural narratives.

Outcome
  • Positives: Visualization on a map increased appreciation for the ingredient’s popularity and cultural significance.
  • Negatives: Some confusion over variant dishes was observed, and a lack of actionable cooking references was noted.

Grocery Shopping Cultural Assistant Prototype

How might we make unfamiliar ingredients speak for themselves?
Objective

To test if ingredient background information demystifies unfamiliar items and influences purchase decisions.

Method

Participants were asked to rank their likelihood of purchasing certain foreign ingredients before and after being provided with comprehensive ingredient information.

Outcome
  • Positives: Additional information positively impacted the willingness to consider purchasing the ingredient.
  • Negatives: Lack of evidence on whether shoppers would actually utilize such information in a real shopping scenario and a tendency for convenience to trump novelty.

Ideation and Thematic Overlaps

After synthesizing the insights from our experience prototypes, we moved into the ideation phase. This involved an intensive brainstorming session where our team members independently proposed a total of 60 solutions, which we then compiled and analyzed for common themes. These themes were critical in guiding us toward solutions that aligned with our project’s goals and user needs.

Final Solution

A Grocery Shopping Companion with Image Recognition

  • Concept: A mobile app feature that enables users to scan an ingredient in the store and receive immediate information on its origins, recipes, and usage tips.
  • Benefits: Empowers users with knowledge at the point of decision, potentially influencing healthier and more culturally diverse food choices.
  • Risks: The effectiveness hinges on the quality of the image recognition software and the depth of the ingredient database.

Design Evolution

Low-Fi & Med-Fi Prototypes

Initial Explorations

Our initial low-fi and med-fi prototypes were aimed at testing core functionalities and gauging user interactions with the foundational concepts of our solution. This phase was crucial for exploring the user experience without the commitment to high-fidelity assets, allowing us to iterate quickly based on user feedback.

Based on our image recognition solution, the higher-level functionality of our app that we envisioned was that a user would be able to:

● Scan a foreign ingredient

● Learn about its and cultural geographical context

● Find recipes using that ingredient

● Save any recipe they encounter on the app for later use

● Explore recipes by dish, ingredient, or culture using a search function

Task Definitions

Simple task: Locate and scan a foreign ingredient.

This task is important because it uses the central functionality of the app, which we hope would draw intrigue from users. If users are excited about the scan functionality and are encouraged to use it, this would lead to them learning more about many ingredients.

Intermediate task: Learn about the foreign ingredient.

This task is important to provide a transition between our simple and medium tasks. By learning more about the ingredient, users are encouraged to experiment with it, which was also a result affirmed by our experience prototypes.

Complex task: Cook culturally authentic dishes using that ingredient.

The fulfillment of enjoying a meal using a potentially intimidating ingredient is one of the most important results we’d like to provide for our users. Once users cook using the recipes on Dishcovery, they’ll have obtained a new experience and added a new recipe to their arsenal, hopefully encouraging them to repeat the process with a different ingredient.

Low-Fi Sketches

Med-Fi Prototype V1

Our V1 design was a collaborative effort, as none of us had extensive experience in Figma. Following the heuristic evaluation, I took the role of designer and re-designed the task flows to create V2, which is displayed in the following section. Sample screens for V1 are below, for the second task: learning about an ingredient.

Heuristic Evaluation

The Design Evolution process involved iterative improvements based on heuristic evaluations and user feedback, aimed at enhancing task flow efficiency and user experience. Here is some feedback we received which led to a redesign and eventually V2.

Task 1: Scan an Unfamiliar Ingredient

  • Design Challenges & Solutions:
  • Improved clarity and confirmation feedback for successful scans and errors.
  • Enhanced visual design for better focus and user guidance.
  • Simplified color schemes for accessibility.

Task 2: Learn About Ingredient Context

Design Challenges & Solutions:

  • Increased visibility and accessibility of navigation elements.
  • Standardization of UI components for a cohesive look.
  • Inclusion of a "Request recipe" feature to foster inclusivity.

Task 3: Authentic Cooking

Design Challenges & Solutions:

  • Correction of navigational elements for accurate user flow.
  • Consistent use of fonts and design language for clarity.
  • Implementation of a confirmation step before un-saving items.
  • Addition of religious dietary preferences and improved search within liked recipes for personalization.

Final Design

Putting It All Together

This iteration of the design followed even more user research and heuristic evaluation. In brief, the V3 followed usability tests on the working version of V2 on Expo (built in React Native) in order to pinpoint where the user experience could be enhanced. This section will list the key screens as well as bullet points of what was introduced in V3.

Key Screens

Onboarding

  • Different Welcome screens for new and existing users, with sign-up and log in.
  • The option to customise dietary and food preferences.
  • The option to change said preferences in profile afterwards.

Explore and Search

  • Advanced filtering with the inclusion or exclusion of ingredients for people with allergies or picky eaters.
  • Suggestions for popular searches.
  • Increased contrast on recipe cards on Home page.
  • Inclusion of special cultural events on Home page, e.g. "Ramadan Specials".

Scan an Ingredient

  • Removed scan border, which did not have any actual functionality in the scanning API.
  • More visibility on progress bar.
  • Users do not learn context behind ingredient anymore, with context moved to recipes themselves.

Cook with Ingredient

  • Story-like progress on recipe steps, when we observed that scrolling + cooking while hands are soiled is hard for users.
  • Option to expand recipe and preview steps in order to plan ahead.
  • Customisable number of servings.
  • Cultural context added to Recipe page instead of Ingredient, with users able to see History, Variations, and Consumption.
  • Ability to jump between recipe and context with one button, "ABOUT THIS DISH" and "BACK TO RECIPE".

Saved Recipes

  • The ability to search and filter saved recipes.
  • The option to multi-select unsaved recipes, which is automatically toggled when a user clicks the heart above a recipe card.

Key Takeaways

  • Embracing Iteration: My journey with Dishcovery taught me the power of iteration. Each prototype, shaped by user feedback, was a step towards a more refined product. This iterative cycle wasn't just about improving Dishcovery; it mirrored my own growth as a designer, becoming more adept and nuanced with each cycle.
  • The Human-Centered Approach: Engaging with users from diverse backgrounds, I learned to see design through the lens of empathy. This experience deepened my understanding of design as a tool to connect and serve, pushing me to think beyond aesthetics and functionality to the core human experience.
  • Valuing User Voices: Feedback became the cornerstone of Dishcovery's design process. Learning to solicit, interpret, and act on user input was a humbling process that reinforced my belief in collaborative development.

Potential Improvements

"Cooked This!" Feature

A strategically designed "Cooked This!" button would serve dual functions. On the front end, it enhances user engagement by allowing them to collect badges or achievements, showcasing their culinary journey. Each completed recipe adds to their 'Culinary Passport', fostering a sense of accomplishment and encouraging further exploration.

On the back end, this feature becomes an invaluable analytics tool, providing us with direct insights into recipe completion rates. This KPI (Key Performance Indicator) not only measures the app’s engagement levels but also informs the product team about the recipes' popularity and user satisfaction. It's a subtle yet powerful method to track which cuisines or dishes resonate most with our audience, allowing us to tailor our content to user preferences more accurately.

Intelligent Personalization and AI Recommendations

Integrate a smarter recommendation system that not only analyzes user preferences and past behavior but also seasonal trends and local ingredient availability to offer personalized recipe suggestions.

Customizable User Dashboards

Allow users to personalize their dashboard to prioritize the content they are most interested in, such as highlighting favorite cuisines, dietary-specific recipes, or seasonal ingredients.

Cultural Representation and Collaboration

Partner with culinary experts from diverse backgrounds to curate and verify the authenticity of recipes, ensuring that the cultural narratives are accurately represented. This could also include a feature where users can submit their own family recipes for inclusion after a review process.

Enhanced Accessibility Features

Regular accessibility audits could lead to implementing features like voice commands for hands-free cooking assistance, high-contrast mode for users with visual impairments, and simple language options for users with cognitive disabilities.