My Framer Site

Multi-brand

Design System for LIONS

Multi-brand Design System for LIONS

Multi-brand Design System for LIONS

Multi-brand

Design System for LIONS

Strategy and execution for LIONS white label front-end infrastructure.

Company

LIONS / Informa

Events

canneslions.com

Subscriptions

Tools

Storybook

Builder.io

Figma

Since 2019 i've been helping LIONS with their in-house Design System, designed to support distinct visual identities while sharing a common codebase and UX logic.

In 2024 I was tasked to head up the most ambitious project for the Design System since it's inception:
reworking it for the next 5 years, catering for LIONS subscription sites and AI initiatives.

1+ components and counting

across LIONS Events and Subscriptions divisions

1+ components and counting

across LIONS Events and Subscriptions divisions

1+ components and counting

across LIONS Events and Subscriptions divisions

1+ components and counting

across LIONS Events and Subscriptions divisions

Audit and alignment

We kicked off by documenting all existing components and auditing the new site requirements.

Creating a single source of truth that spoke to the status of our components, identify gaps, link to external design and documentation files, and share with wider teams.

Component audit and alignment

Users' home and core app screens

Users' home and core app screens

Users' home and core app screens

Multi-brand theming

I moved us away from rigid page templates to a tokenized, atomic design structure.
Theming: We utilized semantic design tokens (via Figma Variables) to allow distinct brands (e.g., the bold, editorial look of Contagious vs. the data-dense utility of WARC) to exist on the same underlying components without code duplication.

Typography styling

Colour tokens

Icon design

Figma UI Library

The goal was not to make every brand look identical, but to create a shared foundation that would allow for individual brand expression while ensuring systemic consistency. ONE Lions

Full wireframes and flows

Delivery of the extensive user flows and wireframes for developer handoff.

Tabbed controls

Delivery of the extensive user flows and wireframes for developer handoff.

Motion exploration for booking promo
utilising hand painted illustration

Patterns & Layouts

Brochure website
& booking

I lead the design and experience across web, bringing the brand to life across the booking process, In collaboration with hospitality experts UMI Digital.

Capturing The Other House’s unique hospitality concept and brand and expressing it with a custom Wordpress site.

Global NavBar component / Utility options

LIONS Custom video player

LIONS Custom video player

Flexibility

Guided by the view that the app should feel like a crafted, physical remote

Adoption

To help drive adoption, I created ONE LIONS,
shared across content, brand, marketing, commercial, and product teams.

With the relaunch of the sites, came a new CMS, so we used this opportunity to package everything tother and in one place.

Governance: I established the contribution model, ensuring that the system was a living product, not a static library.

Accessibility: Baking WCAG 2.1 compliance into the core components to ensure inclusivity across the portfolio.

Component documentation listing page

Main landing page