Scalable design system for a complex website

Yozu Creative were engaged by creative brand agency, 1HQ, to help their client IGD with redesigning their website to bring it visually, tonally, and verbally in line with their newly created brand identity and guidelines.

Our challenge was to — in partnership with 1HQ — created visually consistent design system that truely embodied the new IGD brand and could evolve and scale with the company over time.

Our aim was to implement a complete design system rather than just delivering page templates, as we knew that providing their internal development team with a full toolkit — including design language, components, interactions, and layouts — would enable them to streamline development whilst ensuring consistency.

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

We delivered the entire design system and associated elements and assets 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