RUA

The situation

One page, one long table

A turtle at the door

The site opens with a roll-up shutter that lifts once the count reaches 100. The RUA wordmark stretches up, the turtle pops up from the bottom edge holding the menu, and a tap makes him say another line, from Xin chào to Ăn ngon nhé. Come, we eat brings in three turtle servers and the story of the name: rùa means turtle.

Don't skip the sauce

The chili bottle can be squeezed. Every squeeze splashes sauce across the headline and raises the heat, from Mild to RUA hot, then OK, that’s plenty.

A menu that plates itself

The menu holds 17 dishes and drinks in three tabs: Big eats, Good sips and Extra bites. On desktop, the dish lands on the plate as you point at its name, and the spicy ones carry a chili. Below it, the Hot eats on the go carousel can be dragged, and its Add button puts a dish on the table straight away.

Order for the table

The + button sends a dish flying to Your table. There the amounts can be changed, the total shows, and the turtle reacts with a different face. Send to the counter prints a numbered ticket to show at the counter, and the ticket says plainly that this is a preview and nothing is sent.

Hot stuff inside

The takeaway section shows RUA's packaging in four steps: the flat pack, the label, the folded box and the soup tub. On desktop the steps change as the page scrolls; on phones they change on their own and can be picked.

Pull up here!

The Open/Closed sign hangs and swings when touched or when the page scrolls fast. It reads the time in Saigon, so visitors anywhere know whether RUA is open right now. Below it come the storefront photo, the four ways to eat at RUA and a collage of the signs inside.

Little Stool Club

The sticker wall is yours to fill: tap an empty spot to slap on a new sticker, drag any sticker around, or peel them all off. Below it sit RUA's merchandise and six Instagram posts.

Ordering for the table

1. Tap + on a dish in the menu or the carousel
2. The dish flies to Your table
3. Change how many of each
4. Check the total
5. Send it with Send to the counter
6. Show the numbered ticket at Order here

Design decisions

• Motion from the brand's GIFs

  Mascots pop up from the bottom edge with a motion-blur whoosh and an overshoot. Idles, wiggles and sticker slaps hold every frame twice like stop-motion, and the lines boil eight times a second like hand drawing.

• Opening hours in Saigon time

  The status in the header and the Open/Closed sign are worked out from Saigon time (10AM to 10PM), not the visitor's own clock, and refresh every 30 seconds.

• A table that waits for you

  The order is kept on the visitor's device, so the table is still there when they come back. If the browser refuses storage, the site keeps working.

• Playful, still easy to use

  The chopstick cursor only appears for a mouse. Dishes can be added from the keyboard, Escape closes Your table, and when visitors ask for reduced motion, the animation stops.