Hardrock 100 — a hundred miles, wild & tough
A concept redesign of the website for one of the hardest 100-mile races in the world — built to pitch to the organisers.
Hardrock is a 102.5-mile loop through Colorado's San Juan Mountains, over thirteen passes above 12,000 ft. I turned a dated site of long text pages into a race-first experience: the real course up front, the lottery explained in numbers, and the race's culture given room to breathe.
A legendary race, hidden in long pages.
The original site had a banner, a sidebar of quick facts and everything else in long text pages. Drag the handle to compare.
BeforeAfterFour calls that shaped the site.
Map, profile and stations — together
The course lived in separate files: a map here, an aid-station table there, elevation somewhere else.
One course explorer built from the official GPX: drag along the line, the profile or the station list and the other two follow. A switch flips the loop between clockwise and counter-clockwise.
A runner or crew member reads the whole loop in one view — where, how high and by when.
Make the lottery legible
About 3,000 people apply for 146 places, and the ticket rules were a wall of text.
The entry page walks through four steps, then a ticket calculator does the maths: pick your pool, past DNS and service tickets — see your count double each year.
Applicants understand their real chances in seconds, not after reading the FAQ.
Give the culture room
What makes Hardrock special — the mining towns, kissing the rock, its legends — was scattered or missing.
The home page tells it in chapters, and a History page holds the legends, records and podiums. Light sand palette, a slab italic nodding to the old western lettering, and the logo's tricolour as accents.
The site feels like Hardrock, not like any other race calendar entry.
One page for race week
Schedule, rules, crew access and lodging were spread over many pages.
A Runner Info page with a day-by-day race week, the rules, crew and pacer etiquette, and where to stay. Safety and weather sit right on the course page.
Runners and crews find race-week answers in one place.
Built for the phone in the mountains.
Crews follow the race from car to car, often on a weak signal — so the map, profile and tables all work on a small screen.
A live concept, ready to pitch.
Live site at hardrock100-3kb.pages.dev to show the organisers.
Course explorer built from the official GPX, in both directions.
Lottery calculator that turns the ticket rules into a number.
Static Next.js on Cloudflare — fast, with near-zero hosting cost.
Respect the legend, clear the clutter.
Hardrock doesn't need selling — it needs its course, its rules and its spirit made easy to find.
