Creating a pandemic-proof meal ordering platform with React.js

One troublesome ordering form…

The daily ordering form for my meal plan. Imagine having to fill it out twice every day!

Design Problem

The meal plan’s Google Form created a frustrating and exhuasting ordering experience for students, budget issues for kitchen managers, and burnout for the chef.

In this case study, I show how I designed and prototyped a new ordering interface with React.js to help students order their meals, help kitchen managers maintain finances, and accommodate the chef’s work ability.

Understanding the needs of the students, kitchen managers, and chefs.

User Research

  • I conducted 7 user interviews with the three main stakeholders in a meal plan: the students, kitchen managers, and chef.
  • I used response summaries from the Google Form including order choice, order timing, and common errors made.

Key Insights

  1. Options Paralysis

Google Form Insights


I created the following persona to capture the key needs of students before creating the interface.

Market Research

Designing Eatly


Low-Fidelity Scenario Testing

I gathered 5 participants to test a low-fidelity version of the Eatly prototype to better understand the user journey and uncover any potential usability issues. During these sessions, I participants to engage in the three core main tasks of the product.

Testing Results:

  • Participants were confused when viewing their order receipt on the home screen
  • The design of the order ticket didn’t instill enough confidence that the order has been received.

Shaping the High Fidelity Prototype

Going into this project, I knew the final prototype would be crafted using code since this interface was expected to be used by real students. Furthermore, it would allow exploration into more complex interactions. For this prototype, I used React.js.

Iterating from Feedback — shaping the nitty-gritty interaction details.

Adding a dedicated orders page to act as a clear ending to the user journey

Final Interaction Flow

Prototype Demonstration

The below videos walks through the various Eatly use cases. Furthermore, feel free to play with an actual demo prototype here (note: the log-in option has been removed for demonstration purposes and the menu navigator is only present for the lunch menu).

Final Desktop React.js Prototype
Final Mobile React.js Prototype


Using the right tool for the right job.

Unsurprisingly, designing through code takes significant time. However, ironing out major design decisions through low-fi prototyping and usability testing up-front significantly reduced the complexity of revision needed later. Still, real code opened the door for many different complex features such as the menu navigator, custom order selection, and flexible use of real data.

The challenge in balancing multiple user needs.

The goal of the Eatly interface is to facilitate conversation between the students, kitchen managers, and chef. To deliver a truly impactful design, I needed to determine the essential priorities of each group and make sure each voice is represented throughout. I was only able to achieve this by listening to each group and understanding their goals, emotions, and needs.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store