RESTAURANT DISCOVERY
THROUGH FLAVOR AND
ALLERGY PROFILING.
RESTAURANT DISCOVERY
THROUGH FLAVOR AND
ALLERGY PROFILING.
WHAT IF EVERY NEW RESTAURANT EXPERIENCE DELIVERED
THE FLAVORS YOU LOVE IN NEW FOODS AND CUISINES
WHAT IF EVERY NEW RESTAURANT EXPERIENCE DELIVERED
THE FLAVORS YOU LOVE IN NEW FOODS AND CUISINES
WHAT IF EVERY NEW RESTAURANT EXPERIENCE DELIVERED THE FLAVORS
YOU LOVE IN NEW FOODS & CUISINES
PROBLEM
PROBLEM
Identifying restaurants that satisfy flavor preferences and food allergy needs remains a challenge, often leading to overlooked options and missed dining opportunities.
Identifying restaurants that satisfy flavor preferences and food allergy needs remains a challenge, often leading to overlooked options and missed dining opportunities.
SOLUTION
SOLUTION
Develop an innovative app that maps flavor profiles and tracks food allergies, enabling confident restaurant discovery.
Develop an innovative app that maps flavor profiles and tracks food allergies, enabling confident restaurant discovery.
MY ROLE
MY ROLE
Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototyping.
Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototyping.
RESTAURANT
DISCOVERY
THROUGH
FLAVOR AND
ALLERGY
PROFILING.
RESTAURANT
DISCOVERY
THROUGH
FLAVOR AND
ALLERGY
PROFILING.
RESEARCH PLAN —
SCHEDULE —
— PHASE 1 —
DISCOVERY
PLAN RESEARCH
1. Formulate Research Plan
2. Define User Audience
CONDUCT RESEARCH
1. Secondary Research
2. User Interview Prep
• Create Screener Survey
• Create Questionnaire
3. User Interviews
RESEARCH
1. User Personas
2. Jobs To Be Done
3. Empathy Mapping
4. User Stories
5. Thematic Analysis
5. How Might We Statements
— PHASE 1 —
DESIGN R1
DESIGN INFORMATION ARCHITECTURE
1. Create Site Map
2. User Flow Red Routes
DESIGN IN LOW FIDELITY
1. Red Route Sketches
2. Computer Wireframes
3. Edge Cases
4. Wireflow Red Routes
5. Define Color Palette/Type
6. Flavor Map Infographic
7. Icon Library
DESIGN INFORMATION ARCHITECTURE
1. Refine Design & Incorporate
Prototype Functionality
2. Begin Component Library
— PHASE 3 —
VALIDATE R1
PREPARE TO TEST
1. Create Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 4 —
DESIGN R2
DESIGN IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Complete Component
Library
— PHASE 5 —
VALIDATE R2
PREPARE TO TEST
1. Create Modified Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 6 —
DESIGN R3
ITERATE IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Finalize Component Library
RESEARCH PLAN —
SCHEDULE —
— PHASE 1 —
DISCOVERY
PLAN RESEARCH
1. Formulate Research Plan
2. Define User Audience
CONDUCT RESEARCH
1. Secondary Research
2. User Interview Prep
• Create Screener Survey
• Create Questionnaire
3. User Interviews
RESEARCH
1. User Personas
2. Jobs To Be Done
3. Empathy Mapping
4. User Stories
5. Thematic Analysis
5. How Might We Statements
— PHASE 1 —
DESIGN R1
DESIGN INFORMATION ARCHITECTURE
1. Create Site Map
2. User Flow Red Routes
DESIGN IN LOW FIDELITY
1. Red Route Sketches
2. Computer Wireframes
3. Edge Cases
4. Wireflow Red Routes
5. Define Color Palette/Type
6. Flavor Map Infographic
7. Icon Library
DESIGN INFORMATION ARCHITECTURE
1. Refine Design & Incorporate
Prototype Functionality
2. Begin Component Library
— PHASE 3 —
VALIDATE R1
PREPARE TO TEST
1. Create Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 4 —
DESIGN R2
DESIGN IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Complete Component
Library
— PHASE 5 —
VALIDATE R2
PREPARE TO TEST
1. Create Modified Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 6 —
DESIGN R3
ITERATE IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Finalize Component Library
PROBLEM
Identifying restaurants that satisfy flavor preferences & food allergy needs remains
a challenge, often leading to overlooked options and missed dining opportunities.
SOLUTION
Develop an innovative app that maps flavor profiles and tracks food allergies, enabling confident restaurant discovery.
MY ROLE
Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototypes.
• Above 21 years of age.
• Eats out at least 2-3 times a month.
• Utilizes smartphone to identify restaurants.
• Enjoys trying new restaurants/cuisines.
USER AUDIENCE
• Above 21 years of age.
• Eats out at least 2-3 times a month.
• Utilizes smartphone to identify restaurants.
• Enjoys trying new restaurants/cuisines.
USER AUDIENCE
SECONDARY RESEARCH —
COMPETIVE ANALYSIS —
APPLICATION FEATURE
iOS App Store Rating
Cost to Use (App)
User Reviews & Ratings
Reservation Booking
Driving Route Options
Menu Viewing
Photo Uploads & Galleries
Offline Access
Search Filters
Mapping & Directions
Flavor Profiling
Allergy Profiling
FOURSQUARE
4.3 / 5
FREE
OPENTABLE
4.3 / 5
FREE
YELP
4.3 / 5
FREE
UNDERSTANDING THE DINING DECISION +
SECONDARY RESEARCH —
COMPETIVE ANALYSIS —
APPLICATION FEATURE
iOS App Store Rating
Cost to Use (App)
User Reviews & Ratings
Reservation Booking
Driving Route Options
Menu Viewing
Photo Uploads & Galleries
Offline Access
Search Filters
Mapping & Directions
Flavor Profiling
Allergy Profiling
FOURSQUARE
4.3 / 5
FREE
OPENTABLE
4.3 / 5
FREE
YELP
4.3 / 5
FREE
UNDERSTANDING THE DINING DECISION +
QUALITATIVE RESEARCH +
QUALITATIVE RESEARCH +
Survey participants said they often had difficulty locating new restaurants and/or cuisines offering the flavors they truly craved.
Respondents stated food allergies had prevented them or their group from trying new restaurants or cuisines in the past experiences.
Survey participants reported difficulty finding restaurants that provided flavors each group member craved when dinning out.
Subjects acknowledged experiencing choice overload when utilizing restaurant discovery apps or search engines during discovery.
"I have to go through all
search results even though
it can be overwhelming
at times." — Nicole
"I have to go through all
search results even though
it can be overwhelming
at times." — Nicole
RESEARCH PLAN —
SCHEDULE —
— PHASE 1 —
DISCOVERY
PLAN RESEARCH
1. Formulate Research Plan
2. Define User Audience
CONDUCT RESEARCH
1. Secondary Research
2. User Interview Prep
• Create Screener Survey
• Create Questionnaire
3. User Interviews
RESEARCH SYNTHESIZE
1. User Personas
2. Jobs To Be Done
3. Empathy Mapping
4. User Stories
5. Thematic Analysis
5. How Might We Statements
— PHASE 2 —
DESIGN R1
DESIGN INFORMATION ARCHITECTURE
1. Create Site Map
2. User Flow Red Routes
DESIGN IN LOW FIDELITY
1. Red Route Sketches
2. Computer Wireframes
3. Edge Cases
4. Wireflow Red Routes
5. Define Color Palette/Type
6. Flavor Map Infographic
7. Icon Library
DESIGN PROTOTYPE
1. Refine Design & Incorporate
Prototype Functionality
2. Begin Component Library
— PHASE 3 —
VALIDATE R1
PREPARE TO TEST
1. Create Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 4 —
DESIGN R2
DESIGN IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Complete Component
Library
— PHASE 5 —
VALIDATE R2
PREPARE TO TEST
1. Create Modified Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 6 —
DESIGN R3
ITERATE IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Finalize Component Library
RESEARCH PLAN —
SCHEDULE —
— PHASE 1 —
DISCOVERY
PLAN RESEARCH
1. Formulate Research Plan
2. Define User Audience
CONDUCT RESEARCH
1. Secondary Research
2. User Interview Prep
• Create Screener Survey
• Create Questionnaire
3. User Interviews
RESEARCH SYNTHESIZE
1. User Personas
2. Jobs To Be Done
3. Empathy Mapping
4. User Stories
5. Thematic Analysis
5. How Might We Statements
— PHASE 2 —
DESIGN R1
DESIGN INFORMATION ARCHITECTURE
1. Create Site Map
2. User Flow Red Routes
DESIGN IN LOW FIDELITY
1. Red Route Sketches
2. Computer Wireframes
3. Edge Cases
4. Wireflow Red Routes
5. Define Color Palette/Type
6. Flavor Map Infographic
7. Icon Library
DESIGN PROTOTYPE
1. Refine Design & Incorporate
Prototype Functionality
2. Begin Component Library
— PHASE 3 —
VALIDATE R1
PREPARE TO TEST
1. Create Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 4 —
DESIGN R2
DESIGN IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Complete Component
Library
— PHASE 5 —
VALIDATE R2
PREPARE TO TEST
1. Create Modified Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 6 —
DESIGN R3
ITERATE IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Finalize Component Library
SECONDARY RESEARCH —
COMPETITIVE LANDSCAPE —
APPLICATION FEATURE
iOS App Store Rating
Cost to Use (App)
User Reviews & Ratings
Reservation Booking
Driving Route Options
Menu Viewing
Photo Uploads & Galleries
Offline Access
Search Filters
Mapping & Directions
Flavor Profiling
Allergy Profiling
FOURSQUARE
4.3 / 5
FREE
OPENTABLE
4.3 / 5
FREE
YELP
4.3 / 5
FREE
UNDERSTANDING THE DINING DECISION +
SECONDARY RESEARCH —
COMPETITIVE LANDSCAPE —
APPLICATION FEATURE
iOS App Store Rating
Cost to Use (App)
User Reviews & Ratings
Reservation Booking
Driving Route Options
Menu Viewing
Photo Uploads & Galleries
Offline Access
Search Filters
Mapping & Directions
Flavor Profiling
Allergy Profiling
FOURSQUARE
4.3 / 5
FREE
OPENTABLE
4.3 / 5
FREE
YELP
4.3 / 5
FREE
UNDERSTANDING THE DINING DECISION +
"I have to go through all search results
even though it can be overwhelming
at times." — Nicole
"I have to go through all search results
even though it can be overwhelming
at times." — Nicole
QUALITATIVE RESEARCH +
QUALITATIVE RESEARCH +
Survey participants said they often had difficulty locating new restaurants and/or cuisines offering the flavors they truly craved.
Respondents stated food allergies had prevented them or their group from trying new restaurants or cuisines in the past.
Survey participants reported dificulty finding restaurants that provided flavors each group member craved when dinning out.
Subjects acknowledged experiencing choice overload when utilizing restaurant discovery apps or search engines.
INSIGHTS INTO USER EXPERIENCES & DINING DECISIONS
RESEARCH SYNTHESIS —
USER PERSONAS —
Creating user personas helped empathize with users' challenges and prioritize what critical features to include, ensuring the product effectively solved key problems and maintain focus on the target users needs.
PARTICIPANT 1: KIM
GENDER: FEMALE
OCCUPATION: EXECUTIVE RECRUITER
LOCATION: MADSISON, WI
TIMES PER MONTH: 5-10
MARRIED: YES
CHILDREN: 4
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"Don't want to be influenced
by the hype."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• FOOD ALLERGY COMPLIANCE
• CLEANLINESS / HYGIENIC
THOUGHTS:
• ALWAYS LOOKING FOR NEW PLACES
• SOMETHING WE DO FRIDAYS
SEEKING:
• WELL ROUNDED EXPERIENCE
• BLENDS OF FAVORITE FLAVORS
PARAMETERS:
• GOOD COCKTAILS & WINE LIST
• REASONABLE WAIT TIMES
CRAVING:
• GOOD CURY DISHES
• AUTHENTIC THAI FOOD
PARTICIPANT 2: JOHN
GENDER: MALE
OCCUPATION: CONTENT CREATOR
LOCATION: MADSISON, WI
TIMES PER MONTH: 2-3
MARRIED: YES
CHILDREN: NONE
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'll try the burger that seems like nobody is going to buy."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• EXTENDED TRAVEL DISTANCES
• OPTIONS WITH FAVORITE FLAVORS
THOUGHTS:
• REVIEWS NOT INDICATIVE OF QUALITY
• SMELL THE SMELLS
SEEKING:
• SAFE FOR FOR WIFE WITH FOOD ALLERGIES
• NEW UNIQUE CUISINES AND EXPERIENCES
PARAMETERS:
• THE LESSER KNOWN GEMS
• REASONABLE PRICE
CRAVING:
• SPICY FOODS AND FLAVORS
• PICKLED AND SOUR TASTING
PARTICIPANT 3: ALEX
GENDER: MALE
OCCUPATION: SIGNAGE INSTALLER
LOCATION: SAN JOSE, CA
TIMES PER MONTH: 8-12
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'm in the mood for some
greasy goodness."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• PRICEY JOINTS WITH SMALL PORTIONS
• LIMITED OPTIONS WITH FLAVORS CRAVED
THOUGHTS:
• USUALLY PLAY IT SAFE
• APPRECIATE BAY AREA DIVERSITY
SEEKING:
• KID FRIENDLY OPTIONS
• FOODY TYPE SPOTS
PARAMETERS:
• HIGHEST RATING THAT'S REASONABLE
• PLACES THAT OFFERS FAVORITES
CRAVING:
• GOOD MEXICAN FOOD
• FAVORITE FLAVORS IN NEW DISHES
PARTICIPANT 4: NICOLE
GENDER: FEMALE
OCCUPATION: DEDICATED MOTHER
LOCATION: APPLETON, WI
TIMES PER MONTH: 1-4
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I have to go through all search results
even though it can be overwhelming."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• OVER PRICED OFFERINGS
• LACK OF FAVORITE FLAVORS IN DISHES
THOUGHTS:
• ALWAYS ORDER THE SAME THING
• TRY TO ADHERE TO DIET
SEEKING:
• CATCH ALL RESTAURANT
• WHAT'S ON THE WAY
PARAMETERS:
• CHILDREN COMPATIBLE
• REASONABLE PRICE
CRAVING:
• SPICY FOOD ON OCCASION
• GOOD TACOS
PARTICIPANT 5: EMILY
GENDER: FEMALE
OCCUPATION: ADMIN ASSISTANT
LOCATION: SAN FRANCISCO, CA
TIMES PER MONTH: 10-15
MARRIED: YES
CHILDREN: NONE / TWO DOGS
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"One of the perks of my job is I get to dine out frequently."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• IDENTIFYING OPTIONS WITH MY FLAVORS
• FOOD ALLERGY SAFE OPTIONS
THOUGHTS:
• PREFER MANAGEABLE NUMBER OPTIONS
• WORD OF MOUTH SUGGESTIONS
SEEKING:
• HIGH RATING / REVIEWS
• GOOD WHITE TABLE CLOTH RESTAURANT
PARAMETERS:
• ALIGN WITH CLIENTS PREFERENCES
• GREAT SERVICE
CRAVING:
• UNAMI AND GARLIC FLAVORS
• GOOD COCKTAILS
JOBS TO BE DONE +
Writing Jobs to Be Done statements helped clarify user needs, prioritizing feature development around meaningful goals and reduced choice overload by directing attention to what truly matters.
EMPATHY MAPPING +
Developing empathy maps uncovered unmet user needs while highlighting pain points in the restaurant discovery process and helped reduce assumptions, resulting in more user centered design solutions.
USER STORIES +
By creating user stories, I was able to translate broad problems into specific user challenges, which clarified priorities and informed product development decisions.
THEMATIC ANALYSIS +
Through thematic analysis, I identified common themes across participants, which helped me empathize with their pain points in the restaurant discovery process.
HOW MIGHT WE STATEMENTS +
Reframed user problems into meaningful opportunities for design, helping to identify a range of creative solutions.
RESEARCH SYNTHESIS —
USER PERSONAS —
Creating user personas helped empathize with users' challenges and prioritize what critical features to include, ensuring the product effectively solved key problems and maintain focus on the target users needs.
PARTICIPANT 1: KIM
GENDER: FEMALE
OCCUPATION: EXECUTIVE RECRUITER
LOCATION: MADSISON, WI
TIMES PER MONTH: 5-10
MARRIED: YES
CHILDREN: 4
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"Don't want to be influenced
by the hype."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• FOOD ALLERGY COMPLIANCE
• CLEANLINESS / HYGIENIC
THOUGHTS:
• ALWAYS LOOKING FOR NEW PLACES
• SOMETHING WE DO FRIDAYS
SEEKING:
• WELL ROUNDED EXPERIENCE
• BLENDS OF FAVORITE FLAVORS
PARAMETERS:
• GOOD COCKTAILS & WINE LIST
• REASONABLE WAIT TIMES
CRAVING:
• GOOD CURY DISHES
• AUTHENTIC THAI FOOD
PARTICIPANT 2: JOHN
GENDER: MALE
OCCUPATION: CONTENT CREATOR
LOCATION: MADSISON, WI
TIMES PER MONTH: 2-3
MARRIED: YES
CHILDREN: NONE
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'll try the burger that seems like nobody is going to buy."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• EXTENDED TRAVEL DISTANCES
• OPTIONS WITH FAVORITE FLAVORS
THOUGHTS:
• REVIEWS NOT INDICATIVE OF QUALITY
• SMELL THE SMELLS
SEEKING:
• SAFE FOR FOR WIFE WITH FOOD ALLERGIES
• NEW UNIQUE CUISINES AND EXPERIENCES
PARAMETERS:
• THE LESSER KNOWN GEMS
• REASONABLE PRICE
CRAVING:
• SPICY FOODS AND FLAVORS
• PICKLED AND SOUR TASTING
PARTICIPANT 3: ALEX
GENDER: MALE
OCCUPATION: SIGNAGE INSTALLER
LOCATION: SAN JOSE, CA
TIMES PER MONTH: 8-12
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'm in the mood for some
greasy goodness."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• PRICEY JOINTS WITH SMALL PORTIONS
• LIMITED OPTIONS WITH FLAVORS CRAVED
THOUGHTS:
• USUALLY PLAY IT SAFE
• APPRECIATE BAY AREA DIVERSITY
SEEKING:
• KID FRIENDLY OPTIONS
• FOODY TYPE SPOTS
PARAMETERS:
• HIGHEST RATING THAT'S REASONABLE
• PLACES THAT OFFERS FAVORITES
CRAVING:
• GOOD MEXICAN FOOD
• FAVORITE FLAVORS IN NEW DISHES
PARTICIPANT 4: NICOLE
GENDER: FEMALE
OCCUPATION: DEDICATED MOTHER
LOCATION: APPLETON, WI
TIMES PER MONTH: 1-4
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I have to go through all search results
even though it can be overwhelming."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• OVER PRICED OFFERINGS
• LACK OF FAVORITE FLAVORS IN DISHES
THOUGHTS:
• ALWAYS ORDER THE SAME THING
• TRY TO ADHERE TO DIET
SEEKING:
• CATCH ALL RESTAURANT
• WHAT'S ON THE WAY
PARAMETERS:
• CHILDREN COMPATIBLE
• REASONABLE PRICE
CRAVING:
• SPICY FOOD ON OCCASION
• GOOD TACOS
PARTICIPANT 5: EMILY
GENDER: FEMALE
OCCUPATION: ADMIN ASSISTANT
LOCATION: SAN FRANCISCO, CA
TIMES PER MONTH: 10-15
MARRIED: YES
CHILDREN: NONE / TWO DOGS
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"One of the perks of my job is I get to dine out frequently."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• IDENTIFYING OPTIONS WITH MY FLAVORS
• FOOD ALLERGY SAFE OPTIONS
THOUGHTS:
• PREFER MANAGEABLE NUMBER OPTIONS
• WORD OF MOUTH SUGGESTIONS
SEEKING:
• HIGH RATING / REVIEWS
• GOOD WHITE TABLE CLOTH RESTAURANT
PARAMETERS:
• ALIGN WITH CLIENTS PREFERENCES
• GREAT SERVICE
CRAVING:
• UNAMI AND GARLIC FLAVORS
• GOOD COCKTAILS
JOBS TO BE DONE +
Writing Jobs to Be Done statements helped clarify user needs, prioritizing feature development around meaningful goals and reduced choice overload by directing attention to what truly matters.
EMPATHY MAPPING +
Developing empathy maps uncovered unmet user needs while highlighting pain points in the restaurant discovery process and helped reduce assumptions, resulting in more user centered design solutions.
USER STORIES +
By creating user stories, I was able to translate broad problems into specific user challenges, which clarified priorities and informed product development decisions.
THEMATIC ANALYSIS +
Through thematic analysis, I identified common themes across participants, which helped me empathize with their pain points in the restaurant discovery process.
HOW MIGHT WE STATEMENTS +
Reframed user problems into meaningful opportunities for design, helping to identify a range of creative solutions.
INFORMATION ARCHITECTURE —
USER FLOW RED ROUTES —
Developing user flows for red routes provide a visualization of the critical user paths for development. By mapping these flows it helped to identify friction points early in design process and to ensure a user centered design.
SITE MAP +
Creating site map established a visual representation of the apps structure and how it would be navigated by users.
INFORMATION ARCHITECTURE —
USER FLOW RED ROUTES —
Developing user flows for red routes provide a visualization of the critical user paths for development. By mapping these flows it helped to identify friction points early in design process and to ensure a user centered design.
SITE MAP +
Creating site map established a visual representation of the apps structure and how it would be navigated by users.
LOW FIDELITY DESIGNS —
THUMBNAIL SKETCHES +
Low fidelity thumbnail sketches enabled quick exploration of potential layouts and flows, keeping the focus on structure and a user centered design and not focusing on more detailed design decisions until later.
WIREFRAMES —
Wireframes were created to establish the structural blueprint of key components and screens, while also introducing typeface selection and varying weights to begin defining the visual hierarchy within the screen designs.
WIREFLOW RED ROUTES +
Utilizing the wireframes, a more comprehensive user flow was created for each red route to visually analyze the different user journeys and identify any design pain points or production issues.
MOOD BOARD +
A mood board was created to provide design inspiration for layout, typography, color palettes, imagery and feel.
LOW FIDELITY DESIGNS —
THUMBNAIL SKETCHES +
Low fidelity thumbnail sketches enabled quick exploration of potential layouts and flows, keeping the focus on structure and a user centered design and not focusing on more detailed design decisions until later.
WIREFRAMES —
Wireframes were created to establish the structural blueprint of key components and screens, while also introducing typeface selection and varying weights to begin defining the visual hierarchy within the screen designs.
WIREFLOW RED ROUTES +
Utilizing the wireframes, a more comprehensive user flow was created for each red route to visually analyze the different user journeys and identify any design pain points or production issues.
MOOD BOARD +
A mood board was created to provide design inspiration for layout, typography, color palettes, imagery and feel.
RESEARCH PLAN
SCHEDULE —
— PHASE 1 —
DISCOVERY
PLAN RESEARCH
1. Formulate Research Plan
2. Define User Audience
CONDUCT RESEARCH
1. Secondary Research
2. User Interview Prep
• Create Screener Survey
• Create Questionnaire
3. User Interviews
RESEARCH SYNTHESIZE
1. User Personas
2. Jobs To Be Done
3. Empathy Mapping
4. User Stories
5. Thematic Analysis
5. How Might We Statements
— PHASE 2 —
DESIGN R1
DESIGN INFORMATION ARCHITECTURE
1. Create Site Map
2. User Flow Red Routes
DESIGN IN LOW FIDELITY
1. Red Route Sketches
2. Computer Wireframes
3. Edge Cases
4. Wireflow Red Routes
5. Create Flavor Infographic
6. Begin Icon Library
7. Explore Color/Type Options
DESIGN PROTOTYPE
1. Refine Design & Incorporate
Prototype Functionality
2. Begin Component Library
— PHASE 3 —
VALIDATE R1
PREPARE TO TEST
1. Create Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 4 —
DESIGN R2
DESIGN IN HIGH FIDELITY
1. Finalize Color Palette/Type
2. Finalize Icon Library
3. Finalize Flavor Infographic
3. Refine Design Based On
Usability Test Findings
4. Complete Component
Library
— PHASE 5 —
VALIDATE R2
PREPARE TO TEST
1. Create Modified Test Script
2. Identify & Book Test Users
CONDUCT TESTING
1. Conduct Remote Moderated
Usability Tests
SYNTHESIZE RESULTS
1. Analyze Interview Videos
2. Notarize Findings
3. Create Usability Test Report
— PHASE 6 —
DESIGN R3
ITERATE IN HIGH FIDELITY
1. Refine Design Based On
Usability Test Findings
2. Finalize Component Library
VALIDATE R1 —
USER FEEDBACK —
Utilizing the structural design of the wireframes an MVP prototype was created for each red route and user tested.
USABILITY TEST REPORT —
Users testing provide important feedback that was implemented into the second prototype iteration.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Option to sign up/login w/ Apple & Google in most apps.
Add option to sign up of login with Apple or Google.
CRITICAL
Need breadcrumbs for walkthrough so users
Add breadcrumb graphic for walkthrough progress.
CRITICAL
Need breadcrumbs for signup process so users no where they are in the process.
Adjust layout of signup and include a breadcrumb element at the top of screen indicating stage of process.
MINOR
Don't expect to see tab bar on first screen.
Remove tab bar on sign up screens.
MINOR
Add additional descriptions on purple screens.
Add additional description to walkthrough boxes.
MINOR
What type of subscription, monthly?
Add "Monthly" to description verbiage.
MINOR
Option needed to go back a screen.
Add "Back" button to walkthrough with "Cancel" button.
MINOR
Placement of walkthrough boxes confusing.
Keep placement of consistent from screen to screen.
MINOR
Password entry fields typically have ability to toggle from hidden to visible.
Add an "eye" UI element indicating the ability to toggle between hidden and visible to password field.
MINOR
The reversed out text in the search results prevents a clear visual hierarchy, visually noisy.
Reformat the search result boxes removing reversed out text and increase white space.
NORMAL
Need splash screen with logo and tagline first screen.
Add splash screen with logo.
VALIDATE R1 —
USER FEEDBACK —
Utilizing the structural design of the wireframes an MVP prototype was created for each red route and user tested.
USABILITY TEST REPORT —
Users testing provide important feedback that was implemented into the second prototype iteration.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Option to sign up/login w/ Apple & Google in most apps.
Add option to sign up of login with Apple or Google.
CRITICAL
Need breadcrumbs for walkthrough so users
Add breadcrumb graphic for walkthrough progress.
CRITICAL
Need breadcrumbs for signup process so users no where they are in the process.
Adjust layout of signup and include a breadcrumb element at the top of screen indicating stage of process.
MINOR
Don't expect to see tab bar on first screen.
Remove tab bar on sign up screens.
MINOR
Add additional descriptions on purple screens.
Add additional description to walkthrough boxes.
MINOR
What type of subscription, monthly?
Add "Monthly" to description verbiage.
MINOR
Option needed to go back a screen.
Add "Back" button to walkthrough with "Cancel" button.
MINOR
Placement of walkthrough boxes confusing.
Keep placement of consistent from screen to screen.
MINOR
Password entry fields typically have ability to toggle from hidden to visible.
Add an "eye" UI element indicating the ability to toggle between hidden and visible to password field.
MINOR
The reversed out text in the search results prevents a clear visual hierarchy, visually noisy.
Reformat the search result boxes removing reversed out text and increase white space.
NORMAL
Need splash screen with logo and tagline first screen.
Add splash screen with logo.
DESIGN PROTOTYPE R1 —
PROTOTYPE —
DESIGN PROTOTYPE R1 —
PROTOTYPE —
• Above 21 years of age.
• Eats out at least 2-3 times a month.
• Utilizes smartphone to identify restaurants.
• Enjoys trying new restaurants/cuisines.
USER AUDIENCE
DESIGN PROTOTYPE R2 —
ICON LIBRARY +
Icons were created for the tab bar & menus along with abstracted icons for flavor profiling and allergy profiling.
FLAVOR PROFILE INFOGRAPHIC +
Designed to map each primary and secondary flavor allowing the user to view their profile at a glance on the home screen and when viewing a restaurants profile screen for a visual representation of its flavor profile.
COMPONENT LIBRARY +
During the second round of the design process the component library was completed and finalized.
COLOR PALETTE —
After finalizing the color palette, each color combination was verified for a passing minimum contrast ratio according to the Web Content Accessibility Guidelines.
COLOR COMBINATION
CONTRAST
RATIO
NORMAL TEXT
(14-18px)
LARGE TEXT
(18px or 14px+bold)
OBJECTS & UI
(Graphics, Controls)
FOREGROUND
#F05A28
BACKGROUND
#000000
6.19:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#551E4B
BACKGROUND
#FFFFFFF
12.54:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#A23895
BACKGROUND
#DDE2E3
4.54:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#3D3D3D
BACKGROUND
#FFFFFF
10.86:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#FFFFFF
BACKGROUND
#A23895
5.93:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
PROTOTYPE —
Applying usability testing feedback, a second iteration was designed with a new color palette and refine structure.
DESIGN PROTOTYPE R2 —
ICON LIBRARY +
Icons were created for the tab bar & menus along with abstracted icons for flavor profiling and allergy profiling.
FLAVOR PROFILE INFOGRAPHIC +
Designed to map each primary and secondary flavor allowing the user to view their profile at a glance on the home screen and when viewing a restaurants profile screen for a visual representation of its flavor profile.
COMPONENT LIBRARY +
During the second round of the design process the component library was completed and finalized.
COLOR PALETTE —
After finalizing the color palette, each color combination was verified for a passing minimum contrast ratio according to the Web Content Accessibility Guidelines.
COLOR COMBINATION
CONTRAST
RATIO
NORMAL TEXT
(14-18px)
LARGE TEXT
(18px or 14px+bold)
OBJECTS & UI
(Graphics, Controls)
FOREGROUND
#F05A28
BACKGROUND
#000000
6.19:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#551E4B
BACKGROUND
#FFFFFFF
12.54:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#A23895
BACKGROUND
#DDE2E3
4.54:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#3D3D3D
BACKGROUND
#FFFFFF
10.86:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#FFFFFF
BACKGROUND
#A23895
5.93:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
PROTOTYPE —
Applying usability testing feedback, a second iteration was designed with a new color palette and refine structure.
VALIDATE R2 —
USABILITY TEST REPORT —
A second round of moderated usability testing was conducted with another group of participants for more feedback.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Include key flavors & allergy info within search result list.
Include key flavor and allergy ratings in results.
CRITICAL
Instructions too long, big blocks of text discouraging.
Modify design to accordion section with only 1st sent
MINOR
Location icons on search results should be numbered.
Add number to location icons.
MINOR
Some of the transitions between screens slide in wrong.
Adjust animation to correct orrientation.
MINOR
Would be nice to have operating times in search results.
Add operating times to search results.
MINOR
Need Apple & Google pay options in signup process.
Add Apple & Google pay option to payment screen.
MINOR
Background gradient during signup distracting.
Change background to more subtle gradient.
MINOR
Restaurant profile page section info not needed.
Remove page section info in restaurant profile section.
MINOR
"Profile" btn on restaurant profile not selected.
Change button state to indicate on "Profile."
MINOR
Hard to read pink text on item profiling screen.
Change input text color to standard grey.
VALIDATE R2 —
USABILITY TEST REPORT —
A second round of moderated usability testing was conducted with another group of participants for more feedback.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Include key flavors & allergy info within search result list.
Include key flavor and allergy ratings in results.
CRITICAL
Instructions too long, big blocks of text discouraging.
Modify design to accordion section with only 1st sent
MINOR
Location icons on search results should be numbered.
Add number to location icons.
MINOR
Some of the transitions between screens slide in wrong.
Adjust animation to correct orrientation.
MINOR
Would be nice to have operating times in search results.
Add operating times to search results.
MINOR
Need Apple & Google pay options in signup process.
Add Apple & Google pay option to payment screen.
MINOR
Background gradient during signup distracting.
Change background to more subtle gradient.
MINOR
Restaurant profile page section info not needed.
Remove page section info in restaurant profile section.
MINOR
"Profile" btn on restaurant profile not selected.
Change button state to indicate on "Profile."
MINOR
Hard to read pink text on item profiling screen.
Change input text color to standard grey.
FINAL PROTOTYPE —
PROTOTYPE —
After conducting two rounds of moderated usability testing, all critical errors identified by participants were fixed. Several other minor and normal errors brought up by more than one participant were also addressed and revisions were made based on that feedback.
FINAL PROTOTYPE —
PROTOTYPE —
After conducting two rounds of moderated usability testing, all critical errors identified by participants were fixed. Several other minor and normal errors brought up by more than one participant were also addressed and revisions were made based on that feedback.
THE RUNDOWN —
WHAT I LEARNED —
Over the course of the Flavor Flux project, I gained experience with a design process that was much more research-driven than a typical graphic design approach. I obtained a detailed understanding of the target audience by implementing a user screener survey to identify key users and conducting interviews to uncover their needs and emotions throughout the restaurant discovery journey. Having always gravitated toward a research-driven creative process, I recognized the value of interacting with the target audience before beginning the design phase.
Synthesizing qualitative research findings through empathy mapping, user stories, and thematic analysis helped me develop a thorough understanding of user needs and truly empathize with the users. This detailed insight provided a blueprint for the product development process, starting with user flows and a site map during the information architecture stage, then evolving into thumbnail sketches and wireframes in the low-fidelity design stage. While my experience as a graphic designer has given me extensive practice with thumbnail sketching and low-fidelity mockups, I had no prior experience developing functional prototypes. Adding this skill to my creative toolbox was incredibly exciting.
WHAT IT SOLVED —
Developing the Flavor Flux app solved the root problem of the restaurant discovery process by enabling users to identify restaurants with the flavors they craved and any potential food allergies users might have, without having to carefully analyze the menus of each dining option. By creating flavor and allergy profiling, all search queries were automatically filtered based on these preferences, providing targeted, user-centered suggestions that significantly reduced the effects of choice overload.
THE RUNDOWN —
WHAT I LEARNED —
Over the course of the Flavor Flux project, I gained experience with a design process that was much more research-driven than a typical graphic design approach. I obtained a detailed understanding of the target audience by implementing a user screener survey to identify key users and conducting interviews to uncover their needs and emotions throughout the restaurant discovery journey. Having always gravitated toward a research-driven creative process, I recognized the value of interacting with the target audience before beginning the design phase.
Synthesizing qualitative research findings through empathy mapping, user stories, and thematic analysis helped me develop a thorough understanding of user needs and truly empathize with the users. This detailed insight provided a blueprint for the product development process, starting with user flows and a site map during the information architecture stage, then evolving into thumbnail sketches and wireframes in the low-fidelity design stage. While my experience as a graphic designer has given me extensive practice with thumbnail sketching and low-fidelity mockups, I had no prior experience developing functional prototypes. Adding this skill to my creative toolbox was incredibly exciting.
WHAT IT SOLVED —
Developing the Flavor Flux app solved the root problem of the restaurant discovery process by enabling users to identify restaurants with the flavors they craved and any potential food allergies users might have, without having to carefully analyze the menus of each dining option. By creating flavor and allergy profiling, all search queries were automatically filtered based on these preferences, providing targeted, user-centered suggestions that significantly reduced the effects of choice overload.
• Above 21 years of age.
• Eats out at least 2-3 times a month.
• Utilizes smartphone to identify restaurants.
• Enjoys trying new restaurants/cuisines.
USER AUDIENCE
• Above 21 years of age.
• Eats out at least 2-3 times a month.
• Utilizes smartphone to identify restaurants.
• Enjoys trying new restaurants/cuisines.
USER AUDIENCE
SECONDARY RESEARCH —
COMPETITIVE LANDSCAPE —
APPLICATION FEATURE
iOS App Store Rating
Cost to Use (App)
User Reviews & Ratings
Reservation Booking
Driving Route Options
Menu Viewing
Photo Uploads & Galleries
Offline Access
Search Filters
Mapping & Directions
Flavor Profiling
Allergy Profiling
FOURSQUARE
4.3 / 5
FREE
OPENTABLE
4.3 / 5
FREE
YELP
4.3 / 5
FREE
UNDERSTANDING THE DINING DECISION +
QUALITATIVE RESEARCH +
INSIGHTS INTO USER EXPERIENCES & DINING DECISIONS
Survey participants said they often had difficulty locating new restaurants and/or cuisines offering the flavors they truly craved.
Respondents stated food allergies had prevented them or their group from trying new restaurants or cuisines in the past.
Survey participants reported dificulty finding restaurants that provided flavors each group member craved when dinning out.
Subjects acknowledged experiencing choice overload when utilizing restaurant discovery apps or search engines.
"I have to go through all search results
even though it can be overwhelming
at times." — Nicole
INFORMATION ARCHITECURE —
USER FLOW RED ROUTE 1 —
Developing user flows for red routes provide a visualization of the critical user paths for development. By mapping these flows it helped to identify friction points early in design process and to ensure a user centered design.
SITE MAP +
Creating site map established a visual representation of the apps structure and how it would be navigated by users.
INFORMATION ARCHITECURE —
USER FLOW RED ROUTE 1 —
Developing user flows for red routes provide a visualization of the critical user paths for development. By mapping these flows it helped to identify friction points early in design process and to ensure a user centered design.
SITE MAP +
Creating site map established a visual representation of the apps structure and how it would be navigated by users.
LOW FIDELITY DESIGNS —
THUMBNAIL SKETCHES +
Low fidelity thumbnail sketches enabled quick exploration of potential layouts and flows, keeping the focus on structure and a user centered design and not focusing on more detailed design decisions until later.
WIREFRAMES —
Wireframes were created to establish the structural blueprint of key components and screens, while also introducing typeface selection and varying weights to begin defining the visual hierarchy within the screen designs.
WIREFLOW RED ROUTES +
Utilizing the wireframes, a more comprehensive user flow was created for each red route to visually analyze the different user journeys and identify any design pain points or production issues.
MOOD BOARD +
A mood board was created to provide design inspiration for layout, typography, color palettes, imagery and feel.
LOW FIDELITY DESIGNS —
THUMBNAIL SKETCHES +
Low fidelity thumbnail sketches enabled quick exploration of potential layouts and flows, keeping the focus on structure and a user centered design and not focusing on more detailed design decisions until later.
WIREFRAMES —
Wireframes were created to establish the structural blueprint of key components and screens, while also introducing typeface selection and varying weights to begin defining the visual hierarchy within the screen designs.
WIREFLOW RED ROUTES +
Utilizing the wireframes, a more comprehensive user flow was created for each red route to visually analyze the different user journeys and identify any design pain points or production issues.
MOOD BOARD +
A mood board was created to provide design inspiration for layout, typography, color palettes, imagery and feel.
RESEARCH SYNTHESIS —
USER PERSONAS —
Creating user personas helped empathize with users' challenges and prioritize what critical features to include, ensuring the product effectively solved key problems and maintain focus on the target users needs.
PARTICIPANT 1: KIM
GENDER: FEMALE
OCCUPATION: EXECUTIVE RECRUITER
LOCATION: MADSISON, WI
TIMES PER MONTH: 5-10
MARRIED: YES
CHILDREN: 4
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"Don't want to be influenced
by the hype."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• FOOD ALLERGY COMPLIANCE
• CLEANLINESS / HYGIENIC
THOUGHTS:
• ALWAYS LOOKING FOR NEW PLACES
• SOMETHING WE DO FRIDAYS
SEEKING:
• WELL ROUNDED EXPERIENCE
• BLENDS OF FAVORITE FLAVORS
PARAMETERS:
• GOOD COCKTAILS & WINE LIST
• REASONABLE WAIT TIMES
CRAVING:
• GOOD CURY DISHES
• AUTHENTIC THAI FOOD
PARTICIPANT 2: JOHN
GENDER: MALE
OCCUPATION: CONTENT CREATOR
LOCATION: MADSISON, WI
TIMES PER MONTH: 2-3
MARRIED: YES
CHILDREN: NONE
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'll try the burger that seems like nobody is going to buy."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• EXTENDED TRAVEL DISTANCES
• OPTIONS WITH FAVORITE FLAVORS
THOUGHTS:
• REVIEWS NOT INDICATIVE OF QUALITY
• SMELL THE SMELLS
SEEKING:
• SAFE FOR FOR WIFE WITH FOOD ALLERGIES
• NEW UNIQUE CUISINES AND EXPERIENCES
PARAMETERS:
• THE LESSER KNOWN GEMS
• REASONABLE PRICE
CRAVING:
• SPICY FOODS AND FLAVORS
• PICKLED AND SOUR TASTING
PARTICIPANT 3: ALEX
GENDER: MALE
OCCUPATION: SIGNAGE INSTALLER
LOCATION: SAN JOSE, CA
TIMES PER MONTH: 8-12
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'm in the mood for some
greasy goodness."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• PRICEY JOINTS WITH SMALL PORTIONS
• LIMITED OPTIONS WITH FLAVORS CRAVED
THOUGHTS:
• USUALLY PLAY IT SAFE
• APPRECIATE BAY AREA DIVERSITY
SEEKING:
• KID FRIENDLY OPTIONS
• FOODY TYPE SPOTS
PARAMETERS:
• HIGHEST RATING THAT'S REASONABLE
• PLACES THAT OFFERS FAVORITES
CRAVING:
• GOOD MEXICAN FOOD
• FAVORITE FLAVORS IN NEW DISHES
PARTICIPANT 4: NICOLE
GENDER: FEMALE
OCCUPATION: DEDICATED MOTHER
LOCATION: APPLETON, WI
TIMES PER MONTH: 1-4
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I have to go through all search results
even though it can be overwhelming."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• OVER PRICED OFFERINGS
• LACK OF FAVORITE FLAVORS IN DISHES
THOUGHTS:
• ALWAYS ORDER THE SAME THING
• TRY TO ADHERE TO DIET
SEEKING:
• CATCH ALL RESTAURANT
• WHAT'S ON THE WAY
PARAMETERS:
• CHILDREN COMPATIBLE
• REASONABLE PRICE
CRAVING:
• SPICY FOOD ON OCCASION
• GOOD TACOS
PARTICIPANT 5: EMILY
GENDER: FEMALE
OCCUPATION: ADMIN ASSISTANT
LOCATION: SAN FRANCISCO, CA
TIMES PER MONTH: 10-15
MARRIED: YES
CHILDREN: NONE / TWO DOGS
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"One of the perks of my job is I get to dine out frequently."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• IDENTIFYING OPTIONS WITH MY FLAVORS
• FOOD ALLERGY SAFE OPTIONS
THOUGHTS:
• PREFER MANAGEABLE NUMBER OPTIONS
• WORD OF MOUTH SUGGESTIONS
SEEKING:
• HIGH RATING / REVIEWS
• GOOD WHITE TABLE CLOTH RESTAURANT
PARAMETERS:
• ALIGN WITH CLIENTS PREFERENCES
• GREAT SERVICE
CRAVING:
• UNAMI AND GARLIC FLAVORS
• GOOD COCKTAILS
JOBS TO BE DONE +
Writing Jobs to Be Done statements helped clarify user needs, prioritizing feature development around meaningful goals and reduced choice overload by directing attention to what truly matters.
EMPATHY MAPS +
Developing empathy maps uncovered unmet user needs while highlighting pain points in the restaurant discovery process and helped reduce assumptions, resulting in more user centered design solutions.
USER STORIES +
By creating user stories, I was able to translate broad problems into specific user challenges, which clarified priorities and informed product development decisions.
THEMATIC ANALYSIS +
Through thematic analysis, I identified common themes across participants, which helped me empathize with their pain points in the restaurant discovery process.
HOW MIGHT WE STATEMENTS +
Writing How Might We Statements allowed me to reframe user problems into meaningful opportunities for design.
INFORMATION ARCHITECTURE —
USER FLOW RED ROUTES —
Developing user flows for red routes provide a visualization of the critical user paths for development. By mapping these flows it helped to identify friction points early in design process and to ensure a user centered design.
SITE MAP +
Creating site map established a visual representation of the apps structure and how it would be navigated by users.
LOW FIDELTY DESIGNS —
THUMBNAIL SKETCHES +
Low fidelity thumbnail sketches enabled quick exploration of potential layouts and flows, keeping the focus on structure and a user centered design and not focusing on more detailed design decisions until later.
WIREFRAMES —
Wireframes were created to establish the structural blueprint of key components and screens, while also introducing typeface selection and varying weights to begin defining the visual hierarchy within the screen designs.
WIREFLOW RED ROUTES +
Utilizing the wireframes, a more comprehensive user flow was created for each red route to visually analyze the different user journeys and identify any design pain points or production issues.
MOOD BOARD +
A mood board was created to provide design inspiration for layout, typography, color palettes, imagery and feel.
Usability testing kept the design
process focused on user needs and highlighted the importance of adhering to Jakobs Law.
Usability testing kept the design
process focused on user needs and highlighted the importance of adhering to Jakobs Law.
Usability testing kept the design
process focused on user needs and highlighted the importance of adhering to Jakobs Law.
Usability testing kept the design
process focused on user needs and highlighted the importance of adhering to Jakobs Law.
DESIGN PROTOTYPE R1 —
PROTOTYPE —
DESIGN PROTOTYPE R1 —
PROTOTYPE —
VALIDATE R1 —
USER FEEDBACK —
Utilizing the structural design of the wireframes an MVP prototype was created for each red route and user tested.
USABILITY TEST REPORT —
Users testing provide important feedback that was implemented into the second prototype iteration.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Need option to sign up/login w/ Apple & Google.
Add option to sign up of login with Apple or Google.
CRITICAL
Need breadcrumbs for walkthrough so users.
Add breadcrumb graphic for walkthrough progress.
CRITICAL
Need breadcrumbs for signup process so users no where they are in the process.
Adjust layout of signup and include a breadcrumb element at the top of screen indicating stage of process.
MINOR
Don't expect to see tab bar on first screen.
Remove tab bar on sign up screens.
MINOR
Add additional descriptions on purple screens.
Add additional description to walkthrough boxes.
MINOR
What type of subscription, monthly?
Add "Monthly" to description verbiage.
MINOR
Option needed to go back a screen.
Add "Back" button to walkthrough with "Cancel" button.
MINOR
Placement of walkthrough boxes confusing.
Keep placement of consistent from screen to screen.
MINOR
Password entry fields typically have ability to toggle from hidden to visible.
Add an "eye" UI element indicating the ability to toggle between hidden and visible to password field.
MINOR
The reversed out text in the search results prevents a clear visual hierarchy, visually noisy.
Reformat the search result boxes removing reversed out text and increase white space.
NORMAL
Need splash screen with logo and tagline first screen.
Add splash screen with logo.
VALIDATE R1 —
USER FEEDBACK —
Utilizing the structural design of the wireframes an MVP prototype was created for each red route and user tested.
USABILITY TEST REPORT —
Users testing provide important feedback that was implemented into the second prototype iteration.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Need option to sign up/login w/ Apple & Google.
Add option to sign up of login with Apple or Google.
CRITICAL
Need breadcrumbs for walkthrough so users.
Add breadcrumb graphic for walkthrough progress.
CRITICAL
Need breadcrumbs for signup process so users no where they are in the process.
Adjust layout of signup and include a breadcrumb element at the top of screen indicating stage of process.
MINOR
Don't expect to see tab bar on first screen.
Remove tab bar on sign up screens.
MINOR
Add additional descriptions on purple screens.
Add additional description to walkthrough boxes.
MINOR
What type of subscription, monthly?
Add "Monthly" to description verbiage.
MINOR
Option needed to go back a screen.
Add "Back" button to walkthrough with "Cancel" button.
MINOR
Placement of walkthrough boxes confusing.
Keep placement of consistent from screen to screen.
MINOR
Password entry fields typically have ability to toggle from hidden to visible.
Add an "eye" UI element indicating the ability to toggle between hidden and visible to password field.
MINOR
The reversed out text in the search results prevents a clear visual hierarchy, visually noisy.
Reformat the search result boxes removing reversed out text and increase white space.
NORMAL
Need splash screen with logo and tagline first screen.
Add splash screen with logo.
DESIGN PROTOTYPE R2 —
ICON LIBRARY +
Icons were created for the tab bar & menus along with abstracted icons for flavor profiling and allergy profiling.
FLAVOR PROFILE INFOGRAPHIC +
Designed to map each primary and secondary flavor allowing the user to view their profile at a glance on the home screen and when viewing a restaurants profile screen for a visual representation of its flavor profile.
COMPONENT LIBRARY +
During the second round of the design process the component library was completed and finalized.
COLOR PALETTE —
After finalizing the color palette, each color combination was verified for a passing minimum contrast ratio according to the Web Content Accessibility Guidelines.
COLOR
COMBINATION
CONTRAST
RATIO
NORMAL
TEXT
(14-18px)
LARGE TEXT
(18px or 14px+bold)
OBJECTS & UI
(18px or 14px+bold)
FOREGROUND
#F05A28
FOREGROUND
#000000
6.19:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#551E4B
FOREGROUND
#FFFFFF
12.54:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#A23895
FOREGROUND
#DDE2E3
4.54:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#3D3D3D
FOREGROUND
#FFFFFF
10.86:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#FFFFFF
FOREGROUND
#A23895
5.93:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
PROTOTYPE —
Applying usability testing feedback, a second iteration was designed with a new color palette and refine structure.
DESIGN PROTOTYPE R2 —
ICON LIBRARY +
Icons were created for the tab bar & menus along with abstracted icons for flavor profiling and allergy profiling.
FLAVOR PROFILE INFOGRAPHIC +
Designed to map each primary and secondary flavor allowing the user to view their profile at a glance on the home screen and when viewing a restaurants profile screen for a visual representation of its flavor profile.
COMPONENT LIBRARY +
During the second round of the design process the component library was completed and finalized.
COLOR PALETTE —
After finalizing the color palette, each color combination was verified for a passing minimum contrast ratio according to the Web Content Accessibility Guidelines.
COLOR
COMBINATION
CONTRAST
RATIO
NORMAL
TEXT
(14-18px)
LARGE TEXT
(18px or 14px+bold)
OBJECTS & UI
(18px or 14px+bold)
FOREGROUND
#F05A28
FOREGROUND
#000000
6.19:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#551E4B
FOREGROUND
#FFFFFF
12.54:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#A23895
FOREGROUND
#DDE2E3
4.54:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#3D3D3D
FOREGROUND
#FFFFFF
10.86:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#FFFFFF
FOREGROUND
#A23895
5.93:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
PROTOTYPE —
Applying usability testing feedback, a second iteration was designed with a new color palette and refine structure.
VALIDATE R2 —
USABILITY TEST REPORT —
A second round of moderated usability testing was conducted with another group of participants for more feedback.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Include key flavors & allergy info in search result list.
Include key flavor and allergy ratings in results.
CRITICAL
Instructions too long, big blocks of text discouraging.
Modify design to accordion section with only 1st sent
MINOR
Location icons on search results should be numbered.
Add number to location icons.
MINOR
Some of the transitions between screens slide in wrong.
Adjust animation to correct orientation.
MINOR
Would be nice to have operating times in search results.
Add operating times to search results.
MINOR
Would be nice to see Apple & Google pay option.
Add Apple & Google pay option to payment screen.
MINOR
Background gradient during signup distracting.
Change background to more subtle gradient.
MINOR
Restaurant profile page section info not needed.
Remove page section info in restaurant profile section.
MINOR
"Profile" btn on restaurant profile not selected.
Change button state to indicate on "Profile."
MINOR
Hard to read pink text on item profiling screen.
Change input text color to standard grey.
VALIDATE R2 —
USABILITY TEST REPORT —
A second round of moderated usability testing was conducted with another group of participants for more feedback.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Include key flavors & allergy info in search result list.
Include key flavor and allergy ratings in results.
CRITICAL
Instructions too long, big blocks of text discouraging.
Modify design to accordion section with only 1st sent
MINOR
Location icons on search results should be numbered.
Add number to location icons.
MINOR
Some of the transitions between screens slide in wrong.
Adjust animation to correct orientation.
MINOR
Would be nice to have operating times in search results.
Add operating times to search results.
MINOR
Would be nice to see Apple & Google pay option.
Add Apple & Google pay option to payment screen.
MINOR
Background gradient during signup distracting.
Change background to more subtle gradient.
MINOR
Restaurant profile page section info not needed.
Remove page section info in restaurant profile section.
MINOR
"Profile" btn on restaurant profile not selected.
Change button state to indicate on "Profile."
MINOR
Hard to read pink text on item profiling screen.
Change input text color to standard grey.
FINAL PROTOTYPE —
PROTOTYPE —
After conducting two rounds of moderated usability testing, all critical errors identified by participants were fixed. Several other minor and normal errors brought up by more than one participant were also addressed, revisions were made based on that feedback.
FINAL PROTOTYPE —
PROTOTYPE —
After conducting two rounds of moderated usability testing, all critical errors identified by participants were fixed. Several other minor and normal errors brought up by more than one participant were also addressed, revisions were made based on that feedback.
THE RUNDOWN —
WHAT I LEARNED —
Over the course of the Flavor Flux project, I gained experience with a design process that was much more research-driven than a typical graphic design approach. I obtained a detailed understanding of the target audience by implementing a user screener survey to identify key users and conducting interviews to uncover their needs and emotions throughout the restaurant discovery journey. Having always gravitated toward a research-driven creative process, I recognized the value of interacting with the target audience before beginning the design phase.
Synthesizing qualitative research findings through empathy mapping, user stories, and thematic analysis helped me develop a thorough understanding of user needs and truly empathize with the users. This detailed insight provided a blueprint for the product development process, starting with user flows and a site map during the information architecture stage, then evolving into thumbnail sketches and wireframes in the low-fidelity design stage. While my experience as a graphic designer has given me extensive practice with thumbnail sketching and low-fidelity mockups, I had no prior experience developing functional prototypes. Adding this skill to my creative toolbox was incredibly exciting.
WHAT IT SOLVED —
Developing the Flavor Flux app solved the root problem of the restaurant discovery process by enabling users to identify restaurants with the flavors they craved and any potential food allergies users might have, without having to carefully analyze the menus of each dining option. By creating flavor and allergy profiling, all search queries were automatically filtered based on these preferences, providing targeted, user-centered suggestions that significantly reduced the effects of choice overload.
THE RUNDOWN —
WHAT I LEARNED —
Over the course of the Flavor Flux project, I gained experience with a design process that was much more research-driven than a typical graphic design approach. I obtained a detailed understanding of the target audience by implementing a user screener survey to identify key users and conducting interviews to uncover their needs and emotions throughout the restaurant discovery journey. Having always gravitated toward a research-driven creative process, I recognized the value of interacting with the target audience before beginning the design phase.
Synthesizing qualitative research findings through empathy mapping, user stories, and thematic analysis helped me develop a thorough understanding of user needs and truly empathize with the users. This detailed insight provided a blueprint for the product development process, starting with user flows and a site map during the information architecture stage, then evolving into thumbnail sketches and wireframes in the low-fidelity design stage. While my experience as a graphic designer has given me extensive practice with thumbnail sketching and low-fidelity mockups, I had no prior experience developing functional prototypes. Adding this skill to my creative toolbox was incredibly exciting.
WHAT IT SOLVED —
Developing the Flavor Flux app solved the root problem of the restaurant discovery process by enabling users to identify restaurants with the flavors they craved and any potential food allergies users might have, without having to carefully analyze the menus of each dining option. By creating flavor and allergy profiling, all search queries were automatically filtered based on these preferences, providing targeted, user-centered suggestions that significantly reduced the effects of choice overload.
DESIGN PROTOTYPE R1 –
PROTOTYPE —
VALIDATE R1 —
USER FEEDBACK —
Utilizing the structural design of the wireframes an MVP prototype was created for each red route and user tested.
USABILITY TEST REPORT —
Users testing provide important feedback that was implemented into the second prototype iteration.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Option to sign up/login w/ Apple & Google in most apps.
Add option to sign up of login with Apple or Google.
CRITICAL
Need breadcrumbs for walkthrough so users
Add breadcrumb graphic for walkthrough progress.
CRITICAL
Need breadcrumbs for signup process so users no where they are in the process.
Adjust layout of signup and include a breadcrumb element at the top of screen indicating stage of process.
MINOR
Don't expect to see tab bar on first screen.
Remove tab bar on sign up screens.
MINOR
Add additional descriptions on purple screens.
Add additional description to walkthrough boxes.
MINOR
What type of subscription, monthly?
Add "Monthly" to description verbiage.
MINOR
Option needed to go back a screen.
Add "Back" button to walkthrough with "Cancel" button.
MINOR
Placement of walkthrough boxes confusing.
Keep placement of consistent from screen to screen.
MINOR
Password entry fields typically have ability to toggle from hidden to visible.
Add an "eye" UI element indicating the ability to toggle between hidden and visible to password field.
MINOR
The reversed out text in the search results prevents a clear visual hierarchy, visually noisy.
Reformat the search result boxes removing reversed out text and increase white space.
NORMAL
Need splash screen with logo and tagline first screen.
Add splash screen with logo.
DESIGN PROTOTYPE R2 —
ICON LIBRARY +
Icons were created for the tab bar & menus along with abstracted icons for flavor profiling and allergy profiling.
FLAVOR PROFILE INFOGRAPHIC +
Designed to map each primary and secondary flavor allowing the user to view their profile at a glance on the home screen and when viewing a restaurants profile screen for a visual representation of its flavor profile.
COMPONENT LIBRARY +
During the second round of the design process the component library was completed and finalized.
COLOR PALETTE —
After finalizing the color palette, each color combination was verified for a passing minimum contrast ratio according to the Web Content Accessibility Guidelines.
COLOR COMBINATION
CONTRAST
RATIO
NORMAL TEXT
(14-18px)
LARGE TEXT
(18px or 14px+bold)
OBJECTS & UI
(Graphics, Controls)
FOREGROUND
#F05A28
BACKGROUND
#000000
6.19:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#551E4B
BACKGROUND
#FFFFFF
12.54:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#A23895
BACKGROUND
#DDE2E3
4.54:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#3D3D3D
BACKGROUND
#FFFFFF
10.86:1
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
FOREGROUND
#FFFFFF
BACKGROUND
#A23895
5.93:1
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
WCAG AA: PASS
N/A AAA
PROTOTYPE —
Applying usability testing feedback, a second iteration was designed with a new color palette and refine structure.
VALIDATE R2 —
USABILITY TEST REPORT —
A second round of moderated usability testing was conducted with another group of participants for more feedback.
ERROR RATING
PROBLEM
SOLUTION
CRITICAL
Include key flavors & allergy info within search result list.
Include key flavor and allergy ratings in results.
CRITICAL
Instructions too long, big blocks of text discouraging.
Modify design to accordion fold section with only 1st sent
MINOR
Location icons on search results should be numbered.
Add number to location icons.
MINOR
Some of the transitions between screens slide in wrong.
Adjust animation to correct orrientation.
MINOR
Would be nice to have operating times in search results.
Add operating times to search results.
MINOR
Would be nice to see Apple & Google pay option.
Add Apple & Google pay option to payment screen.
MINOR
Background gradient during signup distracting.
Change background to more subtle gradient.
MINOR
Restaurant profile page section info not needed.
Remove page section info in restaurant profile section.
MINOR
"Profile" btn on restaurant profile not selected.
Change button state to indicate on "Profile."
MINOR
Hard to read pink text on item profiling screen.
Change input text color to standard grey.
FINAL PROTOTYPE —
PROTOTYPE —
After conducting two rounds of moderated usability testing, all critical errors identified by participants were fixed. Several other minor and normal errors brought up by more than one participant were also addressed and revisions were made based on that feedback.
THE RUNDOWN —
WHAT I LEARNED —
Over the course of the Flavor Flux project, I gained experience with a design process that was much more research-driven than a typical graphic design approach. I obtained a detailed understanding of the target audience by implementing a user screener survey to identify key users and conducting interviews to uncover their needs and emotions throughout the restaurant discovery journey. Having always gravitated toward a research-driven creative process, I recognized the value of interacting with the target audience before beginning the design phase.
Synthesizing qualitative research findings through empathy mapping, user stories, and thematic analysis helped me develop a thorough understanding of user needs and truly empathize with the users. This detailed insight provided a blueprint for the product development process, starting with user flows and a site map during the information architecture stage, then evolving into thumbnail sketches and wireframes in the low-fidelity design stage. While my experience as a graphic designer has given me extensive practice with thumbnail sketching and low-fidelity mockups, I had no prior experience developing functional prototypes. Adding this skill to my creative toolbox was incredibly exciting.
WHAT IT SOLVED —
Developing the Flavor Flux app solved the root problem of the restaurant discovery process by enabling users to identify restaurants with the flavors they craved and any potential food allergies users might have, without having to carefully analyze the menus of each dining option. By creating flavor and allergy profiling, all search queries were automatically filtered based on these preferences, providing targeted, user-centered suggestions that significantly reduced the effects of choice overload.
RESEARCH SYNTHESIS —
USER PERSONAS —
Creating user personas helped empathize with users' challenges and prioritize what critical features to include, ensuring the product effectively solved key problems and maintain focus on the target users needs.
PARTICIPANT 1: KIM
GENDER: FEMALE
OCCUPATION: EXECUTIVE RECRUITER
LOCATION: MADSISON, WI
TIMES PER MONTH: 5-10
MARRIED: YES
CHILDREN: 4
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"Don't want to be influenced
by the hype."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• FOOD ALLERGY COMPLIANCE
• CLEANLINESS / HYGIENIC
THOUGHTS:
• ALWAYS LOOKING FOR NEW PLACES
• SOMETHING WE DO FRIDAYS
SEEKING:
• WELL ROUNDED EXPERIENCE
• BLENDS OF FAVORITE FLAVORS
PARAMETERS:
• GOOD COCKTAILS & WINE LIST
• REASONABLE WAIT TIMES
CRAVING:
• GOOD CURY DISHES
• AUTHENTIC THAI FOOD
PARTICIPANT 2: JOHN
GENDER: MALE
OCCUPATION: CONTENT CREATOR
LOCATION: MADSISON, WI
TIMES PER MONTH: 2-3
MARRIED: YES
CHILDREN: NONE
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'll try the burger that seems like nobody is going to buy."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• EXTENDED TRAVEL DISTANCES
• OPTIONS WITH FAVORITE FLAVORS
THOUGHTS:
• REVIEWS NOT INDICATIVE OF QUALITY
• SMELL THE SMELLS
SEEKING:
• SAFE FOR FOR WIFE WITH FOOD ALLERGIES
• NEW UNIQUE CUISINES AND EXPERIENCES
PARAMETERS:
• THE LESSER KNOWN GEMS
• REASONABLE PRICE
CRAVING:
• SPICY FOODS AND FLAVORS
• PICKLED AND SOUR TASTING
PARTICIPANT 3: ALEX
GENDER: MALE
OCCUPATION: SIGNAGE INSTALLER
LOCATION: SAN JOSE, CA
TIMES PER MONTH: 8-12
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'm in the mood for some
greasy goodness."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• PRICEY JOINTS WITH SMALL PORTIONS
• LIMITED OPTIONS WITH FLAVORS CRAVED
THOUGHTS:
• USUALLY PLAY IT SAFE
• APPRECIATE BAY AREA DIVERSITY
SEEKING:
• KID FRIENDLY OPTIONS
• FOODY TYPE SPOTS
PARAMETERS:
• HIGHEST RATING THAT'S REASONABLE
• PLACES THAT OFFERS FAVORITES
CRAVING:
• GOOD MEXICAN FOOD
• FAVORITE FLAVORS IN NEW DISHES
PARTICIPANT 4: NICOLE
GENDER: FEMALE
OCCUPATION: DEDICATED MOTHER
LOCATION: APPLETON, WI
TIMES PER MONTH: 1-4
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I have to go through all search results
even though it can be overwhelming."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• OVER PRICED OFFERINGS
• LACK OF FAVORITE FLAVORS IN DISHES
THOUGHTS:
• ALWAYS ORDER THE SAME THING
• TRY TO ADHERE TO DIET
SEEKING:
• CATCH ALL RESTAURANT
• WHAT'S ON THE WAY
PARAMETERS:
• CHILDREN COMPATIBLE
• REASONABLE PRICE
CRAVING:
• SPICY FOOD ON OCCASION
• GOOD TACOS
PARTICIPANT 5: EMILY
GENDER: FEMALE
OCCUPATION: ADMIN ASSISTANT
LOCATION: SAN FRANCISCO, CA
TIMES PER MONTH: 10-15
MARRIED: YES
CHILDREN: NONE / TWO DOGS
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"One of the perks of my job is I get to dine out frequently."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• IDENTIFYING OPTIONS WITH MY FLAVORS
• FOOD ALLERGY SAFE OPTIONS
THOUGHTS:
• PREFER MANAGEABLE NUMBER OPTIONS
• WORD OF MOUTH SUGGESTIONS
SEEKING:
• HIGH RATING / REVIEWS
• GOOD WHITE TABLE CLOTH RESTAURANT
PARAMETERS:
• ALIGN WITH CLIENTS PREFERENCES
• GREAT SERVICE
CRAVING:
• UNAMI AND GARLIC FLAVORS
• GOOD COCKTAILS
JOBS TO BE DONE +
Writing Jobs to Be Done statements helped clarify user needs, prioritizing feature development around meaningful goals and reduced choice overload by directing attention to what truly matters.
EMPATHY MAPPING +
This process clearly mapped interview subjects' thoughts, feelings, and behaviors to guide the design
USER STORIES +
By creating user stories, I was able to translate broad problems into specific user challenges, which clarified priorities and informed product development decisions.
THEMATIC ANALYSIS +
Through thematic analysis, I identified common themes across participants, which helped me empathize with their pain points in the restaurant discovery process.
HOW MIGHT WE STATEMENTS +
Reframed user problems into meaningful opportunities for design, helping to identify a range of creative solutions.
RESEARCH SYNTHESIS —
USER PERSONAS —
Creating user personas helped empathize with users' challenges and prioritize what critical features to include, ensuring the product effectively solved key problems and maintain focus on the target users needs.
PARTICIPANT 1: KIM
GENDER: FEMALE
OCCUPATION: EXECUTIVE RECRUITER
LOCATION: MADSISON, WI
TIMES PER MONTH: 5-10
MARRIED: YES
CHILDREN: 4
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"Don't want to be influenced
by the hype."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• FOOD ALLERGY COMPLIANCE
• CLEANLINESS / HYGIENIC
THOUGHTS:
• ALWAYS LOOKING FOR NEW PLACES
• SOMETHING WE DO FRIDAYS
SEEKING:
• WELL ROUNDED EXPERIENCE
• BLENDS OF FAVORITE FLAVORS
PARAMETERS:
• GOOD COCKTAILS & WINE LIST
• REASONABLE WAIT TIMES
CRAVING:
• GOOD CURY DISHES
• AUTHENTIC THAI FOOD
PARTICIPANT 2: JOHN
GENDER: MALE
OCCUPATION: CONTENT CREATOR
LOCATION: MADSISON, WI
TIMES PER MONTH: 2-3
MARRIED: YES
CHILDREN: NONE
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'll try the burger that seems like nobody is going to buy."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• EXTENDED TRAVEL DISTANCES
• OPTIONS WITH FAVORITE FLAVORS
THOUGHTS:
• REVIEWS NOT INDICATIVE OF QUALITY
• SMELL THE SMELLS
SEEKING:
• SAFE FOR FOR WIFE WITH FOOD ALLERGIES
• NEW UNIQUE CUISINES AND EXPERIENCES
PARAMETERS:
• THE LESSER KNOWN GEMS
• REASONABLE PRICE
CRAVING:
• SPICY FOODS AND FLAVORS
• PICKLED AND SOUR TASTING
PARTICIPANT 3: ALEX
GENDER: MALE
OCCUPATION: SIGNAGE INSTALLER
LOCATION: SAN JOSE, CA
TIMES PER MONTH: 8-12
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I'm in the mood for some
greasy goodness."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• PRICEY JOINTS WITH SMALL PORTIONS
• LIMITED OPTIONS WITH FLAVORS CRAVED
THOUGHTS:
• USUALLY PLAY IT SAFE
• APPRECIATE BAY AREA DIVERSITY
SEEKING:
• KID FRIENDLY OPTIONS
• FOODY TYPE SPOTS
PARAMETERS:
• HIGHEST RATING THAT'S REASONABLE
• PLACES THAT OFFERS FAVORITES
CRAVING:
• GOOD MEXICAN FOOD
• FAVORITE FLAVORS IN NEW DISHES
PARTICIPANT 4: NICOLE
GENDER: FEMALE
OCCUPATION: DEDICATED MOTHER
LOCATION: APPLETON, WI
TIMES PER MONTH: 1-4
MARRIED: YES
CHILDREN: 2
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"I have to go through all search results
even though it can be overwhelming."EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• OVER PRICED OFFERINGS
• LACK OF FAVORITE FLAVORS IN DISHES
THOUGHTS:
• ALWAYS ORDER THE SAME THING
• TRY TO ADHERE TO DIET
SEEKING:
• CATCH ALL RESTAURANT
• WHAT'S ON THE WAY
PARAMETERS:
• CHILDREN COMPATIBLE
• REASONABLE PRICE
CRAVING:
• SPICY FOOD ON OCCASION
• GOOD TACOS
PARTICIPANT 5: EMILY
GENDER: FEMALE
OCCUPATION: ADMIN ASSISTANT
LOCATION: SAN FRANCISCO, CA
TIMES PER MONTH: 10-15
MARRIED: YES
CHILDREN: NONE / TWO DOGS
SEARCH RESOURCES UTILIZED
GOOGLE
OTHER SEARCH ENGINE
YELP
OPEN TABLE
ROAD TRIPPERS
PRINT PUBLICATIONS
WORD OF MOUTH
SOCIAL MEDIA
FOREIGN COUNTRY APPLICATION
INFLUENCED BY
RATING
PRICE
LOCATION
CLEANLINESS
MENU VARIETY
HOLDS SMARTPHONE
LEFT HAND
BOTH HANDS
RIGHT HAND
SCROLLING / TYPING
LEFT HAND
BOTH HANDS
RIGHT HAND
"One of the perks of my job is I get to dine out frequently."
EFFECTED BY CHOICE OVERLOAD
PAIN POINTS:
• IDENTIFYING OPTIONS WITH MY FLAVORS
• FOOD ALLERGY SAFE OPTIONS
THOUGHTS:
• PREFER MANAGEABLE NUMBER OPTIONS
• WORD OF MOUTH SUGGESTIONS
SEEKING:
• HIGH RATING / REVIEWS
• GOOD WHITE TABLE CLOTH RESTAURANT
PARAMETERS:
• ALIGN WITH CLIENTS PREFERENCES
• GREAT SERVICE
CRAVING:
• UNAMI AND GARLIC FLAVORS
• GOOD COCKTAILS
JOBS TO BE DONE +
Writing Jobs to Be Done statements helped clarify user needs, prioritizing feature development around meaningful goals and reduced choice overload by directing attention to what truly matters.
EMPATHY MAPPING +
This process clearly mapped interview subjects' thoughts, feelings, and behaviors to guide the design
USER STORIES +
By creating user stories, I was able to translate broad problems into specific user challenges, which clarified priorities and informed product development decisions.
THEMATIC ANALYSIS +
Through thematic analysis, I identified common themes across participants, which helped me empathize with their pain points in the restaurant discovery process.
HOW MIGHT WE STATEMENTS +
Reframed user problems into meaningful opportunities for design, helping to identify a range of creative solutions.
Interested in connecting?
Let’s talk projects, collaborations, or anything design!
Interested in connecting?
Let’s talk projects, collaborations, or anything design!
Interested in connecting?
Let’s talk projects, collaborations, or anything design!
Interested in connecting?
Let’s talk projects, collaborations, or anything design!