Emanuele Ceccherini
Milano Cortina 2026 — Official website
The digital home of the Winter Olympics
The problem
With less than two years to go before the opening ceremony, the 2026 Winter Olympics had no official digital platform. Athletes, fans, and tourists from across Europe needed a single destination — somewhere to discover events, find venues, follow sports, and purchase tickets. Nothing existed.
The solution
Build the official website from scratch — turning Fondazione's wireframes and brand guidelines into a production-grade UI system for a global audience. Six sections, three breakpoints, ten languages, WCAG 2.2 AA compliant.
From brief to live in seven months
Fondazione provided wireframes, brand guidelines, and content direction. Our role was to translate those into a responsive, accessible, production-ready UI — component by component, breakpoint by breakpoint. Seven months, zero existing product, two institutional clients, one external dev team.
Brief with Fondazione Olimpica
We kicked off directly with Fondazione's Art Director and Marketing & Communication Director. Alignment on site structure, tone, and priorities happened before any pixel was drawn. With institutional clients, getting the brief right is non-negotiable — misaligned assumptions compound fast at this scale.
Wireframes → UI system
Fondazione defined the structure. We brought the experience — visual language, component architecture, interaction states, spacing system. Every wireframe screen became a set of reusable components with documented variants, so the same design logic could scale across six sections without drifting.
Development support & design QA
I stayed embedded through development — answering spec questions, resolving edge cases in real time, and running design QA sessions that compared the live build against Figma frame-by-frame. At this scale, QA isn't optional — it's where handoff gaps surface, and catching them late is expensive.
Built for everyone, by design
The Olympics are for everyone — and that's not a tagline, it's a legal and ethical requirement. The 2026 Games included the Paralympic Winter Games. The website had to work for users with a wide range of disabilities, across 100+ countries, under both Italian and European digital accessibility law.
WCAG 2.2 Level AA
We targeted WCAG 2.2 AA — the most current accessibility standard, and one that goes beyond what most websites achieve. Every component had to pass before it entered the shared library.
What this meant in practice
Accessibility wasn't a checklist at the end — it was a constraint at the component level. Three areas shaped the most decisions:
Colour contrast
Every text, icon, and interactive element was tested against the 4.5:1 ratio for normal text and 3:1 for large text. Background combinations that failed were escalated and renegotiated with Fondazione.
Typography at all sizes
Minimum font sizes were enforced across all three breakpoints. On mobile especially, where Olympic branding pushed toward large display type, readability of body text and UI labels had to hold at the smallest viewport.
Keyboard navigation
I personally ran the full site navigation using keyboard only — testing tab order, focus state visibility, escape key behaviour, and all interactive form flows. Focus states were designed as part of the component spec, not added as an afterthought.
Regulatory context
Beyond WCAG, the site had to comply with Italian Legislative Decree No. 82/2022 — the Italian Accessibility Decree — and EN 301 549, the harmonised European standard for digital accessibility. Accessibility was a legal requirement, not a best-practice recommendation. That changes how you argue for it internally.
Six sections, three breakpoints, ten languages
Scale changes the nature of design problems. Every decision — a spacing unit, a component state, a text style — gets multiplied across contexts. What looks contained in a single frame becomes a maintenance problem at volume.
Translation as a design constraint
Supporting ten languages meant translation wasn't a post-process. German strings run 40% longer than Italian; UI components that looked balanced in Italian collapsed in German. We learned to design for the longest string first — treating translation as a layout stress test from day one, not a handoff problem at the end.
Responsive at every breakpoint
Each section was designed at desktop, tablet, and mobile simultaneously — not adapted after the fact. The ticketing experience is a good example: same information architecture, same component logic, different density and layout priorities at each breakpoint.
Ticketing — desktop · tablet · mobile
Venues & map
The venue and interactive map sections required the most adaptation across breakpoints — an experience designed around spatial exploration on desktop becomes a vertical list with map toggle on mobile.
Venues & map — desktop · tablet · mobile
UI kit as shared language
With five designers working in parallel and an external dev team, a UI kit wasn't a nice-to-have — it was the only thing keeping the product coherent. Every component was documented with variants, states, and spacing tokens. The kit also became the primary handoff artefact: developers built from it directly, reducing the translation layer between design intent and shipped output.
Institutional clients move differently
Fondazione had brand guidelines with Olympic-level rigidity, approval chains longer than any product team, and stakeholders whose primary concern was institutional communication — not conversion funnels. Learning to navigate that without compromising UX quality was one of the sharpest skills this project developed. You present differently, frame trade-offs differently, and choose your battles more carefully.
What this project built in me
Institutional ≠ product
Product teams optimise for metrics. Institutions protect brand and reputation first. Framing design decisions in terms of what protects and elevates the brand — not just what converts — is a different kind of design thinking.
Design for the longest string
Multilingual design is layout design. German strings run 40% longer than Italian — what fits in one locale collapses in another. Building for translation from the first wireframe saves painful retrofits later.
Accessibility is a design constraint, not a checklist
WCAG compliance at Olympic scale means every component decision has accessibility implications. Catching failures at the component level costs nothing; catching them in the live build costs everything.