Olympique De Marseille
Olympique de Marseille
L'écosystème digital de tout un club
Neuf mois de refonte complète dans le cadre du rebranding du club : audit UX, conception UI du site om.fr, plus de 30 pages, design system adopté par quatre équipes externes, CMS headless sur Sanity, architecture API-first, décommissionnement du Drupal. En collaboration directe avec la DSI du club, du cadrage à la revue de code.
Cinq produits : site, billetterie, e-shop, app, espace membre, sur des stacks hétérogènes.
Six produits, cinq technologies, une seule identité à l'écran.
—
Un projet réalisé en partenariat avec l’agence
Design system
Le vrai enjeu : une source de vérité unique entre marque, design et développement, adoptée par quatre équipes qu'on ne pilote pas — le site principal, l'agence e-commerce, la billetterie et l'équipe app. Fondations (tokens), bibliothèque de composants avec variables et modes, documentation Zeroheight, conformité RGAA/WCAG.
Cinq stacks qui ne se parlaient pas. Un système pour les réconcilier.
Dans le cadre de cette refonte du site om.fr, nous avons mis en place une architecture headless entièrement découplée, reposant sur Sanity CMS pour la gestion éditoriale et Vercel pour l’hébergement du front-end.
Les contenus et services transitent par des API spécialisées, notamment Stats Perform / Opta pour les données sportives enrichies et ReachFive pour la gestion de l’identité et de l’authentification des supporters.
Une approche CDN-first a été mise en place, combinant génération statique des contenus et rendus dynamiques lorsque l’actualité l’exige.
Cette architecture garantit des temps de chargement rapides et une forte résilience, tout en permettant à la plateforme d’absorber les importants pics de fréquentation liés aux matchs, aux résultats et aux annonces du club.
Les résultats
- Une diminution de 75% de coûts d’infrastructure, facturée à l'usage.
- 100/100 en Speed Index.
- Une administration simple et autonome pour les équipes.
- Des fonctionnalités augmentées avec Live match & chat en temps réel.
Les expertises mobilisées
Développement full-stack de bout en bout
Prise en charge complète des développements, intégration front-end du design system et logique full-stack (API routes, CMS, intégrations tierces) de l'architecture au dernier pixel.
Architecture & migration serverless
Conception d'une architecture Next.js/Vercel capable d'absorber le trafic d'un club de football professionnel, tout en réduisant drastiquement les coûts d'infra.
Intégrations systèmes complexes
Reconnexion de 8+ services tiers critiques (ReachFive, StatsPerform, Dynamics, GetAccept, Freshdesk, Splio), avec automatisation de flux auparavant manuels.
Ingénierie de migration de données
Scripts sur-mesure pour traiter 10 ans de contenus hétérogènes sans downtime, avec cohabitation temporaire entre legacy et nouvelle stack pour les services encore utilisés par des tiers.
Temps réel en environnement serverless
Chat et commentaires live pendant les matchs : un défi technique particulier, le serverless n'étant pas nativement conçu pour la persistance de connexions temps réel.
Stratégie de cache & performance
Cache multi-niveaux (edge, ISR, revalidation ciblée) pour un contenu à jour en quelques secondes après publication, sans compromettre le score de performance.
SEO & continuité de trafic
Plan de redirection exhaustif et régénération des sitemaps pour préserver 10 ans de référencement organique durant la migration.
- CREDITS
- Leroy Tremblot Sarah Norrsken Nawfal Ndrissi