FeastHeader.png
 
 

Overview:

Feast.com is a responsive website, aimed to provide service for both the food truck vendors and customers through a platform that allows them to communicate with one another.

Skills: Interaction Design, Usability Testing, User Research, Persona Profile, Storyboarding, Rapid Prototyping, UI Design

Project Duration: 4 weeks, 2019

Tools: InVision, Illustrator

Type: Academic Team Project


Final Deliverable

Responsive Website for Both Desktop and Mobile


Design Process

Feast_Process.png

Gathering Insights & Opportunities from the Field

 

I started the research process by doing fly-on-the-wall observations and interviewing food truck vendors, food truck consumers, as well as the food truck organizer. The main problems discovered were:

1. Situational factors (ig. weather) affecting the customer’s and the shop owner’s decision.

2. Inconsistent time of closing.

3. Lack of efficiency (ig. Long waiting time)

4. Prior information about the menus, price, etc.

5. Information miscommunication (updated menus, inventory status).

6. Language barriers narrowing the customer range.

 

Fly-on-the-Wall Observation & Field Research

 
 

Affinity Clustering & Gathering Research Findings


Persona Profile

 

After identifying the information gap between vendors and customers, we started to synthesizing our research findings by summarize the mindset, needs and goals. From there, we created three personas.

 

I’m Chinese but I still can’t order food in Chinese
— Grace Liu

Grace Liu

Grace is a new instructor who recently moved into Pittsburgh to teach the psychology department at Dietrich college in CMU. Her ethnicity is Chinese, and she was born and raised in Palo Alto, California. Because she is 3rd generation immigrant, Grace cannot understand, read, or speak Chinese although she is very fond of her heritage and loves to eat Chinese food. However for work, grace usually packs sandwiches and salad but she is starting to get tired of eating similar food every day. Grace recently heard about the Chinese food cars that come to campus during lunch time and she is very excited to try them out.

Frustrations:

  1. Unable to order food at the Chinese food cars since the owners can only speak in Chinese.

  2. Having no knowledge of the menu options.

  3. Going to food car and realizing that the owners ran out of stock for the day.

Goal:

  1. To be able to communicate with the Chinese food cars owners.

  2. Be aware of the inventory situation ahead of time.

  3. Know the menu options for different food cars.

 

A lot of people ask us on Facebook, we will send the menu over.
— John Young

John Young

John is a food truck owner of Hibachi Entrees. This is his second year rotating around locations in Pittsburgh area after switching to a larger truck. He serves a standard menu for most of the time and run a special once a while. Everytime people have questions about the menu, he explains how the meals are served to them. People sometimes reach out to him on Facebook and ask him to go to different locations for special events and festivals. His favorite moment of the day is seeing the pictures customers posted on social media. He values communication with his customers a lot and he appreciates the word of mouth over paying extra money on promotions.

Frustration:

  1. Enjoys the popularity on social media, yet still have a hard time replying to all the private messages.

  2. Getting back to potential customers on social media platforms during rush hours.

  3. Time-sensitivity issues in terms of location and schedules.

  4. Attracting customers who are not familiar with his food truck.

Goal:

  1. A more efficient way of communicating with frequent customers.

  2. Providing comprehensive information to potential customers.

  3. Inform to the public when he adds special menus.

  4. A feedback service which helps him improve and promote his service.

 

Efficiency, convenience, and thriftiness are my motto
— Daniel Hayes

Daniel Hayes

Daniel is a senior Design student at Carnegie Mellon University who’s searching for jobs after graduation. As graduation is coming by, Daniel has recently been more aware of his spending since he is trying to be financially independent. Every night, Daniel is very busy working on school projects and job search so he thinks that he cannot afford extra time to pack lunch to school. Instead, Daniel often gets hot dogs or burghers from Joe’s Dog House since it is relatively cheap comparing to the official campus diners.

Frustration:

  1. Not having an efficient lunch time.

  2. Spending lunch money on overpriced campus food when his favorite food stand is

    unavailable.

  3. Waiting in a long line for the food stand during busy lunch time.

Goal:

  1. Buy food as quickly as possible especially when the weather is not nice

  2. Staying economic

 

Scenarios & Storyboards


  1. Olivia

    by Jue Wang

Olivia is a first year graduate student at the CMU, majoring in Entertainment Technology. Away from the main campus, her program is located at the Pittsburgh Entertainment Centre on Technology Drive. Olivia packs her lunch boxes for most of the time and gets lunch from food trucks once or twice a week. She usually does a weekly meal prep on Sunday. However, it’s hard for her to plan ahead since she usually gets emails in the morning on the same day when there are food trucks around the building. She would like to know how many meals to prep on Sunday but doesn’t want to over prepared just so she can get lunches from her favorite food trucks when they come.

She was introduced to “Feast”, which can show her the schedule of food trucks at a specific location at least a week ahead. She opens up the website and filtered the food trucks by typing in her school location. She gets the schedule of all available food trucks around her building in the coming week. She sees her favorite Hibachi food truck is scheduled to come on Tuesday from 11 am to 2 pm. She clicks on the title to find out more information and sees the special meal they are running on Tuesday is teriyaki mahi-mahi. After checking the images previous customers posted and how the meal will be served, she adds their hours and location to her calendar. She packs four lunch boxes instead of five for the coming week.

She ended up not wasting food and also enjoyed the special meal on Tuesday. She posts the food picture and left a review for the teriyaki mahi-mahi.


 
 
 

2. John

by Lingfan Jiang

It is 12:30pm on Wednesday. A food truck owner, John, is serving lunch as usual at Carnegie Mellon University. His phone keeps buzzing and John knows that his customers are trying to learn about the special food of the day again. However, it is during rush hour and he does not have time to reply those messages one by one.

Suddenly, John remembered that, earlier this morning, he uploaded the menu on a food review website, “Feast”, for the first time. Therefore, he opens up his Messenger App and sets an auto reply that directs people to “Feast”. Finally, his phone gradually quiets down. After the rush hour, he opens up the website to learn people’s thoughts about the food. On “Feast”, he sees photos and comments posted from his customers who have tried his food earlier today. John is so happy to see that he got 5 stars from all the customers and a lot of them mentioned that they decided to try John’s food because of the comments from other customers.

It is one of the best days John has ever had because he gets 30% more customers than usual. As a result, John continues to use “Feast” every day.


 
 
 

3. Daniel

by Jisoo Geum

Daniel is a senior Design student at CMU. Because Daniel is always busy working on projects and job search every night, he prefers to save time by buying food on campus instead of packing lunch to school.
On Mondays and Wednesdays, Daniel has a short lunch break between 1 pm to 1:30 pm. Daniel usually goes to Joe’s hot dog stand for these days since it is close and cheap comparing to campus diners.

However, the weather is particularly cold and snowy today, and Daniel isn’t sure whether Joe’s hot dog stand will be open. He goes on to the campus food truck website and checks that the hot dog stand is closed for the day. He also sees in the website that the Indian food truck a few yard away is still open, and currently does not have a long waiting time. Since Daniel prefers not to stay in a long line under this weather, he decides the menu before walking out.

Although it is his first time trying the Indian food truck, he easily finds the food truck using the location feature and almost instantly gets his food. Daniel is very satisfied by the choice he made. He thinks that he would have wasted more time and energy looking around for alternative lunch options if he had not used the website. Moreover, he is glad that he got to know about the Indian food truck, since he can start diversifying his lunch menu from now on.

 
 

 

4. Grace

by

  • Jisoo Geum

  • Mingtong Zhang

  • Jue wang

Grace, a new faculty member of Dietrich college in CMU, hears from an Chinese international student about the cars that sell Chinese food nearby her office. Because she loves Chinese food, she is excited to try it out.

She goes to the area where the food cars are parked, but she realizes that there is no menu written on the cars. The owners are only speaking to the customers in Chinese, which she cannot understand. It seems like the owners are saying something important to the customers in the line and Grace is very confused.

Grace finally remembers that there is a website that constantly updates the situation of campus food truck service. She pulls out her phone and connects to the website. Turns out, some of the menus are sold out but they still have other options available. When it’s her turn to order, Grace shows the picture of the food on the website gets her food.

Grace is happy that she is able to get the food she loves without a problem. She thinks, “If I didn’t have the website, the ordering could have been a huge hassle”.

 
 

 

Brainstorm & Ideation

Sketches


Prototype & Test

 

Once we had some low-fidelity prototype, we started to conducting Think-Aloud Testing with users. Tasks were designed for both vendors and consumers. Here were some main concerns we encountered:

  1. Many users commented that the website needs to show more visual feedbacks after the user takes an action.

  2. Some users were unsure about the filters being on or off.

  3. A lot of them were confused about what the numbers on the map were indicating.

 
 
 

Black And White Wireframes


Visual Design & High-Fidelity Wireframes

 

To address the unclearness of feedback and filter options, I started to add colors into the initial wireframes. I chose red and orange as our primary colors to keep Feast.com a bright and pop website. Utilizing the contrast between white background and colorful buttons, this website aimed to be inviting and appetizing.

 

Color Palette & Typeface

Wireframes


Interaction & Final Design

Home Page - List View

Loading Screen

Home Page - Map View

Home Page - Selected Food Truck

Account Page

Favorites Page

Detail Page for Food Truck

Review Editing Page


 

 

Desktop Version


Demo Videos

 
 

Mobile Click Through


 
 

Desktop Demo