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
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.
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:
Unable to order food at the Chinese food cars since the owners can only speak in Chinese.
Having no knowledge of the menu options.
Going to food car and realizing that the owners ran out of stock for the day.
Goal:
To be able to communicate with the Chinese food cars owners.
Be aware of the inventory situation ahead of time.
Know the menu options for different food cars.
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:
Enjoys the popularity on social media, yet still have a hard time replying to all the private messages.
Getting back to potential customers on social media platforms during rush hours.
Time-sensitivity issues in terms of location and schedules.
Attracting customers who are not familiar with his food truck.
Goal:
A more efficient way of communicating with frequent customers.
Providing comprehensive information to potential customers.
Inform to the public when he adds special menus.
A feedback service which helps him improve and promote his service.
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:
Not having an efficient lunch time.
Spending lunch money on overpriced campus food when his favorite food stand is
unavailable.
Waiting in a long line for the food stand during busy lunch time.
Goal:
Buy food as quickly as possible especially when the weather is not nice
Staying economic
Scenarios & Storyboards
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:
Many users commented that the website needs to show more visual feedbacks after the user takes an action.
Some users were unsure about the filters being on or off.
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.