Creating a lean design system for The Works
I developed a comprehensive design framework for creating email campaigns. My goal was to keep things simple, accessible and easy to use.
A complex tool for a simple job
The team had been using Adobe InDesign to create email assets, a workflow inherited from producing point-of-sale and printed materials. At first, this seemed manageable, but after spending time building campaigns, it became clear that the tool wasn’t best suited to the task. The process was slow, prone to inconsistencies, and made it difficult to visualise the final output.
To improve efficiency and consistency, I proposed moving to Figma—a platform better suited to digital design, with features like shared style guides and component libraries. This shift would lay the groundwork for a more streamlined, scalable design process.
Layouts galore
The first step in creating a framework was conducting a thorough audit of existing themes and components. I captured and catalogued screenshots from previous email campaigns, organising them into clear categories: headers, navigation, footers, heroes, cards, highlights, buttons, layouts, and titles. I also documented variations in text styles, colours, and other key design elements.
This categorisation helped the team visualise the current landscape - what worked, what didn’t, and what could be removed or consolidated. Together, we opted for a minimalist but flexible approach. The goal wasn’t to restrict creativity, but to create a smart, versatile component set that could serve a wide range of marketing needs.
By removing redundant layouts and merging similar ones, we began shaping a streamlined, reusable system, reducing the frustrations surrounding “same same but different components” and giving designers a single source of truth.
Defining global style guidelines
With the audit complete, the next step was to establish the solid foundations. I referenced the brand team’s style guidelines and cross-checked them against the audit findings to ensure alignment.
Given the dynamic nature of email themes, the global styles needed to be clear, flexible, and easy to apply. I focused on defining the core elements: colour palette, typography, spacing, and borders, keeping the system simple but robust enough to support evolving campaign needs.
Creating a component library made to flex
The audit provided the brief, and the style guidelines defined the rules. With these in hand, I set out to build a library of reusable components.
Unlike traditional UI elements, the system needed to support visually rich content blocks that relied heavily on complex typography and graphic treatments. This meant designing components that could accommodate both live text and images seamlessly.
I adopted an accessibility-first approach from the start, anticipating upcoming legislation. Wherever possible, I proposed designs that prioritised live text, reducing production effort while maintaining visual impact and effectiveness.
How can I make this an end-to-end solution?
Reflecting on the need to optimise the entire workflow, I realised that building the emails within the Ometria platform would be just as critical as their visual design. To ensure a seamless transition from design to development, I paused work in Figma and took time to explore the platform and its capabilities. This step was key in enabling me to create components that were not only visually consistent and on-brand but also practical and build-ready.
To bridge the gap between design and implementation, I could embed tokens, CSS classes, and code snippets directly into the Figma components, giving designers clear guidance on how to build their designs effectively within the Ometria environment.