Ordering ahead without the guesswork

The website doesn't answer the questions people bring to it

Three sources pointed to the same problems

• Observation3 timed snapshots during a 2-hour visit. Noise went 5/10 → 2/10 → 7/10, with 6 people in line as lunch began.
• Intercept interviews6 groups, 11 adults: families, remote workers, first-timers, regulars. Goals, ordering friction, and how people use the website.
• Conversation with on-duty staff15–20 minutes. The cafe's goals and what staff wish customers knew.
• Review analysisYelp, Tripadvisor, Facebook, Foursquare, and the current site, to see whether interview findings held up at scale.

Ordering is easy in person, but the website leaves people guessing

1. The website is a pre-visit tool, not a habit5 of 6 groups walked in without checking it. People who went online came for one answer: hours, parking, or dietary options.
2. First-timers are the ones who look aheadThe only group that checked the site was visiting for the first time, and they couldn't find what they wanted.
3. Dietary options build loyaltyGluten-free and dairy-free regulars named those options as a reason they return.
4. Small in-person snags add upSilverware you have to ask for, a menu far from the kiosk, drink sizes in ounces.
5. Unwritten house rules cost staff timeStaff want customers to bus dishes and ask for silverware, but nothing tells them before they arrive.

what I heard

• “The only times I check the website is to see the hours and whether or not it's open.”

• “I checked the menu to see if there were sugar-free options. I didn't find it…”

Intercept interviews, Sept 2026

Fix what happens before and during ordering

• Journey map7 stages from Discovery to Departure for a composite first-timer. Friction clustered at Pre-visit, Ordering, Waiting, and Departure.
• Product vision boardTarget groups (remote workers, students, families, friends), top needs (a space to work, a social space, gluten-free and dairy-free options), and business goals.

• BuiltState the concept; keep the menu currentHero names breakfast, lunch, coffee; one menu everywhere
• BuiltShow hours and parking clearlyPersistent hours bar with Directions on every page
• BuiltPost a wait estimatePickup estimate on the menu; progress tracker on confirmation
• BuiltRead the order back before payingItem changes shown in cart and checkout
• Not builtLive seating or wait statusNeeds live data from the cafe
• Out of scopeDrink temperature and egg prepKitchen operations, not a website problem

Every key decision traces back to research

IdeationEight homepage layouts, narrowed by peer critique

I sketched 8 desktop homepage layouts on paper: hero-and-cards, a split image-and-text layout, a logo-centered page with four calls to action, and two experiments built on curved shapes and a timeline.

what 2 peers said

• A clear hero with cards underneath was easiest to follow
• The main call to action needed to be more obvious
• Image-led sections communicated faster than text-heavy ones

what I carried forward

• Hero followed by card sections (the middle-left sketch)
• A filled “Order online” primary button, outlined “View menu” secondary
• Photo-led favorites

Wireframes to high fidelityFrom paper to a small design system

• Lo-fiPaper sketches of the desktop homepage.
• Desktop v1 · Oct 13High-fidelity screens for usability testing, built on Songbird's existing brand.
• Desktop v2 · Oct 20Interactions wired through checkout, alt text, tooltips, accessibility fixes.
• Mobile mid-fi · Oct 26–27Grayscale frames for the homepage, menu, item sheet, cart, checkout, and confirmation.
• Mobile hi-fi · Oct 27Color, type, and components applied from the design system.

Type

IBM Plex Serif headings for warmth, Inter for body text and buttons. Separate desktop and mobile scales.

Color

Espresso brown, sage, and neutral ramps that echo the cafe's wood and plants. All text pairs pass WCAG AA (4.5:1).

Layout

Desktop: 1280 px, 12 columns, 24 px gutters, 80 px margins. Mobile: 499 px, 4 columns, 16 px gutters and margins.

Components

Buttons (Type × State × Size), input fields, nav bars, footers, product cards, and an order summary card.

User flowHomepage to confirmed pickup in five steps

1. HomepageOrder online
2. MenuFilter, then + Add or open the item
3. CartASAP or scheduled pickup, tip
4. CheckoutContact, pickup, payment
5. ConfirmationOrder number, pickup time

Design rationaleWhat I heard, and what I designed

Each design decision, the research behind it, and the principle it applies

Research showed	I designed	Principle
Hours changed; people get caught by the 3 PM close	Hours and Directions bar on every page	Visibility · consistency
Unclear if it's a coffee shop, cafe, or diner	Hero headline names it: breakfast, lunch, coffee	Visual hierarchy
A first-timer couldn't find sugar-free options	Dietary filter chips plus a tag on every item	Recognition over recall · filtering pattern
The wall menu confuses even staff	Category tabs; photo cards with price and description	Chunking · card pattern
Waits stretch at peak times	Pickup estimate, ASAP preselected, progress tracker	Visibility of system status · smart defaults
Reviews mention order mix-ups	“Any changes?” row; changes shown in cart and checkout	Error prevention · progressive disclosure
P1 loved adding straight from the menu	+ Add on every item card	Efficiency
Business goals: orders, gift cards, wholesale	Catering, Gift Cards, Wholesale cards; “Forgot a pastry?”	Business alignment
Checkout should feel quick and safe	Guest checkout, numbered steps, Apple Pay and Google Pay first	Reduced friction · platform conventions

Responsive designThe same flow, rebuilt for a phone

Lunch-rush and to-go customers are the most likely to order from a phone, so mobile got its own patterns instead of a shrunken desktop.

How each desktop pattern changed on mobile, and why

Desktop	Mobile	Why
Full nav bar	Hamburger, logo, and cart with an item badge	Prioritization
Hero with two buttons	One Order online button that sticks to the bottom	One primary action in thumb reach
3-column menu grid	Single-column rows with a thumbnail and + Add	Scannable; matches food apps
Centered item dialog	Bottom sheet with a handle, ×, and sticky Add to order	Platform convention; thumb zone
Cart with a side summary	Stacked summary and a sticky “Checkout · $15.24” bar	Total always visible
Checkout with the full nav	Enclosed checkout: back arrow, lock icon, collapsible summary	Fewer exits

a decision testing drove

I removed View menu from the mobile sticky bar, leaving one action. In testing, Menu and Order Online competed for attention.

My prototype vs. the live site

Goal

Can people order ahead for pickup more easily than on the current site?

Method

Moderated think-aloud; same tasks on my prototype, then the live site

Participants

3

Measures

Task outcomes, 1–5 ease ratings, confidence

what I heard

• “I love those pages where I can add right from the menu without having to click into the picture.”

  P1

• “Are other buttons supposed to be working?”

  P3, after a button didn't respond

reading the results honestly

• The sandwich task wasn't fair to the live site: I picked an item that's only sometimes on Songbird's online menu, and it wasn't there during testing. That, not the site's layout, is why 2 of 3 couldn't find it.
• I weighted behavior over ratings: P1 gave a 5 to a task she didn't finish.
• The ASAP comparison isn't a fair win: the cafe was closed during testing, so the live site only allowed scheduled pickup.
• Order effects: everyone saw my prototype first. Round 2 will alternate which site goes first.

What changed after testing

Clickable on both platforms, documented in Dev Mode

• Two prototype flows: Desktop and Mobile “Order Ahead for Pickup,” both from the Homepage to Order Confirmation.
• Dev Mode handoff page: a read-me, about 250 annotations (interactions, accessibility, alt text, content rules), and marked exports.
• Clean file: named layers, color, text, and shadow styles, and documented components.

What testing actually showed

AI use: I used Claude (Anthropic) to help write interview questions, organize reviews and notes, give design feedback, build the mobile item-sheet wireframe, create the user flow diagram, and draft this write-up.