Developing a dynamic library of reusable components that adhere to strict usability and accessibility standards.

Client

Bunnings
2020

Brief

Creating Bunnings' design system to ensure consistent and scalable design practices.

Contribution

User  Experience – User Interface – Research
Documentation – Accessibility – Project Management

Bunnings DS 1.0.0

By prioritizing collaboration across disciplines, improving our tools, and creating a unified system, we were able to tackle more meaningful problems with greater efficiency. This approach also ensured consistency in the Bunnings brand across all touchpoints and provided a reliable source of truth for the entire team.

Audit

Before diving into the design system, we conducted a site-wide audit to identify inconsistencies, accessibility issues, and permutations, which required some spreadsheet time.

Design

After completing the audit, we began compiling all the consistent components and patterns into a master file, adhering to Atomic Design principles in collaboration with our development teams. Collaboration with the development teams was crucial at this stage as they worked on a unified code base while we established a unified master file as our source of truth for the design system.

Documentation

We then created a comprehensive design system guide that includes all other aspects of the system, such as visual style, UI components, variants, accessibility guidelines, and implementation. This guide serves as a reference for anyone working on Bunnings' digital products and ensures that the system is easy to use and consistent across all touchpoints.

Component Repository

We developed components and stored them in Storybook, making them easily accessible for the team. Storybook enabled us to build interfaces with speed and consistency, while also serving as a platform for conducting design and development quality assurance before deployment.
 

Repeat

Developing and maintaining a design system is not a straightforward task but more a mindset. After the initial launch, we refined our internal procedures to ensure ongoing enhancements and productivity. This approach enabled us to improve the design system while handling large-scale projects continuously.