The design system for New Zealand government agencies

All-of-Government Services Delivery built an alpha design system to support NZ government agencies and the work their designers, developers and content teams do — whether they're prototyping, designing, developing or writing content for the web.

The alpha phase was the first phase of testing this design system.

The New Zealand Government Design System included:

• reusable pattern libraries
• accessible, usable, well-tested user interface (UI) components
• documentation and style guides on how and when to use each part — and when not to use them — to make building digital products and services as easy as possible.

NZ Government Design System (alpha phase) — Digital.govt.nz

The benefits

The design system was anticipated to:

• help to deliver a consistent experience for all users
• include WCAG 2.1 usability and accessibility standards
• make prototyping, designing and developing faster and more efficient, freeing up more time to focus on the most important problems
• help with flexibility and efficiency
• support numerous web frameworks.

Some of the anticipated benefits were role-related.

Benefits for designers

• The design system provided elements and components, think Lego® blocks, to design and assemble pages with greater speed and consistency.
• The components had accessibility and usability baked into them.

Benefits for developers

The design system provided standard code examples in HTML and CSS.

To make it easier to use the components in the framework that developers use for their work, the system supported other web frameworks such as Silverstripe, React, Vue, and Mustache.

Benefits for content designers and web producers

The design system also helped with content creation by providing best-practice guidance on a wide range of:

• web components — when to use them and how they work
• user flow patterns.