UI Design · Frontend · UX Research

Dishcovery

An image-recognition app that helps you recognise, learn about, and cook with ingredients from cultures around the world.

Jump to Final Design ↓
Year
2024
Role
UI Designer · Frontend Engineer
Team
V2: Amrita Palaparthi, Janet Zhong, Kyla Guru · V3: Kayla Kelly, Sharon Wambu, Abena Ofosu
Context
20 weeks · Two iterations (CS 147 + CS 194H)
Tools
Figma, React Native, Clarifai AI, Paper prototypes
Awards
Best Project · Best Design · Best Concept

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 users to scan an ingredient, explore recipes by cuisine or ingredient, and save recipes for later.

Dishcovery App Overview
60
Ideas generated in brainstorming
20wks
Across two class iterations
6
Personas from Bay Area needfinding
Awards at CS 147 showcase

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

  • MartinIn his 30s, lacking strong cultural culinary connections, not primarily motivated by food.
  • GraceTaiwanese immigrant and owner of an Asian grocery store, insights into customers' quests for authenticity in Asian cooking.
  • JaclynImmigrant from Peru and head chef at Comida Peruana, professional perspective on cultural cuisine.
  • SofiaImmigrant from Mexico and chef at Stanford, personal and professional tie to her cultural culinary roots.
  • AmyServer at Stanford's Decadence, deep sentimental connection to family recipes but faces emotional barriers to recreating them.
  • JesonMalaysian immigrant and founder of OpenChefs, startup viewpoint on delivering authentic cultural food experiences.
Empathy Map for Dishcovery
Empathy map capturing user sentiments about cultural food experiences

Key Insights

  • Cultural ConnectionParticipants like Martin expressed a desire to reconnect with their heritage, seeking authentic culinary experiences as a bridge to their cultural roots.
  • Learning PreferencesUsers such as Sofia showed a clear preference for hands-on, interactive learning methods.
  • Authenticity in IngredientsThere's a discernible trend towards valuing the authenticity of ingredients, not just in taste but in the cultural stories they tell.
  • Accessibility and ConvenienceThe ease of obtaining the right ingredients and understanding their use was a notable concern.
  • Community and SharingMany expressed that food is a communal experience, highlighting the potential for shared learnings and cultural exchange within a digital platform.

Solution Generation

How Might We's

  • "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 Prototype: Cultural Context Map

Objective: gauge whether additional context about a dish's cultural and historical background enhances its appeal. Participants viewed images of culturally specific dishes, initially without, then with historical and cultural narratives. Positives: visualization on a map increased appreciation for the ingredient's popularity. Negatives: some confusion over variant dishes — led us to move context to the recipe page rather than the ingredient page.

Cultural Context Research
Testing how cultural context enhances food appreciation

Experience Prototype: Grocery Shopping Assistant

Objective: test if ingredient background information demystifies unfamiliar items and influences purchase decisions. Participants ranked likelihood of purchasing certain foreign ingredients before and after being provided comprehensive ingredient information. Positives: additional information positively impacted willingness to consider purchasing. Negatives: tendency for convenience to trump novelty in real shopping scenarios.

Ingredient Information Prototype
Prototype testing how ingredient information influences purchasing decisions

Ideation

After synthesizing insights from our experience prototypes, we moved into ideation. Our team members independently proposed a total of 60 solutions, which we compiled and analyzed for common themes. Final solution: a grocery shopping companion with image recognition — scan an ingredient in-store and receive immediate information on its origins, recipes, and usage tips.

Design Evolution

Low-fi & Med-fi Prototypes

Our initial low-fi and med-fi prototypes were aimed at testing core functionalities without the commitment to high-fidelity assets, allowing us to iterate quickly based on user feedback. The higher-level functionality envisioned: scan a foreign ingredient, learn about its cultural and geographical context, find recipes using that ingredient, and save any recipe for later.

Low-fidelity sketches
Low-fi sketches exploring key app features
Wireframe navigation flows
Wireframes showing navigation flows

Heuristic Evaluation Findings

  • Task 1 (Scan): Improved clarity and confirmation feedback for successful scans and errors; simplified color schemes for accessibility.
  • Task 2 (Learn): Increased visibility of navigation elements; standardization of UI components; added "Request recipe" feature for inclusivity.
  • Task 3 (Cook): Consistent font usage; confirmation step before un-saving; religious dietary preferences; improved search within liked recipes.

Final Design

V3 Redesign

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. Key changes: swipeable recipe steps replaced scrolling after watching someone try to cook with soiled hands; cultural context relocated to the recipe page; Ramadan Specials and cultural events added to the home screen.

User onboarding screens
Onboarding — different welcome screens for new and existing users
User preferences screens
Customizable dietary preferences, allergies, and cuisine interests
Explore and search screens
Advanced filtering with ingredient inclusion/exclusion and personalized recommendations
Ingredient scanning process
Scanning — progress indicators, success/failure states, ingredient information
Recipe screens
Recipe steps and cultural context with expandable sections
Saved recipes screens
Liked recipes with multi-select unsave functionality and filtering

"Recipe steps as story" — switching from scroll to swipe after watching someone try to cook with soiled hands.

Key Takeaways

  • Embracing IterationEach prototype, shaped by user feedback, was a step towards a more refined product. The iterative cycle mirrored my own growth as a designer.
  • The Human-Centered ApproachEngaging with users from diverse backgrounds taught me to see design through the lens of empathy — beyond aesthetics to the core human experience.
  • Valuing User VoicesFeedback 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.
MenutoFlock