Whiteboard challenge

404 Page: turning a dead promo link into an order

A 404 page for a Greek restaurant whose expired 20% off banners are still live on other websites.

FormatWhiteboard exercise, 40 minutes

PlatformMobile web

DateOctober 2026

Three screens of the Hercule ordering site: a 404 page offering 10% off with a Greek salad card, the order review, and the pickup confirmation

The prompt

Design a 404 page that is not boring. It should suit the brand and be useful to the people who land on it.

Framing

I asked two questions before designing: whose brand is this, and how does someone end up on this page? With no answers given, I made three assumptions.

The brand is Hercule, a Greek restaurant with its own ordering website, in Santorini blue.
Hercule ran a promotion with the code GREEK20 for 20% off. The promotion ended, but several other websites still show its banner, and that link now leads to a page that no longer exists.
The business wins when a visitor on this page places an order and does not leave.

A 404 page for Hercule that turns a visitor who clicked an expired 20% off banner into an order.

One user, one situation

I found the user by walking backwards from the click. The link was a 20% off banner on another website, so the person who taps it is motivated by price and ready to order.

He clicked expecting 20% off one meal.
His goal is to order at a discount right now.
The risk is that he leaves and orders from a competitor.
He tapped a banner while browsing, so I designed for a phone.

Pain points and priorities

He was promised a deal and it is gone. He does not know whether the mistake is his, and a standard 404 page gives him nowhere to go. I chose to solve the broken promise, because it is the reason he leaves.

A replacement offer has to match the broken promise in kind, with no new conditions. I compared four options against that rule.

Offer	Decision	Why
Buy one, get one 50% off on orders over $50	Rejected	He is one person ordering one meal. It is a worse deal with a higher bar.
A free salad with an order	Rejected	He wanted to pay less, and this gives him more food.
Honour the 20%	Rejected	Hercule does not control the old banners, so the discount would never end.
10% off, applied automatically	Chosen	It is the same kind of value, it is already a live promotion in the system, and he types no code.

The cost of this decision: some visitors who wanted 20% will find 10% too low and leave. I accept that to protect the restaurant's margin.

The flow

He taps the dead banner and lands on the 404 page. He orders the suggested dish with the discount already applied, reviews the order, and gets a pickup confirmation. I cut a step that asked for his location, because it adds friction for someone who is about to leave.

The key screen

The headline gives the good news first and names the number: “Good news: you still get 10% off.” The line below it says the 20% deal is not available.
The food card is the largest element, because a photo answers “what can I eat right now?” faster than text.
The button is the action with the discount attached: “Order with 10% off.”
“See the full menu” is the way out if he does not want the suggested dish.

The three Hercule screens side by side: the 404 page with the 10% off headline and Greek salad card, the order review with the discount applied, and the pickup confirmation

Edge cases

He does not want the suggested dish. The full menu link sits under the button, and the 10% stays on his order.
10% is too low for him. Some visitors will leave. This is the trade-off I accepted, and it is the first thing I would test.

How I would know it works

The share of visitors who land on this page and place an order through it.

What I would do differently

My first attempt designed for a search with no results. A 404 is a link to a page that does not exist, and naming the dead promo link gave the page a real visitor and a real reason.
I first described the user with details that changed nothing on the screen. Now I keep a detail only if deleting it would change the design.
My first headline hid the offer behind a “What's the deal?” button. The final one puts the number in the headline and the action in the button.
Next I would test 10% off now against 20% off the next order, and measure which one gets more orders from this page.

The screens were drawn with Claude from my design decisions. The salad is an illustration, and the prices and address are sample data.

All whiteboard challenges →