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→

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→

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

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

scroll→

Changes Made

Changes Made

Changes Made

scroll→

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.

Made by Fiona with the help of lots of kombucha!

Made by Fiona with the help of lots of kombucha!

Made by Fiona with the help of lots of kombucha!

Made by Fiona with the help of lots of kombucha!

Made by Fiona with the help of lots of kombucha!