Olympique De Marseille
olympique de marseille
The digital ecosystem of an entire club
Nine months of a complete redesign as part of the club’s rebranding: UX audit, UI design for the om.fr website, more than 30 pages, a design system adopted by four external teams, a headless CMS built on Sanity, an API-first architecture, and the decommissioning of Drupal. In direct collaboration with the club’s IT department, from initial scoping through code review.
Five products : website, ticketing, e-shop, app, and member area, built on heterogeneous tech stacks
Six products, five technologies, one visual identity
—
A project delivered in partnership with the agency
Design system
The real challenge: creating a single source of truth between brand, design, and development, adopted by four teams we do not directly manage: the main website, the e-commerce agency, the ticketing team, and the app team. Foundations (tokens), a component library with variables and modes, Zeroheight documentation, and RGAA/WCAG compliance.
Five stacks that didn’t speak to one another. One system to bring them together.
As part of the redesign of om.fr, we implemented a fully decoupled headless architecture, built on Sanity CMS for editorial management and Vercel for front-end hosting.
Content and services are delivered through specialized APIs, including Stats Perform / Opta for enriched sports data and ReachFive for supporter identity and authentication management.
A CDN-first approach was implemented, combining static content generation with dynamic rendering whenever the latest news requires it.
This architecture ensures fast loading times and high resilience, while enabling the platform to absorb major traffic spikes related to matches, results, and club announcements.
The results
- 75% reduction in infrastructure costs, billed on a pay-as-you-go basis.
- 100/100 Speed Index score.
- Simple, autonomous administration for internal teams.
- Enhanced features, including live match coverage and real-time chat.
Expertise mobilized
End-to-end full-stack development
Complete ownership of the development process, including front-end integration of the design system and full-stack logic — API routes, CMS, and third-party integrations — from the architecture through to the final pixel.
Serverless architecture & migration
Design of a Next.js/Vercel architecture capable of handling the traffic of a professional football club while drastically reducing infrastructure costs.
Complex systems integrations
Reconnection of 8+ critical third-party services — ReachFive, StatsPerform, Dynamics, GetAccept, Freshdesk, and Splio — with automation of workflows that were previously handled manually.
Data migration engineering
Custom-built scripts to process 10 years of heterogeneous content without downtime, with temporary coexistence between the legacy and new stacks for services still used by third parties.
Real-time functionality in a serverless environment
Live chat and comments during matches: a specific technical challenge, as serverless architectures are not natively designed to maintain real-time connections.
Caching & performance strategy
A multi-level caching strategy — edge caching, ISR, and targeted revalidation — enabling content to be updated within seconds of publication without compromising performance scores.
SEO & traffic continuity
A comprehensive redirect plan and sitemap regeneration to preserve 10 years of organic search rankings throughout the migration.
- CREDITS
- Leroy Tremblot Sarah Chehat Nawfal Ndrissi