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.
The original site had a banner, a sidebar of quick facts and everything else in long text pages. Drag the handle to compare.
BeforeAfterThe 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.
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.
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.
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.
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.
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.
Hardrock doesn't need selling — it needs its course, its rules and its spirit made easy to find.
