02 — Café website · Concept
Morrow Coffee
Helps a neighborhood café turn a quick look into a visit: the seasonal menu is easy to browse on a phone, with hours and seating details right where people check them.
Scan to try it on your phone
- Business
- Specialty café (fictional)
- Project
- Café website
- Status
- Concept · live demo
- Built with
- Astro, TypeScript, CSS
(01)
The brief
Morrow Coffee is a fictional daytime café. Its customers mostly want three things: what’s on the menu, whether it’s open, and whether they’ll get a seat. They usually check on a phone, often on the way.
A PDF menu and a social profile were doing that job badly. The brief: a menu that is pleasant to browse on a phone, seasonal specials at the top, and the practical details people check before they leave home.
- Goal 01 Make View menu the main action
- Goal 02 Browse categories with one thumb
- Goal 03 Show today’s hours and open status
- Goal 04 Answer seating, laptop, dog and access questions
(02)
Design decisions
-
01
Menu first
View menu is the primary action. Categories sit in a sticky, swipeable bar that follows your position, so a long menu never feels like a long page.
-
02
Answers before they’re asked
Hours with today highlighted and a live open or closed status, plus seating, Wi-Fi, laptops, dogs, step-free access and payment, all in one short section.
-
03
A lighter, warmer identity
A soft serif, cream and apricot palette, and arched and rounded photo crops give the café its own rhythm, different from the barbershop’s hard edges.
-
04
Easy to keep current
The whole menu lives in one data file. Changing a price or adding a seasonal drink never touches the layout.
(03)
The customer journey
Most visits are a quick check on a phone. The journey goes from the first screen to the menu to the visit details.
-
Step 1
Open the site
Today’s hours and the View menu button appear on the first screen.
-
Step 2
Browse the menu
Category tabs stay pinned while you scroll and highlight the section you are in. Dietary tags are spelled out in a legend.
-
Step 3
Check the seasonal specials
Three seasonal items sit above the full menu with photos and prices.
-
Step 4
Plan the visit
Hours, address, seating and access details are grouped in one place, with an illustrative map.
(04)
How it’s built
- Menu items, prices and dietary tags are rendered from a single typed data file.
- Category tabs are ordinary links to page sections, enhanced with a small script that tracks the visible category.
- Open or closed status is calculated in the browser from the listed hours, with the full table always visible.
- Photography is served as AVIF and WebP at sizes matched to the screen.