WARHAMMER DESIGN SYSTEM
Warhammer (also known as Games Workshop) is a manufacturer of miniature wargames, makes the best fantasy miniatures in the world, and creates rich universes for them to inhabit.
BACKGROUND
In this case study I’ll share with you my experience of developing a new design system for Warhammer. The team built processes, introduced new tools for work, and a new design system from the foundation up.
WHAT IS A DESIGN SYSTEM?
A design system is a systematic approach to product development complete with guidelines, components and code. It is a single source of truth for teams that simplifies the product creation, testing, and development, and ensures consistency across different pages and channels.
WHY A NEW DESIGN SYSTEM?
Games Workshop / Warhammer lacked a company Brand Guide or Style Guide. Any form of design style documentation was fragmentary, lacked consistency and outdated. Additionally, any form of documentation left much open to interpretation. As a result, our design and engineering teams lacked a shared foundation around process, design language, guidelines and UI pattern libraries. This created inefficiencies for teams and inconsistencies within our product.
By creating an updated centralized design system, we aimed to:
Align teams by giving them a more structured and guided way to design and build products.
Speed up our design and development process: with ready-made library and patterns teams could create and test layouts much faster.
Improve brand perception through consistent experiences that work for everyone and allow users to accomplish their goals
DESIGN EXPLORATION, DOCUMENTATION & NAMING
We first focused on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc. and then moved onto more complex blocks and pieces (molecules, organisms, templates, pages). We created components from scratch as this was the first time Games Workshop had done something to this scale in Figma.
Each component was designed with accessibility in mind. We strived to comply with WCAG AA standards.
We created detailed documentation that supported every aspect of the design system, was organized, consistent, and easy to use.
To ensure everyone was on the same page and speaking the same language, we aligned on consistent, clear naming conventions between design and code, be it font styles, colors, spacing, icons, etc.
Company:
Warhammer
My Role & Responsibilities:
Creative Direction, Brand Strategy, UI & UX Lead
Team Credits:
Leo Thornton
Dmitri Paskevetj
Adam Bee