Chipotle in a Vending Machine?!

CSE 440 Staff
6 min readDec 12, 2023

--

Meet Foochine: A nutritional food vending machine for students at the University of Washington

By Amy Cheng, Betty Cheng, Ha Vi Duong, Jessie Lin

Figure 1: Foochine logo
Figure 2: Foochine vending machine with a start order screen advertisement, payment options, a compartment for food to come out, and a compartment for utensils

Team

Amy Cheng: Conduct user research and interviews, sketch ideations, prototype initial product, create digital mockup, document design process

Betty Cheng: Perform user research and interviews, sketch early ideations and revisions, create paper prototype, design digital mockup, document design process overview

Ha Vi Duong: Help conduct interviews, sketch initial designs for the user interface, create paper prototypes, document fallacy during usability testing, create digital prototype interactions

Jessie Lin: Help user research and interviews, sketch ideations and storyboard, create paper prototype, create digital prototype, design the logo

Problem Overview

In a fast-paced environment, college students often sacrifice their nutritious daily eating habits due to their academic and extracurricular activities in college. Based on our research findings from interviews and “Fly-on-the-wall” observations, the majority prioritize convenience in their food choices which can inadvertently lead to malnutrition and health issues due to eating irregularly. Furthermore, many students can’t afford the expensive meal plans and take-outs on campus.

Our Solution

Our proposed solution is Foochine (see Figure 2), vending machines that sell customizable nutritious meal combos that are cheaper alternatives for people who are already buying take-outs. These are cooked nutritious meals that are cheap and convenient, including options tailored to specific dietary needs. Students can choose the ingredients they like to add to their meal combos from the five food groups. These meals are at a fixed price of $10, offering an affordable option for students. The vending machines offer discounts after a certain time which helps students save money.

Foochine vending machines are placed in different buildings across campus, which are accessible for students to grab a meal before or after their classes. Some of the buildings we are considering already have vending machines, which are the Husky Union Building and the Odegaard Library. Since students already know that there is food inside these buildings, they can easily discover Foochine. This is a great way for students to remember to eat their meals based on their schedules.

Paper Prototype, Testing Process, and Results

Figure 3: Initial paper prototype of Foochine with screens of the vending machine

Our initial paper prototype (see Figure 3) includes the screens for ordering the ingredients from the five food groups, which are grains, protein, vegetables, dairy, and fruits. There is a progress plate at the right on each screen to indicate which food group they have selected so far. Furthermore, there is an order list at the right to show the user the ingredients they have ordered so far. Our paper prototype also has screens for payment, receipt confirmation, order preparation, order pick-up, and starting a new order.

We conducted usability tests with our paper prototype on three UW students. We introduced a scenario where the participant is coming out of a class hungry. Their task is to order lunch from our vending machine. While conducting our tests, some users expressed confusion when they inserted their payment before starting their food order. Thus, we added a start button to indicate users to click on the button to start their order instead of paying first. Next, our users didn’t like certain food options that were provided on the screen and wanted to skip that ingredient step. So, we added a “None” option for each food group selection for users to skip the step if the food options don’t align with their dietary requirements. There was feedback on having quantity options because users might not want to order the meal if they can’t customize the quantity. Hence, we created quantity buttons so users can add more than one quantity of the same item and have an accessible way to remove an item from their order. After users finished customizing their order, they were stuck on how to pay for their meal. This led us to add a checkout button that will appear after the users go through all of the meal groups and the progress plate is completed. The checkout button lets the user know that the next step is to pay for their meal.

Digital Mockup

Figure 4: Foochine digital mockup with all screens of the vending machine, check out our

Digital Mockup & Interactive Prototype

Task 1: Buying Take-outs Around Campus

Figure 5: Foochine’s start order screen

The start order screen includes a slogan and shows an example image of the bowl to catch the user’s attention. The button at the bottom indicates the user to begin their order. The screen emphasizes the total of the bowl is $10.

We changed the star to a circle of the price because of simplicity. The change to a simple but colorful design aims to attract anyone passing by the vending machine.

Figure 6: Ordering screens for the five food groups

Next, the user will be able to choose the ingredients for their bowl based on the balanced food plate. The user would choose their grains, proteins, vegetables, toppings, and then their fruits.

We added another option for the base after the results of the usability testing. We added a food plate showing the process of ordering. The food plate colors are based on our color palette. The quantity amounts are important to show users how many items they are ordering, and they can adjust the quantities. After the progress plate is complete, the user can now checkout.

Task 2: Buying Nutritious Food

Figure 7: Payment screen to prompt user to pay at the right side with card or cash

After choosing their ingredients, the user will pay for their bowl with either card or cash.

We removed the “Pay Now” button because there is now a Checkout button which will switch the screen to this. Total and payment instructions are now displayed on the screen. We made a typical checkout layout, the total amount, card payment, and cash payment are all in one column. This is for the user’s ease of paying.

Figure 8: Receipt confirmation for user with options to text or discard the receipt

After payment, the user can enter their phone number to get a receipt or skip it.

There is now a button to press “Text Receipt” instead of a skip button which gives more clarity on what will happen after inputting their phone number.

Figure 8: Order preparation, order pickup, and starting new order screens

The screen will be counting down from 3 seconds to show their meal is being prepared. Once their meal is ready to be picked up, an arrow animation will be pointing down to indicate meal and utensils will be delivered below the screen. After the user picks up their order, the screen will fade to the Foochine logo with a button to start a new order.

We made the screen simpler with fewer words, giving a countdown for when the order is ready for pickup. The improved screen easily gets the message across to the users and the animation is easier to understand. We added the arrow animation that easily indicates to the user that their order will appear below the screen. We change the color red which is associated with food, and users get hungry when seeing red. Red is also bold which attracts attention.

Summary

The University of Washington has many food options on its campus; however, students are not finding the food to be nutritiously balanced or affordable. Additionally, students do not have the time to leisurely wait in line to purchase lunch when their classes start soon.

With Foochine, students’ worries are resolved. Placed throughout campus at their class buildings and food centers, Foochine vending machines provide food of rich nutritional value at an affordable price. We are envisioning that soon, University of Washington students will have time to eat nutritiously balanced meals without diminishing their health and wallet.

--

--

CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction