IGD

Creating an atomic design system for IGD to better support their brand story & improve their digital experience.

UI DESIGN / DESIGN SYSTEM


As the Chief Creative Officer at Yozu Creative, I led the IGD website redesign, in collaboration with the creative brand agency, 1HQ. Our goal was to align the website visually, tonally, and verbally with IGD’s newly created brand identity and guidelines.

The challenge was to develop a visually consistent design system that truly embodied the new IGD brand and could evolve and scale with the company over time. Partnering closely with 1HQ, we aimed to create a comprehensive design system rather than just delivering page templates.

We focused on implementing a complete design toolkit for IGD’s internal development team. This toolkit included the design language, components, interactions, and layouts necessary to streamline development while ensuring consistency across all aspects of the website.

Igd Design System

Overview of some of the elements and components designed for IGD.

The Approach

We approached the design of the entire project using ‘Atomic Design’ which is a methodology that is composed of five distinct levels that work together to create interface design systems in a deliberate and hierarchical manner.

Atomic Design is not a linear process, but rather a mental model that allows us to view and consider our interfaces as both an individual and a collection of all elements at the same time.

The five levels of atomic design are:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages
Atomic Design Principles

Breakdown of Atomic Design elements.

Outcome

The entire design system and associated elements and assets we delivered over a 6 week period — delivering both on time, and on budget — allowing the IGD internal development team to begin their implementation.

We’re been hugely impressed with the working relationship we’ve had with 1HQ & Yozu Creative, and with the speed and quality of the work you’ve done for us. The website’s design – delivered on budget and on time (to the day) – is a significant milestone for us within these transformational times for the business.  So, on behalf of everyone here, thank you.  Your creativity, technical expertise, commitment, care and energy are all hugely appreciated.

Marcus Flowerdew-Clarke, Head of Design, IGD