What I did

• Audit: inventory of live components and patterns. Identified duplicates and gaps.

• Defined foundations & components: page layouts, navigation, cards, banners, content hierarchy, designed as reusable, responsive variants.

• Built in Figma: created structured libraries with clear naming, states, and usage notes.

• Documented for humans: wrote practical guidelines and examples in a documentation tool (e.g., Supernova) so designers and developers could use.

• Partnered with devs: aligned on technical constraints and mapped designs to code equivalents on the website.

• Drove adoption: ran workshops, playbacks, and office hours to support roll-out across squads.

Key design decisions

• Design for variants: components built with flexible props (content density, media, CTAs) to cover real use cases without re-creating patterns.

• Clarity over decoration: guidelines focus on content hierarchy, states, and behaviour.

• Document where it lives: every pattern includes when/why/how, examples, and do/don’t, so teams can self-serve.

• Ship while standardising: supported active product work while gradually retiring legacy components.

Constraints I navigated

• Legacy patterns: consolidated without a full rebuild.

• Many stakeholders: aligned brand, content, product, and engineering on standards.

• Time pressure: delivered value incrementally so squads could adopt without slowing existing roadmaps.