MAG — Website Renewal
One component library across the websites for three airports, built so a designer could pick a layout and swap in what they needed, and so a brand change could be made in tokens rather than in components.
Manchester Airports Group runs the websites for Manchester, East Midlands and London Stansted. The estate had not been architecturally updated since 2017, and the programme to renew it ran across all three brands at once. Three sites, three identities, and one team expected to build and maintain them without producing three separate front ends.
I worked on all three airports. My part was the component library and how it was mapped: components other designers could assemble from rather than rebuild, and a token structure that let the same components carry a different brand. The programme itself was led by MAG's Head of UX, who set the strategy and the research programme.
- Built the components and mapped them to layout types in Figma, so a designer could choose a layout and swap in the component they needed instead of rebuilding it each time.
- That is the part that changed how the team worked. Designers assembled from the library rather than copying out of it.
- London Stansted uses a different palette from its sister airports. I was involved in mapping the tokens so the same components could carry it.
- That was tested mid-programme, when Stansted announced a brand overhaul. I worked through it with the Head of UX, mapping the new brand into the existing components rather than rebuilding them, and built an extra header banner component as part of that work.
- Pixel-perfect design review against what had been built, so the system held together between Figma and production.
- Supported UAT before release.
My time at MAG ran to September 2025. Stansted launched shortly after I left, with the work complete, so the figures below are the programme's rather than mine, and are as reported by MAG's Head of UX:
- Usability improved across all three sites: each scored 60 out of 100 on the System Usability Scale before the renewal, and 80 or above after it.
- More than half the legacy pages removed, by replacing custom-built pages with shared components.
- Grade A performance scores across the three sites.
- A brand overhaul absorbed mid-programme without stalling design or development, which is what the tokens were for.