WorkSafe Victoria · 2023–2024
WorkSafe Design System
Modernising a government-scale component library from a fragmented, legacy-heavy system to a living Figma design framework — achieving a 40% reduction in design iteration time and eliminating legacy technical debt across a government-scale platform.
Role
UI/UX & Product Designer
Timeline
2023–2024
Tools
Figma · Auto-Layout v5 · Storybook · Design Tokens · Component Variants
Context
The Platform
WorkSafe Victoria is the state's primary OHS regulator and workers' compensation body. The design system underpins two major digital products serving employers, workers, and the broader Victorian community.
worksafe.vic.gov.au
Official online resource and digital service platform for WorkSafe Victoria — the primary body responsible for occupational health and safety (OHS) and workers' compensation insurance in Victoria, Australia.
myWorkSafe Portal
WorkSafe Victoria's main online service hub for fast, convenient digital management — serving both individuals and organisations across licensing, claims management, and business interactions.
Storybook Component Library
An open-source environment used to build, document, and test UI components in isolation — serving as the live design system reference for the worksafe.vic.gov.au platform.
My Role
Embedded Designer
Over six years at WorkSafe Victoria, I worked across the Design Practice — conducting user research, designing end-to-end product experiences, and contributing directly to the design system and component libraries.
Champion the user experience to create effective and enjoyable digital products
Plan and conduct user research and interviews to uncover user needs
Create and test low and high-fidelity prototypes to validate solutions
Perform heuristic analysis and usability and accessibility reviews
Actively contribute to and maintain the WorkSafe Design System
Create scalable, consistent design libraries to improve developer workflow
Ensure quality assurance to align development work with the design vision
Collaborate with product owners, BAs, developers, and testers in agile sprints
The Challenge
Legacy Rigidity at Scale
The existing WSV Figma library was a static "library of parts" — functional but brittle. As the platform grew across multiple product teams, the cracks became critical.
Manual Effort & Rigid Components
Legacy components were built using static frames and manual layer management. Every text update required manual resizing — a significant drag on velocity.
Inconsistency Across Platforms
Without central token control, small padding and margin variations crept into production across the portal, the marketing site, and internal tooling.
Style Drift to Legacy Libraries
Components were still referencing the OLD-myWorkSafe DLS file — a library no longer supported by the dev team — causing silent visual regressions.
Maintenance Burden
Updating a single brand colour required manual intervention across hundreds of detached instances, a critical risk for government-mandated AA accessibility compliance.
The system needed to transition from a static "library of parts" to a dynamic "functional framework" that could scale with the product.
Solutions
Component Deep Dives
Each area of the system was audited and rebuilt from first principles — reducing debt while improving the daily workflow for both designers and engineers.
General Component Modernisation via Auto-Layout v5+
We implemented Figma's advanced Auto-Layout across all core components — buttons, cards, and navigation items now grow or shrink based on text strings or nested content. "Fill Container" and "Hug Contents" logic creates components that are inherently responsive and require zero manual resizing.
Design Token & Style Alignment Audit
A full audit remapped all text and colour variables from the deprecated OLD-myWorkSafe DLS to the current WorkSafe library. Now if a brand colour is updated globally (e.g., for AA accessibility compliance), it propagates through the entire system without a single manual intervention.
Badge Component Consolidation (Atomic Design)
Previously, 5+ separate main components existed for different badge types, cluttering the assets panel. We created one Main Default Badge using Component Properties (Boolean, Instance Swap, and Text), collapsing Positive, Negative, Neutral, and Class variants into a single selectable menu.
Input & Dropdown Standardisation
Inconsistency in form fields led to user confusion and multiple dev code paths for the same functional element. New components feature high-visibility focus states for keyboard navigation, built-in aria-label slots, and a unified logic for error, warning, and success states.
Tile Page & Card Architecture
An audit of the high-traffic Tile Page revealed that Service, Accounts, and License cards share 80% of their structure with standard Table rows. We explored a unified 'Table-to-Card' data pattern — a headless design approach where the same information architecture powers both card and table views.
UX & Engineering
Production Fixes & Enhancements
Beyond the component library, the project addressed live production defects and key UX improvements in the portal itself.
Global Notifications & Error States
A critical defect was identified where notification assets remained hidden under standard conditions — only triggering during 'Forced Global Errors'. We re-engineered the notification component so visual cues (info, success, warning, error) are persistent and visible across all alert levels, ensuring consistent user feedback.
Business Hero Personalisation
The Business Landing Page now features a dynamic 'Account Role' feature. By placing the user's specific role (e.g., 'Account Admin' or 'Claims Manager') immediately adjacent to their name in the Hero section, we provide instant context and a subtle security confirmation — the user knows they're in the correct account.
The 'Eclipse Radius' Defect
A production defect caused a circle's border-radius to distort at page heights exceeding 100. The radius was tied to an absolute pixel value that didn't scale with viewport height. Resolution: the radius is now calculated as a percentage relative to the container — a perfect, non-distorted curve at any scale.
Future-Proofing
Built to Last
To prevent future style drift and ensure the system remains maintainable as the team grows, we implemented a set of forward-looking architectural decisions.
Variable Modes
Instant switching between Light and Dark modes via Figma Variable Modes — no component duplication required.
Dev Mode Annotation
Each component now includes direct links to documentation and code snippets, reducing guesswork for engineers in handoff.
Slot-Based Architecture
Complex cards use 'slots' to allow icon or button swapping without detaching the main component, preserving token inheritance.
Responsive Breakpoints
One full day allocated per component for Mobile/Tablet/Desktop permutations, Auto-Layout wrapping, and 44×44px minimum touch targets.
Result
A Living, Breathing Framework
The WSV Design System has successfully transitioned from a static repository to a living framework. By prioritising legacy asset deprecation, consolidating components into variants, and resolving critical production bugs, we significantly reduced technical debt across the product fleet.
- ~40% reduction in design iteration time by shifting to fluid, auto-layout components.
- 80% reduction in badge component library footprint via atomic variant consolidation.
- Zero legacy zombie components remaining — all audited pages migrated to 2024 standards.
- Single token source of truth — global colour and typography updates now propagate instantly system-wide.
💡 The final push focuses on responsive breakpoints — ensuring the system is fully production-ready across mobile, tablet, and desktop at every component level.