A concept redesign of the website for the Pikes Peak Marathon and Ascent — built to pitch to the organisers.
The Ascent climbs 13.32 miles from Manitou Springs to the 14,115 ft summit; the Marathon goes up and back. Since 1956 it has been the oldest continually held marathon in the US. I designed the site around one idea: every scroll is a step up the mountain.
The original site was a photo slider and a menu of long pages, with key facts spread across them. Drag the handle to compare.
BeforeAfterNumbers like 7,815 ft and 11% grade don’t mean much on their own.
A scroll-driven story walks the real elevation profile in seven chapters. The altitude counter climbs as you scroll, with photos and notes for each section.
Visitors feel the climb before they read about it.
Grade, aid stations and cut-offs were split between text and PDFs.
A course explorer syncs a topo map, the profile and the aid table, with an Ascent/Marathon switch. A second section breaks the climb into grades you can compare.
Runners know every mile, every station and every cut-off before race day.
The site had a rule of thumb for pacing, but runners had to do the maths.
A pace planner takes your flatland marathon time, adjusts for altitude and shows where you will be at each cut-off — for the Ascent or the Marathon.
Every runner sees their own finish time and cut-off margin in seconds.
Registration sells out in minutes, and 70 years of results were hard to browse.
A countdown to registration with fees and deadlines, and a results section with finishers per year, every winner and an archive by year.
Runners are ready when registration opens — and the race’s history is easy to explore.
Runners check pace and cut-offs on the go, so the climb story, explorer and planner all work one-handed.
Live site at pikespeak.pages.dev to show the organisers.
Scroll-driven climb story over the real elevation profile.
Pace planner built on the race’s own pacing rules.
Results since 1956 — winners and finishers per year.
Static Next.js on Cloudflare — fast, with near-zero hosting cost.
For a race that only goes up, the design turns scrolling into climbing — so the mountain is the first thing you understand.
