The design system behind FM's rebrand.
Introduction
When I joined FM in 2023, the public web wasn't one site. It was 103 across seven brands. The work wasn't to redesign them. It was to unify them.
There was no foundation to build on: no shared marketing components, no patterns, no variables. Bringing 103 properties under one brand meant building the system from nothing — and fast. The rebrand had to ship four months after the new brand identity arrived and existing content had to carry over.
The challenge
Pages and experiences were never going to be built by designers. Once the system shipped, every page across the estate would be assembled by web technologists on three teams working in Sitecore. They'd choose layouts and place sections with no designer in the room.
That changed who the system was really for. Insurance brokers and risk managers would read the pages, but the web technologists would live in the system every day.
If the system couldn't survive the web technologists, it couldn't survive.
Early decisions
The first decisions were structural: separate what carried the brand from what built the pages. Foundational elements and atomic components would be sealed inside the system. Web technologists would never touch them. Sections and their variants would be the working surface for web technologists: pre-composed and brand-safe. If every page was going to be assembled without a designer in the room, the line between those two layers was the architecture's most important decision. Building governance directly into the system didn't eliminate the need for documentation and guidelines, but it carried the weight.
These intentional constraints also needed to be balanced with flexibility. Color, type, and spacing variables were generally scoped directly within the CSS, with no rendering parameters, sealing those layers from web technologists. But sections needed to offer small sets of chosen controls that crossed this boundary deliberately. For instance, top and bottom sectional spacing needed to be available as rendering parameters in order for web technologists to tighten sections against each other.
The system also needed to account for misconfiguration, because it was inevitable at this scale. Sections needed to be built to degrade gracefully when configured wrong. For example, a 75% Storyblock section with no image configured would need to fall back to its full-width, no-image variation rather than ship broken.
Foundations
The new brand identity was delivered by an external agency in February 2024, and my work translating it into a system that could ship began.
Concurrently, I analyzed the existing experiences within the FM ecosystem and created an inventory of components and sections that would be on the critical path to rebrand. This audit not only informed the token library but became the roadmap for the next phases of work.
Components
The component set, from button atoms to listing-card molecules, drew on global semantic tokens where a shared role fit and component-specific semantic tokens where it didn't.
Components were restricted to engineering and inaccessible to web technologists, giving engineers control of the layer while keeping the system brand-safe no matter who assembled the pages.
Sections
Sections were the working surface web technologists composed with. In Sitecore, building a section took two separate steps for technologists:
- Set a section's structure and presentation.
- Configure its content.
Therefore, design system sections were split into two parallel layers:
- Parent properties that handle structure and presentation.
- Child properties that handle content.
The flagship section was the Storyblock. FM's estate leans content-heavy, so the system needed sections versatile enough to handle a wide range of layouts and content:
Each section was built maximum-first: the default carried every element and every configuration scaled down from that maximum, so removing content landed on a designed state rather than a broken one. Guidelines then defined the approved content combinations so the system carried structural and brand safety while documentation carried composition judgement.
Outcome
The system shipped in June 2024, four months after the brand identity landed. The consolidation held: 103 properties across seven brands unified under one design language, composed and published through Sitecore.
Lessons learned
1. Make ownership an early conversation
Ownership was fractured across the estate. Some stakeholders owned verticals: mining, healthcare, education, retail. Others owned initiatives: a report, a policy, a program. Ownership ran along two axes. Strategy, feedback, and final approval processes become ambiguous when RACI goes undefined. This produces one of two failure modes, design by proxy or design by committee and sometimes both. The public experience drifts toward optimizing for internal audiences instead of the people it exists to serve.
The room should always be big enough for everyone to be heard. Sometimes the best ideas come from people who don't hold the job title. However, a room where everyone is heard still needs someone who decides. Without that, you get consensus instead of intentional decision-making. The lesson I carry forward? Ask for clarity up front. Who holds strategy, content, and the experience? Does the final say live in one place? The answers aren't always clean, but knowing where the gaps are beats discovering them halfway through.
2. A design system is a product,
not a project.
The four-month clock made the approach tactical by necessity: scope to the rebrand, ship the MVP and refine after. I knew the refinement loop mattered and advocated early to scope it. It never got its own place on the roadmap and the reason is an honest one: new work is visible and shows immediate value, while refinement shows value quietly. The lesson I carry forward? Advocacy alone doesn't move a roadmap. Give refinement the same shape as delivery: scope it as shippable work, tie it to measures stakeholders already track and put it on the roadmap early.
Architected the FM Marketing Design System, October 2023 to launch, June 2024. Maintained and extended it after launch.
Next project
Contact Redesign (453% Lift) →