←
All work
Concept 05
Fitness
Framer
Self-initiated
Pulse.
Two taps to class.
Brief
Self-initiated concept · fitness
Written by RELAY
Brand
Pulse
Fictional fitness brand · 8 clubs, 4 opening soon
Scope
Web design · Framer build
Schedule · Plans and add-ons · App-like phone UI
Timeline
3 weeks
Sprint plan
Fig. I — Showcase reel, 1080p60
Sound off
01 — The brief
A club site that has to work like an app.
Pulse is a fictional fitness club. We set ourselves the brief an agency would hand us and built it end to end the way a relay runs: a multi-city club brand in ink, lime and deep-blue gradients that needs a site to sell three plans, run a filterable weekly schedule, introduce eight coaches and behave like an app on a phone.
Six pages: Home, Membership, Schedule, Coaches, Locations and Support. Three plans with add-ons, a weekly timetable across six class types, eight coaches, clubs open and opening soon, and a help centre. 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 · Campaign photography · Copy · Client relationship · Credit
RELAY takes
UX · UI · Digital brand system · Framer build · Schedule CMS · Plans and add-ons flow · Motion · QA
02 — The challenge
Loud brand, legible schedule.
01
Energy without the noise
Gym sites shout. Ours has energy to spare (lime on ink, deep-blue gradients, big stat cards), yet the site still had to let someone find Tuesday's boxing and hit Book in two taps.
02
Six class types, seven days
Six class types, eight coaches, seven days from 6am: a schedule a front desk could edit weekly, filtered by day and type, viewed by time or coach, with spots-left counts, waitlists and add-to-calendar.
03
Sell four clubs that aren't built yet
Four clubs are still under construction, and the Locations page had to sell them anyway: build-progress bars, waitlist counts, a Notify me button and a request form for the next city.
03 — How we built it
The sprint, week by week.
W1
Brief, audit, sitemap
On a relay, week one also means agency-domain accounts and their Slack. Here: brand foundations, schedule data model and a six-page sitemap, locked by Friday.
W1–2
Digital brand system
Manrope throughout with square-bulleted section tags, an ink, lime and deep-blue gradient palette, pill buttons, soft-radius cards, and motion kept to quick lifts and slide-up sheets.
W2
Pages and build in parallel
Home, Membership, Schedule, Coaches, Locations and Support designed and built in Framer the same week. On a relay, the agency's CD presents every Thursday.
W2–3
Schedule and plans with add-ons
A CMS-driven weekly schedule (day and class-type filters, time or coach view, spots left, waitlist, add to calendar) and a three-tier plan table with a monthly/annual toggle and add-ons.
W3
CMS, forms, QA, launch
Eight CMS collections, from classes and plans to coaches, clubs and help guides; location-request and contact forms; 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
↗
Pages — full-page captures of the concept site
05 — In numbers
For the club. For an agency.
Club
class types, 8 coaches, 7 days — the whole schedule CMS-editable
Club
taps from the home page to booking a class
Agency
weeks, 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.
01
Agency-domain identities
02
Reviews run through the agency
03
Their templates, their tone
04
NDA before the brief
05
Clean exit, IP assigned
07 — Deliverables & handover
What an agency would walk away with.
Design
Figma file in the agency's team · 6 page templates · Component library · Schedule and card system · Motion specs
Build
Framer site, ready to move to the client's workspace · CMS: Classes, Plans, Add-ons, Coaches, Locations, FAQs · Class browser · Add-ons total · Location requests
Documentation
Schedule-update guide for a front desk · 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 · Pulse is a fictional fitness club, so this concept is ours to show
Next concept — 01
Halfstep — running app →
Web design · Framer build · Scroll scene — self-initiated concept
