Contexte
Sport Passion Organisation runs multiple races around Bois de Vincennes, serving both returning runners and first-time participants.
Projet
Sport Passion Organisation
Année · 2026Web
Technos
En bref
Brand and readabilityPurposeful motion
Running
Web
Motion
Rôle
Product framing, front-end architecture direction and UX/UI trade-off orchestration to turn the running showcase into a clear, maintainable decision journey.
Le terrain
Mission
Redesign the showcase so users quickly understand where to act: discover races, check results, and move toward registration.
Livraison
React/Tailwind front-end rebuild, cohesive visual system, and motion patterns focused on comprehension and editorial scalability.
L'enjeu
Express a polished sports brand without visual noise, keep mobile-first clarity, and use motion to reinforce the message rather than distract from it.
Clear paths to discover SPO, the race calendar and registration; UI aligned with the palette and card radius; a maintainable front-end foundation for evolving content and sections.
A running site must both inspire and inform: convey energy without sacrificing content clarity or perceived performance. Framing set the priorities—visual hierarchy, mobile-first layouts, motion in service of the message—before implementing a modern front-end layer.
Contrainte métier
À compléter — budget, délais, conformité ou capacité équipe.
Frictions utilisateurs
À compléter — friction parcours, lisibilité, confiance.
Tension produit
À compléter — priorisation, dette technique, mesure.
Le parti pris
The challenge
Bring together brand, storytelling and user journeys in one experience: controlled contrast, scannable blocks, and transitions that support reading without hurting accessibility or perceived weight.
The response
Front-end development with React and Tailwind to structure sections and keep responsive consistency; GSAP for the dynamic running feel. The palette (#2B3830, #41614C, #F9F9FF, white) and a 12px radius unify cards and buttons.
What changed
A showcase aligned with the SPO universe, ready to host new event content, with a clear stack for future iterations.
Chiffres et écrans
Les chiffres qui comptent
Technical performance
+20 pts
Measured progression from 80% to 100% on this indicator.
Avant80%
Après100%
Accessibility
+20 pts
Measured progression from 80% to 100% on this indicator.
Avant80%
Après100%
Technical quality
+19 pts
Measured progression from 77% to 96% on this indicator.
Avant77%
Après96%
Performance globale
99%
SCORE /100
Excellent
Moyenne des indicateurs apres optimisation
Impact et résultats
- Brand and readability. Typographic hierarchy and brand colours applied consistently across blocks and interactive states.
- Purposeful motion. GSAP used for feel without compromising page structure or immediate comprehension of calls to action.
- Maintainable foundation. React and Tailwind as the base to iterate on sections and adjust the site as communication needs evolve.
Avant / après : le contraste
The legacy interface exposed dense information first. The redesign introduces stronger visual hierarchy so intent and action become obvious earlier.
- Hero hierarchy is clearer, making the promise readable at first glance.
- Primary CTA ranking reduces hesitation between exploration and action.
- Section pacing is lighter to improve reading stability on mobile.
Sous le capot
Process & réutilisabilité
SPO follows a short-loop editorial cadence centered on reading clarity: each iteration starts from a user decision objective and returns to concrete hierarchy, interaction and maintainability choices.
Delivery cadence
Vision, screen, validation
Work is paced in short cycles so visible decisions are secured before hidden debt accumulates.
- Lots are sliced by user intent (discover, compare, act) rather than by isolated UI widgets.
- Design/content checkpoints happen at every milestone to keep promise and interface aligned.
- Trade-offs are prioritized on mobile readability and CTA comprehension speed.
Pattern reuse model
Sustainable editorial system
Reuse is treated as explicit composition rules, not as visual copy/paste.
- Standard section components are maintained with stable content contracts.
- Visual tokens (spacing, radius, contrast) are documented to keep cross-page consistency.
- Ready-to-reuse templates support upcoming race editions and event updates.
Quality and governance
Long-run stability
Each release is assessed on reading impact and ability to iterate without global rewrites.
- UX-oriented acceptance checklist covers readability, hierarchy and action priority.
- Visual regression controls are run before publish to avoid narrative rhythm breaks.
- Decisions are logged so future optimization cycles start faster.
Design system
Plus Jakarta Sans, Inter, Work Sans
Aa
Heading 1
Heading 2
Heading 3
Main Body
Link
Aperçu du site en ligne
La suite
Project learnings
- On event sites, decision clarity outperforms visual density.
- Useful motion supports reading rhythm and should never compete with core information.
- A lightweight component governance model drastically reduces future seasonal update cost.
Recommended next steps
- Track dedicated analytics events for “View races” and “Results” interactions.
- Run an A/B test on hero variants to improve progression to event pages.
- Standardize a publishing template for new races to reduce time-to-publish.