Potluck
Potluck
Potluck
Designed as a pantry of recommendations from your closest friends and family, Potluck functions as a platform for sharing meal snaps and recommendations from (taste)buds you know and trust.
Designed as a pantry of recommendations from your closest friends and family, Potluck functions as a platform for sharing meal snaps and recommendations from (taste)buds you know and trust.
Designed as a pantry of recommendations from your closest friends and family, Potluck functions as a platform for sharing meal snaps and recommendations from (taste)buds you know and trust.
Project
Solo Course Project
Brown University
CSCI 0130: User Interfaces and User Interfaces
Project
Solo Course Project
Brown University
CSCI 0130: User Interfaces and User Interfaces
Project
Solo Course Project
Brown University
CSCI 0130: User Interfaces and User Interfaces
Skills
User research, sketching, wireframing, prototyping, user-testing
Skills
User research, sketching, wireframing, prototyping, user-testing
Skills
User research, sketching, wireframing, prototyping, user-testing
Timeline
Jan 2023 - Apr 2023
Timeline
Jan 2023 - Apr 2023
Timeline
Jan 2023 - Apr 2023
Premise
Premise
Premise
One of my friends just turned 21🎉, and we were totally stumped for dinner party locations. I remembered someone I followed had just had their birthday at a restaurant in town, but I couldn’t recall where it was, despite seeing a restaurant tag with the most exquisite plate of pasta on her Instagram story just a day earlier.
As I fell further down the Instagram rabbit hole looking for this, it was no additional surprise that people seem to have an innate desire to snap a photo before they eat - with some people dedicating entire “foodstagrams” to the craft.
One of my friends just turned 21🎉, and we were totally stumped for dinner party locations. I remembered someone I followed had just had their birthday at a restaurant in town, but I couldn’t recall where it was, despite seeing a restaurant tag with the most exquisite plate of pasta on her Instagram story just a day earlier.
As I fell further down the Instagram rabbit hole looking for this, it was no additional surprise that people seem to have an innate desire to snap a photo before they eat - with some people dedicating entire “foodstagrams” to the craft.
One of my friends just turned 21🎉, and we were totally stumped for dinner party locations. I remembered someone I followed had just had their birthday at a restaurant in town, but I couldn’t recall where it was, despite seeing a restaurant tag with the most exquisite plate of pasta on her Instagram story just a day earlier.
As I fell further down the Instagram rabbit hole looking for this, it was no additional surprise that people seem to have an innate desire to snap a photo before they eat - with some people dedicating entire “foodstagrams” to the craft.
Preliminary Research
Preliminary Research
Preliminary Research
Context
Context
Context
How do people interact with influence, specifically within the food space? Yelp.
How do people interact with influence, specifically within the food space? Yelp.
How do people interact with influence, specifically within the food space? Yelp.
I wanted to discover in what context the digital interface is used, when it intercepts a user’s routine and how often, and how the model impacts the dining experience of a user.
I wanted to discover in what context the digital interface is used, when it intercepts a user’s routine and how often, and how the model impacts the dining experience of a user.
I wanted to discover in what context the digital interface is used, when it intercepts a user’s routine and how often, and how the model impacts the dining experience of a user.
Key Observations
Key Observations
Key Observations
1.
1.
It’s dominated by members of the Yelp Elite Squad.
It’s dominated by members of the Yelp Elite Squad.
It’s dominated by members of the Yelp Elite Squad.
There are semi-professional “Yelpers” who have well over a thousand written reviews under their belt; though this can provide some sense of reliability, it doesn’t always accurately portray a dining experience of a typical user.
There are semi-professional “Yelpers” who have well over a thousand written reviews under their belt; though this can provide some sense of reliability, it doesn’t always accurately portray a dining experience of a typical user.
There are semi-professional “Yelpers” who have well over a thousand written reviews under their belt; though this can provide some sense of reliability, it doesn’t always accurately portray a dining experience of a typical user.
2.
2.
Yelp is integrated with existing businesses.
Yelp is integrated with existing businesses.
Yelp is integrated with existing businesses.
Many businesses promote a “Leave us a review on Yelp” with incentives, and though this makes Yelp a widespread standard, it increases pressure for dishonest reviews.
Many businesses promote a “Leave us a review on Yelp” with incentives, and though this makes Yelp a widespread standard, it increases pressure for dishonest reviews.
Many businesses promote a “Leave us a review on Yelp” with incentives, and though this makes Yelp a widespread standard, it increases pressure for dishonest reviews.
3.
3.
Most users use Yelp by need.
Most users use Yelp by need.
Most users use Yelp by need.
Users really only use Yelp to look at restaurants near them, or potential destinations when planning for travel.
Users really only use Yelp to look at restaurants near them, or potential destinations when planning for travel.
Users really only use Yelp to look at restaurants near them, or potential destinations when planning for travel.
4.
4.
Reviews fall under extreme experiences, on either spectrum of circumstances.
Reviews fall under extreme experiences, on either spectrum of circumstances.
Reviews fall under extreme experiences, on either spectrum of circumstances.
To put in the effort to actually leave a review, the dining experience must be exceptional or atrocious.
To put in the effort to actually leave a review, the dining experience must be exceptional or atrocious.
To put in the effort to actually leave a review, the dining experience must be exceptional or atrocious.
5.
5.
People get a lot of their restaurant recommendations from their friends and family.
People get a lot of their restaurant recommendations from their friends and family.
People get a lot of their restaurant recommendations from their friends and family.
The idea of influence is present most prominently in those who are nomadic eaters - younger audiences in urban areas looking for trendy food as a means of social experience - and those who are looking to break routine - parents looking to spice up meals inside and outside of the home.
The idea of influence is present most prominently in those who are nomadic eaters - younger audiences in urban areas looking for trendy food as a means of social experience - and those who are looking to break routine - parents looking to spice up meals inside and outside of the home.
The idea of influence is present most prominently in those who are nomadic eaters - younger audiences in urban areas looking for trendy food as a means of social experience - and those who are looking to break routine - parents looking to spice up meals inside and outside of the home.
Personas
Personas
Personas
After learning a bit more on the motives of user behaviors in regards to food and decision, I was able to categorize common behaviors into two personas: one that’s more functional, and one that’s more exploratory.
After learning a bit more on the motives of user behaviors in regards to food and decision, I was able to categorize common behaviors into two personas: one that’s more functional, and one that’s more exploratory.
After learning a bit more on the motives of user behaviors in regards to food and decision, I was able to categorize common behaviors into two personas: one that’s more functional, and one that’s more exploratory.
Forgetful Felix
Forgetful Felix
Forgetful Felix
He can’t remember what he loved at each restaurant, or what the restaurant even was!
He can’t remember what he loved at each restaurant, or what the restaurant even was!
He can’t remember what he loved at each restaurant, or what the restaurant even was!
Experimentalist Eloise
Experimentalist Eloise
Experimentalist Eloise
They love trying new foods and meals around town!
They love trying new foods and meals around town!
They love trying new foods and meals around town!
Lo-fi
Lo-fi
Lo-fi
From those findings, I set out to design an interface that focused on tried and true personal recommendations as opposed to mass reviews.
From those findings, I set out to design an interface that focused on tried and true personal recommendations as opposed to mass reviews.
From those findings, I set out to design an interface that focused on tried and true personal recommendations as opposed to mass reviews.
Sketching
Sketching
Sketching
scroll→
Saved recommendations centered around location
Saved recommendations centered around cuisine categories
Saved recommendations centered around priority (bucket-list)
Unlike most “social media” platforms, instead of focusing on posting functions, I chose to place Save to be central on the navbar to promote idea of recommendation
Saved recommendations centered around location
Saved recommendations centered around cuisine categories
Saved recommendations centered around priority (bucket-list)
Unlike most “social media” platforms, instead of focusing on posting functions, I chose to place Save to be central on the navbar to promote idea of recommendation
Wireframing & Responsive Design
Wireframing & Responsive Design
Wireframing & Responsive Design
Drawing from my sketches, I moved onto formalizing and cleaning up the layout on Figma.
Drawing from my sketches, I moved onto formalizing and cleaning up the layout on Figma.
Drawing from my sketches, I moved onto formalizing and cleaning up the layout on Figma.
scroll→
Mobile ~375x667px
Tablet ~768x1024px
Desktop ~3840x2160px
Mobile ~375x667px
Tablet ~768x1024px
Desktop ~3840x2160px
Visual Design
Visual Design
Visual Design
scroll→
Key notes: warm & eccentric!
Key notes: warm & eccentric!
Key notes: warm & eccentric!
Color
Color
Color
Red is used a lot in food industries to evoke both boldness and speed in appetite, so incorporated those notes of warmth in the orange, but opted to choose an accessible and constrast-able color palette that felt a little slower and stabler, yet still refreshing and active!
Red is used a lot in food industries to evoke both boldness and speed in appetite, so incorporated those notes of warmth in the orange, but opted to choose an accessible and constrast-able color palette that felt a little slower and stabler, yet still refreshing and active!
Red is used a lot in food industries to evoke both boldness and speed in appetite, so incorporated those notes of warmth in the orange, but opted to choose an accessible and constrast-able color palette that felt a little slower and stabler, yet still refreshing and active!
Typography
Typography
Typography
Most social media apps follow Sans Serif, so I continued that for familiarity
Most social media apps follow Sans Serif, so I continued that for familiarity
Most social media apps follow Sans Serif, so I continued that for familiarity
UI Components
UI Components
UI Components
Followed guidelines of semi-flat design, as well as diversified the types of interactions that could be done (i.e. clicked, typed, toggled)
Followed guidelines of semi-flat design, as well as diversified the types of interactions that could be done (i.e. clicked, typed, toggled)
Followed guidelines of semi-flat design, as well as diversified the types of interactions that could be done (i.e. clicked, typed, toggled)
Hi-fi
Hi-fi
Hi-fi
Mockups
Mobile ~375x667px
Tablet ~768x1024px
Desktop ~3840x2160px
Mockups
Mobile ~375x667px
Tablet ~768x1024px
Desktop ~3840x2160px
Mockups
Mobile ~375x667px
Tablet ~768x1024px
Desktop ~3840x2160px
Prototype I
Prototype I
Prototype I
Feed
Structured like many other social media feeds, yet not really a social app for communication
More so for inspiration, so tried to prioritize features like viewing and saving over liking or commenting
Saved (Stay In / Eat Out)
Users could save both
1) recommendations for outside restaurants and 2) inspiration for home-cooked meals, since it’s unrealistic to expect users will constantly be dining out
Users could save both
1) recommendations for outside restaurants and 2) inspiration for home-cooked meals, since it’s unrealistic to expect users will constantly be dining out
Users could save both
1) recommendations for outside restaurants and 2) inspiration for home-cooked meals, since it’s unrealistic to expect users will constantly be dining out
Adding a Post
Simple interface for efficiency
Users shouldn’t have to type an essay before they can eat their food
Profile
Personal food diary to be looked back on for yummy (or not-so-yummy) eats
User Testing
User Testing
User Testing
Preparations
Preparations
Preparations
• Used UserTesting.com for feedback on prototype functionality from live testers
• Changes before launching my test included (minor) increasing icon size and clarifying wordings and (major) adding screens for Saving
• Used UserTesting.com for feedback on prototype functionality from live testers
• Changes before launching my test included (minor) increasing icon size and clarifying wordings and (major) adding screens for Saving
• Used UserTesting.com for feedback on prototype functionality from live testers
• Changes before launching my test included (minor) increasing icon size and clarifying wordings and (major) adding screens for Saving
Tasks
Tasks
Tasks
• Goal: Familiarize testers with how to save recommendations, how to post, and how to navigate - made sure testers gained information, with questions like “Where did this person eat?”, as well as completing basic actions of adding and saving posts
• Flaws: Questions inhibited testing for natural observation of interaction, as they functioned more as app onboarding instead (i.e. how apps usually have the “Getting Started: How-Tos” instructions in the beginning)
• Goal: Familiarize testers with how to save recommendations, how to post, and how to navigate - made sure testers gained information, with questions like “Where did this person eat?”, as well as completing basic actions of adding and saving posts
• Flaws: Questions inhibited testing for natural observation of interaction, as they functioned more as app onboarding instead (i.e. how apps usually have the “Getting Started: How-Tos” instructions in the beginning)
• Goal: Familiarize testers with how to save recommendations, how to post, and how to navigate - made sure testers gained information, with questions like “Where did this person eat?”, as well as completing basic actions of adding and saving posts
• Flaws: Questions inhibited testing for natural observation of interaction, as they functioned more as app onboarding instead (i.e. how apps usually have the “Getting Started: How-Tos” instructions in the beginning)
Sample questions
Sample questions
Sample questions
scroll→
Pain Points & Key Concepts
Pain Points & Key Concepts
Pain Points & Key Concepts
Tasks phrased oddly/confusingly (i.e. guided them with specific questions)
Dependence on icons makes less experienced testers more confused
(i.e. pot ≠ feed, just knew it was feed by context)
Inclined to always throw an app into a larger pool of algorithmic recommendations (i.e. testers suggested “Others who enjoyed this restaurant also enjoyed)
Users acclimated to existing and efficient systems of algorithmic recommendations on similarity like Instagram or Yelp
How do we make them focus on their more intimate suggestions?
Especially with social media conventions, need “knowledge in the head”, making younger demographics more attuned
Keep convention of only icons in navbar, but potentially add labels for header tab?
User needs chance to flesh out own mental models before being directed by conceptual
Determine broader tasks - don’t need to lay it out step by step
Testing:
Usage:
Feature:
Hidden/unused features
(i.e. “Categorize” feature for cuisines)
Categorizing helpful when sorting in Saved, but posters don’t seem to actually use it because it’s just another step they have to tap and search before they get to dig in
Keep for now
Feature:
Ambiguity in tagging and restaurant names
Restaurants don’t always sound like restaurant names and tagging feature embedded and not obvious, get mixed up on what’s the restaurant and what’s the dish
Add some sort of prompt (i.e. “Ate at JAHUNGER”) to clarify restaurant
Have a main dish that automatically shows as a tag (not embedded)
Feature:
Deals and financial suggestions are important
Even people close to you have different budgets
Add financial feasibility feature with dollar signs
Feature:
Observation
Reasoning
Potential Changes
Tasks phrased oddly/confusingly (i.e. guided them with specific questions)
Dependence on icons makes less experienced testers more confused
(i.e. pot ≠ feed, just knew it was feed by context)
Inclined to always throw an app into a larger pool of algorithmic recommendations (i.e. testers suggested “Others who enjoyed this restaurant also enjoyed)
Users acclimated to existing and efficient systems of algorithmic recommendations on similarity like Instagram or Yelp
How do we make them focus on their more intimate suggestions?
Especially with social media conventions, need “knowledge in the head”, making younger demographics more attuned
Keep convention of only icons in navbar, but potentially add labels for header tab?
User needs chance to flesh out own mental models before being directed by conceptual
Determine broader tasks - don’t need to lay it out step by step
Testing:
Usage:
Feature:
Hidden/unused features
(i.e. “Categorize” feature for cuisines)
Categorizing helpful when sorting in Saved, but posters don’t seem to actually use it because it’s just another step they have to tap and search before they get to dig in
Keep for now
Feature:
Ambiguity in tagging and restaurant names
Restaurants don’t always sound like restaurant names and tagging feature embedded and not obvious, get mixed up on what’s the restaurant and what’s the dish
Add some sort of prompt (i.e. “Ate at JAHUNGER”) to clarify restaurant
Have a main dish that automatically shows as a tag (not embedded)
Feature:
Deals and financial suggestions are important
Even people close to you have different budgets
Add financial feasibility feature with dollar signs
Feature:
Observation
Reasoning
Potential Changes
Tasks phrased oddly/confusingly (i.e. guided them with specific questions)
Dependence on icons makes less experienced testers more confused
(i.e. pot ≠ feed, just knew it was feed by context)
Inclined to always throw an app into a larger pool of algorithmic recommendations (i.e. testers suggested “Others who enjoyed this restaurant also enjoyed)
Users acclimated to existing and efficient systems of algorithmic recommendations on similarity like Instagram or Yelp
How do we make them focus on their more intimate suggestions?
Especially with social media conventions, need “knowledge in the head”, making younger demographics more attuned
Keep convention of only icons in navbar, but potentially add labels for header tab?
User needs chance to flesh out own mental models before being directed by conceptual
Determine broader tasks - don’t need to lay it out step by step
Testing:
Usage:
Feature:
Hidden/unused features
(i.e. “Categorize” feature for cuisines)
Categorizing helpful when sorting in Saved, but posters don’t seem to actually use it because it’s just another step they have to tap and search before they get to dig in
Keep for now
Feature:
Ambiguity in tagging and restaurant names
Restaurants don’t always sound like restaurant names and tagging feature embedded and not obvious, get mixed up on what’s the restaurant and what’s the dish
Add some sort of prompt (i.e. “Ate at JAHUNGER”) to clarify restaurant
Have a main dish that automatically shows as a tag (not embedded)
Feature:
Deals and financial suggestions are important
Even people close to you have different budgets
Add financial feasibility feature with dollar signs
Feature:
Observation
Reasoning
Potential Changes
scroll→
Changes Made
Changes Made
Changes Made
scroll→
Different posting screens for home-cooked vs. dine-out meals for better understanding of save later
Added icon alongside restaurant/dish name for clarity
Price can be filtered for
Tradeoff between Learnability and Efficiency
For a lot of these features, they are pretty standard with other social media interfaces; adding labels helps with learnability but its clutter decreases efficiency
Only included label on header tab instead of on navbar
Different posting screens for home-cooked vs. dine-out meals for better understanding of save later
Added icon alongside restaurant/dish name for clarity
Price can be filtered for
Tradeoff between Learnability and Efficiency
For a lot of these features, they are pretty standard with other social media interfaces; adding labels helps with learnability but its clutter decreases efficiency
Only included label on header tab instead of on navbar
Final Prototype
Final Prototype
Final Prototype
Reflections
Reflections
Reflections
Main Takeaways
Main Takeaways
Main Takeaways
Full-stack work: Doing my first solo project meant wearing a lot of hats, from coming up with a mock business idea that fills a need all the way to engineering the interactions, and it made me appreciate the complexity that comes with all the roles that participate in a product’s creation.
Research value: I eventually discovered Beli, so looking back, I wish I’d done even more extensive research on the market; the limited scope of the project based issues off of my experience, but designers ≠ users!
Full-stack work: Doing my first solo project meant wearing a lot of hats, from coming up with a mock business idea that fills a need all the way to engineering the interactions, and it made me appreciate the complexity that comes with all the roles that participate in a product’s creation.
Research value: I eventually discovered Beli, so looking back, I wish I’d done even more extensive research on the market; the limited scope of the project based issues off of my experience, but designers ≠ users!
Full-stack work: Doing my first solo project meant wearing a lot of hats, from coming up with a mock business idea that fills a need all the way to engineering the interactions, and it made me appreciate the complexity that comes with all the roles that participate in a product’s creation.
Research value: I eventually discovered Beli, so looking back, I wish I’d done even more extensive research on the market; the limited scope of the project based issues off of my experience, but designers ≠ users!
Future Work & Implications
Future Work & Implications
Future Work & Implications
This was a good exercise for me to experiment with design in a lighthearted application, but it is important to note the questions that arise when considering the digitalization of facets such as food. While food-sharing is now a popular practice within media, it is worth wondering whether we really need to be invading spaces of comfort and intimacy cultivated by food with constant documentation, and what greater message this app contributes to the culture of digitalization.
This was a good exercise for me to experiment with design in a lighthearted application, but it is important to note the questions that arise when considering the digitalization of facets such as food. While food-sharing is now a popular practice within media, it is worth wondering whether we really need to be invading spaces of comfort and intimacy cultivated by food with constant documentation, and what greater message this app contributes to the culture of digitalization.
This was a good exercise for me to experiment with design in a lighthearted application, but it is important to note the questions that arise when considering the digitalization of facets such as food. While food-sharing is now a popular practice within media, it is worth wondering whether we really need to be invading spaces of comfort and intimacy cultivated by food with constant documentation, and what greater message this app contributes to the culture of digitalization.
