Squiz Design System

Design System

User experience

User interface

ZeroHeight

The opportunity:

Unify the Squiz suite of products by designing and implementing a new design system.

The two biggest products in the Squiz product suite had vastly different approaches to their user experience and interface design.

The design system foundations included layouts, typography and language.

Colours were included in the design system foundations.

The challenge:

The platform was made up of five existing products, including both new and existing applications. Each product and solution had been built and maintained in isolation over many years, and each presented its own challenges in designing and adopting a single design system. As the product offering moved to SaaS and the existing products joined to become part of a single platform experience there was a growing need to ensure consistency of the user experience for users moving between the products. Any solution needed to consider the current state of existing products, the ability of the development team to refactor existing interfaces, and how new and existing experiences could co-exist.

The anatomy of the dropdown component. The anatomy labels elements of the component so that designers and engineers have a common language.

The specifications for a dropdown component.

A prototype showing how a menu should animate on a mobile device.

The approach:

A review of the design system landscape was performed.
Existing products were audited to determine their key interactions and UI patterns.
The design and engineering teams created a working group for the implementation of the design system, and assigned responsibilities.
The design system was documented in a dedicated site which included anatomy, specs, best practice and all variants of components within the system.
Ongoing updates to the design system were documented and communicated via Slack.

Accessibility guidelines in the design system.

New releases were annouced in Slack.

Features based on research:

Design system foundations including typography, colours, spacing, and the team's design principles.
Component documentation pages that provided examples of component usage, specs and common language for elements of the component.
A contribution model that ensures the ongoing usefulness and quality of the design system.

A collection of components from the Squiz Design System.

The outcome:

The design team and developers are enabled to move faster, not having to reinvent the wheel when they start a new project.
Customers receive a consistent experience across the Squiz platform.
Customers receive a consistent experience across the Squiz platform.
The Squiz Design System can be found at designsystem.squiz.net