Pikes Peak Marathon — 7,815 feet straight up
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.
America’s Ultimate Challenge, on a Weebly template.
The original site was a photo slider and a menu of long pages, with key facts spread across them. Drag the handle to compare.
BeforeAfterFour calls that shaped the site.
Scroll the climb
Numbers 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.
The course, in one view
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.
Plan your own race
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 and history, made clear
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.
Built for the phone on the mountain.
Runners check pace and cut-offs on the go, so the climb story, explorer and planner all work one-handed.
A live concept, ready to pitch.
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.
Make the vertical felt.
For a race that only goes up, the design turns scrolling into climbing — so the mountain is the first thing you understand.
