←

All work

Concept 03

Hospitality

Framer

Self-initiated

Maren.

A short season.

Brief

Self-initiated concept · hospitality

Written by RELAY

Brand

Maren

Fictional restaurant · Arts District LA

Scope

Web design · Framer build

Menu CMS · Reservations · Motion

Timeline

2 weeks

Sprint plan

Team

1 lead · 1 designer · 1 Framer dev

The same line-up an agency would get

Team

1 lead · 1 designer · 1 Framer dev

The same line-up an agency would get

Fig. I — Showcase reel, 1080p60

Sound off

01 — The brief

A restaurant that changes its menu weekly.

Maren is a fictional restaurant, and this is the brief a hospitality agency would hand us: an identity of hand-written menus, candlelit photography and a quiet serif voice, and an old site that was a PDF and a phone number.

A seven-course tasting the chef rewrites every Thursday, five rooms, a wine list the director edits nightly, a private vault, two seatings and reservations that open on the first of each month. On a real relay, the agency keeps brand, photography and the client relationship; RELAY designs and builds in Framer, under the agency's name.

Agency keeps

Brand identity · Photography · Menu copy · Client relationship · Credit

RELAY takes

UX · UI · Digital brand system · Framer build · Menu and cellar CMS · Reservations flow · Motion · QA

02 — The challenge

Slow on the plate, fast on the phone.

Candlelight on a screen

Restaurant sites default to a hero photo and an OpenTable button. We set out to give Maren the feel of the room (blackened oak, beeswax, numbered chapters), and it still had to book a table in two taps on a Friday night.

A menu that changes every week

Seven courses rewritten every Thursday, a by-the-glass list edited nightly, a monthly "volume" label and seasonal reservations, all editable by the chef and wine director from a phone, with no designer in the loop.

Make the evening legible

Two seatings, 180 minutes, 34 seats, walk-ins at the bar, parties of seven by email: the rules of the house had to read as hospitality, not terms and conditions, with live LA time and tonight's menu always in view.

03 — How we built it

The sprint, day by day.

Brief, audit, sitemap

On a relay, day one also means agency-domain accounts and their Slack. Here: brand audit, photo edit and a seven-chapter sitemap, locked by end of day.

D2–3

Digital brand system

Serif display with the "( 01 ) — Chapter" numbering, charcoal-and-beeswax palette, grid, and a motion language of slow pans and a scrolling course rail.

D4–7

Pages and build in parallel

Home, Menu, Reservations, Private Dining and Gallery designed and built in Framer the same day. On a relay, the agency's CD presents at the mid-sprint review.

D8–9

The Tasting rail and cellar list

A horizontal course rail driven by the menu CMS (seven dishes, numbered, with the price and pairing at the end) and a three-tier wine list the director edits nightly.

D10

CMS, reservations, QA, launch

Courses, wines, rooms and volumes as CMS collections; reservations flow with the monthly opening rule; live LA clock; accessibility and performance passes. Published to framer.app as a live concept.

04 — The work

The concept site. Scroll it.

Open in a new tab

↗

maren — self-initiated concept, built in Framer

Live site
Please wait while the site loads
relieved-pluto-037000.framer.app

Pages — full-page captures of the concept site

Every page shown end to end · click to open it

Swipe a tile to see the whole page · tap to open it

· Home

Open ↗

· Home

Open ↗

· Home

Open ↗

· Home

Open ↗

05 — In numbers

For the restaurant. For an agency.

Restaurant

courses, 5 rooms and a 3-tier cellar — all CMS-editable from a phone

Restaurant

taps from landing to a booked table

Agency

working days, brief to handover — the sprint an agency would book

Agency

extra hires an agency needs — and zero RELAY credit on the site

06 — White-label notes

How we’d stay invisible.

The part agency owners ask about first. Here is exactly how a relay hides the seams.

Agency-domain identities

On a relay, every RELAY designer works from an @agency email, Slack account and Figma seat. The Framer workspace sits on the agency’s plan; calendar invites, comments and version history all read as the agency.

Reviews run through the agency

We prepare the Thursday decks; the agency’s creative director presents them. If we join calls, we’re introduced as the agency’s web team — which, for the length of the relay, we are.

Their templates, their tone

Proposals, weekly reports, the CMS guide and the handover doc use the agency’s templates and voice. Nothing in the client’s inbox looks imported.

NDA before the brief

Mutual NDA signed before any files move. RELAY never contacts, pitches or references an agency’s clients. Maren is our own concept for a fictional restaurant, so it’s ours to show.

Clean exit, IP assigned

All IP is assigned to the agency on final payment; the site moves to the client’s own Framer workspace. Two-week wind-down for questions, then we remove ourselves from every seat.

07 — Deliverables & handover

What an agency would walk away with.

Design

Figma file in the agency's team · 9 templates · Component library · Chapter numbering and type system · Motion specs

Build

Framer site, ready to move to the client's workspace · CMS: Courses, Wines, Rooms, Volumes · Reservations flow · Live LA clock · Analytics and consent

Documentation

Thursday menu-update guide for the chef and wine director · Loom walkthroughs · Accessibility and QA log · Launch checklist — all in the agency's templates

Rights

Full IP assigned to the agency · No RELAY credit anywhere on the site · Maren is a fictional restaurant, so this concept is ours to show

Next concept — 04

Aurelia — residences →

Web design · Framer build · Configurator — self-initiated concept