Aller au contenu
Cross Sud Ouest
Projet

Cross Sud Ouest

Année · Juillet 2027Événement sportif

Technos

En bref

Identité et lisibilitéAnimations pertinentes
Running
Motion
Gestion de projet
Rôle

Cadrage produit, développement front React/Tailwind/GSAP et pilotage ClickUp pour une vitrine événementielle lisible jusqu’au jour J.

Le terrain

Contexte

Site événementiel du Cross Sud Ouest : identité violet/lavande, parcours programme et inscriptions lisibles, animations fluides avec React, Tailwind et GSAP, pilotage livraison ClickUp. Périmètre recentré sur les parcours prioritaires et la lisibilité des contenus.

Mission

Offrir une vitrine de course immédiatement lisible (programme, infos pratiques, inscriptions) avec une identité forte et des transitions qui renforcent le propos, sans alourdir la maintenance ni la cadence pré-événement.

Livraison

Parcours clair pour découvrir l’édition, le programme et les inscriptions ; interface alignée sur la palette violet/lavande ; stack front maintenable et livraisons sécurisées dans ClickUp jusqu’au jour J.

L'enjeu

Offrir une vitrine de course immédiatement lisible (programme, infos pratiques, inscriptions) avec une identité forte et des transitions qui renforcent le propos, sans alourdir la maintenance ni la cadence pré-événement.

Parcours clair pour découvrir l’édition, le programme et les inscriptions ; interface alignée sur la palette violet/lavande ; stack front maintenable et livraisons sécurisées dans ClickUp jusqu’au jour J.

Un site de cross doit à la fois inspirer et informer : transmettre l’énergie de la course sans sacrifier la clarté du programme 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 pilotée dans ClickUp.

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 participant : contrastes maîtrisés, blocs programme/inscriptions 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 dynamisme de la course. La palette (#5756AF, #E0E1F9, #ECEDFF, blanc), Segoe UI et un radius md (6px) donnent le cadre visuel commun. ClickUp aligne priorisation, QA et releases.

Ce que ça change

Une vitrine alignée avec l’univers Cross Sud Ouest, prête à accueillir de nouvelles éditions, avec une stack front lisible et un pilotage livraison qui absorbe la pression pré-événement.

Chiffres et écrans

Les chiffres qui comptent

Performance technique

+20 pts

Progression mesurée de 78% à 98% sur cet indicateur.

Avant78%
Après98%

Accessibilité

+19 pts

Progression mesurée de 77% à 96% sur cet indicateur.

Avant77%
Après96%

Qualité technique

+19 pts

Progression mesurée de 74% à 93% sur cet indicateur.

Avant74%
Après93%

Performance globale

96%

SCORE /100

Excellent

Moyenne des indicateurs apres optimisation

Impact et résultats

  • Identité et lisibilité. Hiérarchie typographique Segoe UI et couleurs de marque appliquées de façon homogène sur les blocs, états interactifs et CTA.
  • Animations pertinentes. GSAP utilisé pour le ressenti sans compromettre la structure des pages ni la compréhension immédiate des appels à l’action.
  • Pilotage projet orienté livraison. ClickUp comme colonne vertébrale (priorisation, tickets, validations) pour sécuriser la cadence de publication dans un contexte événementiel.

Avant / après : le contraste

Le comparatif visuel de Cross Sud Ouest met en évidence une hiérarchie plus lisible, une interface plus stable sur mobile et une mise en avant plus nette des actions prioritaires.

  • Hiérarchie des blocs renforcée pour accélérer la compréhension dès la première vue.
  • CTA prioritaires repositionnés pour limiter les hésitations de navigation.
  • Rythme visuel allégé pour améliorer la lecture sur écrans mobiles.
Evolution de la homepage Cross Sud Ouest

Sous le capot

Process & réutilisabilité

La démarche Cross Sud Ouest combine un front React/Tailwind/GSAP maintenable et une cadence ClickUp pour tenir le rythme pré-événement.

Socle front événementiel

React, Tailwind, GSAP

Les sections critiques (programme, inscriptions, partenaires) sont composées pour rester lisibles et évolutives.

  • Blocs React réutilisables pour le programme par jour et les CTA inscriptions.
  • Tailwind pour aligner responsive, palette et radius sans dérive visuelle.
  • GSAP pour le rythme de lecture et les micro-interactions sans surcharge.

Design system léger

Segoe UI, violet/lavande, radius md

Un cadre visuel court (typographie, couleurs, radius) accélère les itérations sans alourdir la stack.

  • Segoe UI comme base typographique commune aux titres et UI.
  • Palette #5756AF / #E0E1F9 / #ECEDFF / blanc appliquée aux CTA et surfaces.
  • Radius 6px (md) pour boutons et composants interactifs.

Cadence événementielle pilotée

ClickUp en flux tendu

Le pilotage quotidien est orienté livraison effective et réduction du risque à l'approche de l'événement.

  • Sprints courts avec priorisation des blocages à impact participant immédiat.
  • Suivi des dépendances contenus/techniques pour éviter les retards cumulés.
  • Recette progressive des parcours essentiels pour absorber les pics de consultation.
Design system
Cross Sud Ouest logo

Segoe UI

Aa

Heading 1

Heading 2

Heading 3

Main Body

Link

Button
Button
Nous contacter

Aperçu du site en ligne

La suite

Enseignements projet

  • Un site événementiel performant repose sur une stack front claire (React, Tailwind, GSAP), pas uniquement sur l’habillage visuel.
  • Un design system court (typo, couleurs, radius) accélère les itérations sans freiner la livraison.
  • Le pilotage quotidien des arbitrages dans ClickUp limite les effets tunnel en phase pré-événement.

Prochaines étapes recommandées

  • Étendre les composants programme/inscriptions pour les prochaines éditions sans refonte.
  • Instrumenter les interactions programme/inscription pour affiner la priorisation des contenus.
  • Mettre en place une checklist de readiness hebdomadaire jusqu'au jour J.