SITE PLAN / CONTENT DESIGN

BUILD THE
RUNNER JOURNEY.

This page turns the Kinetic Noir direction into a concrete publishing system: what the homepage must say, which sections earn attention, where training intent appears, and how the experience converts energy into repeat visits, challenges, and gear revenue.

01

Hook

Lead with atmosphere, proof, and a single high-pressure CTA.

02

Guide

Use plans, routes, and challenge loops to create habit-forming clarity.

03

Convert

Push premium plans, event signups, and gear with earned urgency.

YOUBETTERRUN homepage visual
Creative North Star

THE HIGH-VELOCITY SHADOW.

The brand should feel like elite performance shot through a premium editorial lens: dark surfaces, sharp type, selective cyan highlights, and layouts that lean forward instead of sitting politely in a grid.

The experience cannot feel like a generic fitness template. Content has to move with intent. Routes are not just listed, they are framed like targets. Challenges are not announcements, they are countdowns. Gear is not merchandise, it is performance equipment.

Visual rule

No divider-heavy UI. Use tonal shifts, stacking, blur, and asymmetry to define hierarchy.

Voice rule

Short copy. Hard verbs. Every phrase should feel like a signal, not a paragraph.

Added content

CONTENT ARCHITECTURE FOR THE FULL SITE.

This section was added to make the design page actually usable as a site plan. It defines the page flow, what each major screen must accomplish, and how the story escalates from curiosity to commitment.

01

Entry

Homepage hero, live proof ticker, and one immediate action.

Goal: stop the scroll

02

Discovery

Route cards, plan previews, and city-specific mission cues deepen intent.

Goal: build relevance

03

Commitment

Challenges, rankings, and weekly training plans create return behavior.

Goal: create habit

04

Revenue

Gear stories, membership unlocks, and event registration convert momentum.

Goal: monetize trust

Content pillars

WHAT THE SITE MUST KEEP PUBLISHING.

The site works best when each pillar reinforces a runner's identity: where to run, how to train, what to prove, and what equipment earns the edge.

Pillar 01

Route intelligence

Maps, surfaces, elevation, weather windows, and best-time recommendations.

Pillar 02

Training plans

Weekly sessions, recovery logic, pacing intent, and milestone checkpoints.

Pillar 03

Proof + rivalry

Leaderboards, streaks, challenge completions, and social proof moments.

Pillar 04

Gear laboratory

Editorial product stories tied to measurable gains, not generic catalog copy.

Conversion ladder

MAKE EVERY CTA EARNED.

Primary CTA: Start Your Run / Build Your Plan

Secondary CTA: Explore Routes / View Challenges

Retention CTA: Join weekly mission, unlock elite protocol, save route

Revenue CTA: Shop performance gear, enter paid challenge, upgrade membership

Execution notes

Use Space Grotesk for headlines that need to hit like signage. Use Inter for body copy, data labels, and UI utility text.

Keep cyan reserved for action, urgency, and status. If everything glows, nothing matters.

Use background shifts instead of heavy outlines to separate content blocks. Let layout and contrast carry the hierarchy.

When a section feels too balanced, push it off-center. The system should feel engineered, not generic.

RETURN TO HOMEPAGE