Creating a quantity selector design system component

How I contributed to the Woolworths Group Design System, supporting designers and developers.

Overview

Design system crowdsourcing pilot

The design system team at WooliesX were looking to crowdsource the component build and documentation process to increase the rate of releases. I volunteered with another designer to contribute the quantity selector component.

These components would be used across Woolworths Group banners - Woolworths, Everyday and Big W - across 53 teams consisting of designers and developers.

The process

1. Audit existing best practices and component instances across Woolworths Group banners

2. Synthesis of findings to inform what is required for component build and documentation

3. Component build in Figma following any necessary ideation and battle testing

4. Documentation of component usage, anatomy, behaviour, and content guidelines

5. Handover to developers to build in Storybook

Audit

Types of quantity selectors

To form an understanding of the component, I researched best practices and existing types of quantity selectors in other design systems.

Woolworths, Everyday & Big W

To ensure the component could be used across banners, I conducted an audit of all the existing quantity selectors across web, iOS and Android.

Synthesis

Current state

Following the audit, I created a quick matrix of all the quantity selector components used across the banners and noted any discrepancies or considerations when creating the component.

Component build

Using Figma components

After ideating to reach a banner-agnostic design and sharing with other designers for feedback, I created each variant and state of the quantity selector. It was battle tested to ensure all combinations worked within different designs.

Documentation

Writing up guidelines

Using the design system template, I drafted up content on how to use the quantity selector component. As part of this process, I worked closely with the design system team to ensure the tone was consistent with other component documentation.