Contexte
Sport Passion Organisation pilote plusieurs rendez-vous running autour du bois de Vincennes, avec des publics hétérogènes (coureurs réguliers, nouveaux inscrits, clubs).
Projet
Sport Passion Organisation
Année · 2026Web
Technos
En bref
Identité et lisibilitéAnimations pertinentes
Running
Web
Motion
Rôle
Cadrage produit et direction de l'architecture front pour transformer la vitrine running en parcours de décision lisible, robuste et durable.
Le terrain
Mission
Concevoir une vitrine plus lisible et plus crédible, capable d'orienter vite vers les actions décisives: découvrir les courses, consulter les résultats, s'inscrire.
Livraison
Refonte front React/Tailwind, système visuel cohérent, micro-interactions orientées compréhension et une base maintenable pour les prochaines saisons.
L'enjeu
Exprimer une identité sportive soignée sans surcharge visuelle, tout en gardant une lecture immédiate sur mobile et des transitions qui renforcent le propos plutôt que de le distraire.
Parcours clair pour découvrir SPO, le calendrier des courses et les inscriptions ; interface alignée sur la palette et le rayon de carte ; base front maintenable pour faire évoluer contenus et sections.
Un site running doit à la fois inspirer et informer : transmettre l’énergie du terrain sans sacrifier la clarté des contenus ni la performance perçue. Le cadrage a posé les priorités — hiérarchie visuelle, mobile d’abord, animations au service du message — avant d’implémenter une couche front moderne.
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
Le défi
Rassembler identité de marque, storytelling et parcours utilisateur : contrastes maîtrisés, blocs de contenu identifiables, et transitions qui accompagnent la lecture sans alourdir l’expérience ni l’accessibilité.
La réponse
Développement front avec React et Tailwind pour structurer les sections et garantir une cohérence responsive ; GSAP pour ancrer le côté dynamique du running. La palette (#2B3830, #41614C, #F9F9FF, blanc) et un radius de 12px donnent le cadre visuel commun aux cartes et boutons.
Ce que ça change
Une vitrine alignée avec l’univers SPO, prête à accueillir de nouveaux contenus événementiels, avec une stack front lisible pour les évolutions à venir.
Chiffres et écrans
Les chiffres qui comptent
Performance technique
+20 pts
Progression mesurée de 80% à 100% sur cet indicateur.
Avant80%
Après100%
Accessibilité
+20 pts
Progression mesurée de 80% à 100% sur cet indicateur.
Avant80%
Après100%
Qualité technique
+19 pts
Progression mesurée de 77% à 96% sur cet indicateur.
Avant77%
Après96%
Performance globale
99%
SCORE /100
Excellent
Moyenne des indicateurs apres optimisation
Impact et résultats
- Identité et lisibilité. Hiérarchie typographique et couleurs de marque appliquées de façon homogène sur les blocs et les états interactifs.
- Animations pertinentes. GSAP utilisé pour le ressenti sans compromettre la structure des pages ni la compréhension immédiate des appels à l’action.
- Socle technique maintenable. React et Tailwind comme base pour itérer sur les sections et ajuster le site au fil des besoins de communication.
Avant / après : le contraste
L'ancienne version privilégiait la densité d'information. La refonte clarifie la hiérarchie visuelle pour que les visiteurs identifient immédiatement où cliquer selon leur intention.
- Hiérarchie typographique renforcée sur le hero pour rendre la promesse lisible en un coup d'oeil.
- CTA principaux mieux priorisés pour réduire les hésitations entre découverte et action.
- Structure de section plus respirante afin de stabiliser la lecture sur mobile.
Sous le capot
Process & réutilisabilité
L'approche SPO est conçue comme une boucle courte orientée lisibilité : chaque itération part d'un objectif de lecture utilisateur, puis revient sur des décisions concrètes de hiérarchie, d'interaction et de maintenabilité.
Cadence de delivery
Vision, ecran, validation
Le rythme est piloté en séquences courtes pour sécuriser les décisions visibles avant accumulation de dette.
- Découpage des lots par intentions utilisateur (découvrir, comparer, agir) plutôt que par simple composants.
- Points de validation design/contenu à chaque jalon pour éviter les écarts entre promesse et interface.
- Arbitrages priorisés sur lisibilité mobile et vitesse de compréhension des CTA clés.
Réutilisation des patterns
Système éditorial durable
La réutilisation n'est pas un copier-coller visuel: elle impose des règles de composition explicites.
- Composants de section standardisés avec contrats de contenu stables.
- Tokens visuels documentés (espaces, rayons, contrastes) pour garder une cohérence inter-pages.
- Gabarits prêts à réemploi pour les prochaines éditions de courses et pages événementielles.
Qualité et gouvernance
Stabilité dans le temps
Chaque release est évaluée sur l'impact de lecture et la capacité à itérer sans réécriture globale.
- Checklist de recette orientée UX (lisibilité, hiérarchie, priorisation des actions).
- Contrôle des régressions visuelles avant publication pour éviter les ruptures de rythme narratif.
- Capitalisation des décisions dans la base projet pour accélérer les futurs cycles d'optimisation.
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
Enseignements projet
- Sur un site événementiel, la clarté des décisions utilisateur prime sur la richesse visuelle brute.
- Une animation utile sert le rythme de lecture; elle ne doit jamais concurrencer l'information clé.
- Une gouvernance de composants simple réduit fortement le coût des futures évolutions saisonnières.
Prochaines étapes recommandées
- Brancher un suivi analytique dédié aux actions “Voir les courses” et “Résultats”.
- Tester A/B deux variantes de hero pour optimiser la progression vers les pages événements.
- Industrialiser un gabarit éditorial pour les nouvelles courses afin de réduire le time-to-publish.