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 from receiving the new brand identity, implemented within Sitecore, with existing content carried forward.
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 across three teams working in Sitecore, choosing layouts and placing 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, and if it couldn't survive them, 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. 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 editorial judgment.
Outcome
The system shipped in June 2024, four months after the brand identity landed. The consolidation held: 103 properties across seven brands became three destinations, all resolving through 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 lesson I carry forward? Ask for clarity up front. Who holds strategy, content, and the experience? Does the final say live in one place? Accountability negotiated stakeholder by stakeholder isn't accountability. It can't be self-appointed either. So settle those questions before the work begins.
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.