Menu & ordering interface / Project 02
thejoifactory.com
Menu & ordering interface · From finding a dish to placing an order
What I built
I designed and implemented the customer-facing menu and ordering experience: dish discovery, customization, basket interactions, and a guided four-step checkout.
- Menu discovery
- UI/UX design
- Product customization
- Checkout logic
- My role
- Frontend · UI/UX design
- Tools & technologies
- React · TypeScript · Tailwind CSS · Framer Motion · TanStack Query · Zustand · VI / EN
01 / The project
The experience
in context.
Joi’s customer storefront connects food discovery with the practical details of ordering. My work spans UI/UX design and frontend implementation across the landing page, delivery menu, product customization, basket, and checkout. The design keeps the food prominent while making availability, selected options, prices, and the next action readable on both desktop and mobile.
The user flow
- 01Browse or search dishes
- 02Choose options and quantities
- 03Review the basket
- 04Choose delivery or pickup
- 05Enter contact details
- 06Apply savings and choose payment
- 07Review and place the order
- 08View confirmation
02 / The making
What went
into it.
Food-led visual design
Warm white, pale green, dark-green actions, and natural food photography create a consistent storefront. Shared color roles distinguish brand accents from success and error feedback, while stronger action colors keep button text readable.
Menu discovery
Category filters, search suggestions, best sellers, and a dedicated deals-and-combos shelf give customers several ways to find a meal. Search and category selection feed the same browsing state, with clear empty results rather than mismatched filters.
Product-to-basket interaction
Dish details bring imagery, customization choices, quantity, notes, and an add action into one focused surface. Mobile sizing accounts for the available viewport and keyboard; persistent cart state keeps selections available across navigation.
A four-step checkout
Receiving → Customer → Pay & save → Review replaces a long form. Delivery or pickup and timing come first, followed by contact details, optional rewards and payment, then the final review. The cart summary stays expanded so customers retain order context.
Feedback without layout jumps
Fixed localized notices explain validation and availability issues. Submission states and the invoice view complete the order flow. Unavailable showcase dishes remain visible with disabled ordering, while campaign sections follow their own stock rules.
Responsive continuity
Desktop and mobile use layouts suited to their space, including a desktop support rail and mobile chat launcher. The shared background survives route changes, Vietnamese and English copy stay connected, and restrained fades respect reduced-motion preferences.