Grand Trail de Serre-Ponçon

Five races, a three-day village, a volunteer programme and thirty partners on one site. Each race now sells itself on a single page a runner can read on a phone the week before the start.

WebsiteUX / UICopy structure

ClientGrand Trail de Serre-Ponçon

Year2026

RoleDesign + build

Timeline5 weeks

Visit the site ↗Talk about a similar project

The 100 km page, top to bottom: the template every distance runs on — facts, profile, aid stations, rules, the traced course and the mandatory kit.

Work details

TypeEvent website

IndustryTrail running · sport event

ClientGrand Trail de Serre-Ponçon, Embrun (FR)

RoleDesign, UI and frontend

Year2026

Timeline5 weeks

StatusLive — edition 18/20 September 2026

DeliverablesRace page template ×5, village, volunteers, FAQ, partners

Fonts

AmbitInter

Colours

Built with

Figma

Nuxt

TypeScript

Tailwind CSS

ChatGPT

Typefaces and stack are my best reading of the build and need the organisers’ confirmation before this page goes public.

Visit the site ↗

What it needed

A runner needs one page, not a PDF pack.

The event had five distances, three days of village programming and a hundred volunteers, and all of it lived in PDFs and news posts. Runners emailed the same four questions every week — cut-offs, aid stations, mandatory kit, where the start is. Volunteers had no page at all, and the village programme was a poster. Registration was a link at the bottom of everything.

What I did

Structure

Four tracks instead of a feed: the races, the practical info, the village, the volunteers. Registration is the only repeated action, and it sits in the header on every page.

Race template

One page per distance, in the order a runner reads it: distance, elevation and cut-off as three facts, the elevation profile, the aid-station list, assistance and rules, practical info, the traced course with the GPX and the road book, then mandatory kit as a grid you can tick off.

Volunteers

The volunteer section is a picker, not a form: five roles down the left, each with what the job involves, why to join and the profile looked for — so people self-select before they sign up.

Village

The village got its own page: animations, bar and food trucks, the brand list and the free concerts, with opening hours per day as chips instead of a paragraph.

Design

Cream stage, black display type, one orange reserved for actions and a mint kept for numbers. Mountain photography runs full-bleed; anything a runner has to check — kit, hours, aid stations — stays plain text in white cards.