←
All work
Concept 01
Sport tech
Framer
Self-initiated
Halfstep.
On your marks.
Brief
Self-initiated concept · sport tech
Written by RELAY
Brand
Halfstep
Fictional running-coach app · runners and coaches
Scope
Web design · Framer build
Scroll scene · Tablet dashboard · Waitlist
Timeline
1 week
Sprint plan
Fig. I — Showcase reel, 1080p60
Sound off
01 — The brief
A coaching app that has to fit on one page.
Halfstep is a fictional adaptive running coach for runners and the coaches who train them. We set ourselves the brief an agency would hand us: a calm brand in ink, track orange and lime, and a waitlist page with one job, getting a runner to join.
Fourteen sections: a hero video, seven metric cards, a running-track scene, a training dashboard, six training areas, a timeline and eighteen questions, all leading to the waitlist. 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 · Film · Copy · Client relationship · Credit
RELAY takes
UX · UI · Digital brand system · Framer build · Track scroll scene · Tablet dashboard · Waitlist flow · Motion · QA
02 — The challenge
Urgency without the hype.
01
Precise, not pushy
Running-app sites default to neon and countdown clocks. The brand called for a training log: dashed hairlines, light Inter numerals, lime only on dark, and it still had to get a runner to join before the footer.
02
Dense content, one scroll
Seven metric cards, five track ideas, six training areas of 13 items each, two audience cards of 11 rows and an 18-question FAQ, all on one page, with the FAQ editable by a marketing team without a designer.
03
Make "adaptive" interactive
The brief: make "adaptive" something you scroll through. That meant a custom, scroll-driven running-track component inside Framer: a sticky scene where a lime line runs marker to marker and lights up five ideas.
03 — How we built it
The sprint, day by day.
D1
Brief, audit, sitemap
On a relay, day one also means agency-domain accounts and their Slack. Here: brand audit, content inventory and a fourteen-section sitemap, locked by end of day.
D2
Digital brand system
Inter throughout, an ink, lime and track-orange palette in 16 colour styles, 21 text styles, 24 SVG icons, 1px dashed hairlines, two pill variants and headlines that reveal line by line.
D3
Sections and build in parallel
Hero, metric ticker, features, split, sticky list, six areas, audiences and timeline designed and built in Framer the same day. On a relay, the agency's CD presents at the mid-sprint review.
D4
Track scene and tablet dashboard
Two custom Framer code components: a sticky running track whose lime lane fills marker to marker through five ideas, and a training dashboard in a tablet frame that slims to a phone bezel.
D5
CMS, forms, QA, launch
FAQ as a CMS collection of 18 items, first one open; waitlist and newsletter forms; a StickyReveal override on the final CTA; Tablet and Phone 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 app. For an agency.
App
sections, 7 metric cards, 18 FAQ items — all on one page
App
custom components — running track and tablet dashboard
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.
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 · 14 sections · Component library · 16 colour and 21 text styles · Motion specs
Build
Framer site, ready to move to the client's workspace · CMS: FAQ · Track scene and dashboard code components · StickyReveal override · Waitlist and newsletter forms
Documentation
FAQ editor guide for the client's marketing team · 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 · Halfstep is a fictional running app, so this concept is ours to show
Next concept — 02
Ondo — skincare shop →
E-commerce · Framer build · Live 3D bottle — self-initiated concept
