NZ Post 2022-2024
Elevating the Design System for Robust Performance
Credits
Among my design system experiences across multiple organisations, this transformation represented the most mature implementation phase. Through strategic initiatives and technical migrations, we established a more efficient and sustainable design system that serves as a single source of truth.
9.09%
Increased component editing efficiency
2x
More efficient development by simplifying component variants
83%
Less load in testing phase
Project details
NZ Post Digital Design System v3.1
Continuous Improvement over for 2 years
Team composition
Core Team:
Design System Supervisor (My Role)
1x Designer from Website
1x Content designer
2x UX Writers
My contributions
Facilitated weekly design discussions
Migrated design tool (Figma)
Migrated document platform (Supernova)
Created Component
Essential elements of a holistic design system
NZ Post has a holistic design system that truely is a system; governing design decisions for standardised patterns both internal and external product teams.
Design Tokens
UI Kit
Documentation
Migration from Sketch to Figma: Modernised workflow
This strategic shift enabled us to modernise our component library through streamlined process and improved tooling capabilities. The migration established foundations for enhanced collaboration.
Migration from Zero-height to Supernova: 69.4% cost reduction
The transition to Supernova resulted in a 69.4% reduction in operational costs. Before migration, I conducted comprehensive market research to identify the optimal design system management solution. The evaluation was based on these key criteria:
Feature Roadmap - Analysis of each candidate's planned development trajectory to ensure long-term viability
Implementation Challenges - Assessment of potential workarounds and features that could be phased out
Technical Integration - Leveraging my programming background to validate the feasibility of design token scalability and development library integration
Cost-effectiveness - Evaluation of subscription costs against projected benefits
From Zeroheight to Supernova
Strategic approaches
Established proactive communication channels
Implemented systematic documentation processes
Created centralised knowledge base"
Component editing performance: 9.09% efficiency gain
I optimised the workflow to align with designers' natural mental models for component editing. This improvement reduced average editing time per component from 22 to 20 seconds, achieving a 9.09% efficiency gain. The streamlined process significantly enhanced our daily operations, especially for teams managing large component libraries, leading to cumulative time savings across projects.
Architecture of button component variants and properties
Why this 9.09% is significant?
In a design system, hundreds of components designers do multiple edits per component and multiple designers repeats this editing performance everyday. Hence, this 9% efficiency gain could translate to substantial time savings across the team over time.
Also, clearly defined name of properties and structure will improve the designers experience in editing components.
Establish guidelines resulted 2x more efficient development
Having variety of component doesn't guarantee consistency in product design. Knowing how the component should be used in certain scenario is critical.
Removing size variation at breakpoints reduced development and testing time. 2x faster implementation and 1 simple UI testing.
Do
Their size determines the importance of buttons in the group.
Large size - Most Important:
Hero section and form field associated call-to-actions
Medium size - Default:
Majority of call-to-actions found in the content area
Small size - Ancillary:
Links with sub-body text and helper actions in tooltips
Do
When dealing with buttons of equal size, their hierarchy is established by their style, following this sequence:
Filled > Outlined > Text
Do
The button size remains consistent regardless of the breakpoints.
Example
Don't
Adjust the button size at breakpoints to maintain the proportion between the call-to-action (CTA) and text.
Tone of Voice guidelines
UX writing is also part of design system. I audited current copies and suggested improvements.
System messages
Results & Reflection
Component editing efficiency increased by 9.09%
Established centralised documentation channels
Created collaborative environment for system adoption
Streamlined workflow by reducing required tasks by 83%, from 6 tasks to a single action
In the Button component structure, I would set the Type variants as Primary, Secondary and Tertiary to explicitly show its usage.
