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.

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


Market Research

Designing Eatly


Low-Fidelity Scenario Testing

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

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

Final Interaction Flow

Prototype Demonstration

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


Using the right tool for the right job.

The challenge in balancing multiple user 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