Chris Hughes
Design
London
WorkSafe is a government organisation in New Zealand that has a mandate to create safe environments in the workplace for all New Zealanders. This is done by requiring businesses to notify or submit applications to WorkSafe. WorkSafe has split this into 16 different business types.
For the self service product a design system was essential to speed up design and iteration times. There were brand guidelines that needed to be followed that would be a foundation to be followed and the use of a design system would speed this up.
“How might we create a design system that creates continuity and saves time?”
Creating a design system that can be scaled and easy to use for other designers and stakeholders.
The outputs of this project were owned by me but was improved by valuable input from our Front End Dev, Design Lead and Junior Designer.
WorkSafe design system for our self service portal. Completed in a way that can be improved and expanded upon even after I left.
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition.
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition.
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition. Check out another project
I collaborated closely with the project owner and developers to gather and define clear, robust requirements for the design system. This process involved not only outlining what the design should encompass, but also establishing boundaries for what it would not include, ensuring focus and preventing scope creep. By aligning early on with key stakeholders, I was able to set realistic expectations and ensure the design system met both functional and technical needs.
As part of my research, I conducted a review of existing design systems to inform the structure of our own. I focused specifically on government design systems to understand how they operate within a public sector context. To deepen this understanding, I connected with the design team at the Ministry of Education and held a meeting where they showcased their design system and shared insights from their experience. These conversations, along with my broader research, were instrumental in shaping the initial direction of our project and providing valuable considerations for future iterations and scalability.”
My starting structure was to consolidate all elements onto one page for a streamlined build. I began by incorporating foundational elements from the WorkSafe style guide, such as colours and fonts, ensuring a solid and consistent base from which new components could be created and expanded.
Design principles are essential when building a design system, as they establish a framework for maintaining consistency, clarity, and focus throughout the design process. These principles act as guiding benchmarks, ensuring that every component and interaction is aligned with the product’s overall vision and strategic goals. By providing a clear set of standards, they help streamline decision-making and maintain a cohesive experience across all platforms.
I created design tokens to streamline the design process and ensure consistency across all platforms. By defining core values such as colours, typography, border radius and spacing as tokens, I allowed for seamless updates across the system. This approach not only helped maintain brand consistency but also made the design more scalable and adaptable as new features were introduced. With design tokens, any changes can be applied globally, reducing time spent on manual updates and ensuring the interface evolves cohesively across multiple products and platforms.
The roadmap for this design system was to start incorporating interactions so prototyping for user testing could be better streamlined. There was also a backlog of components that were prioritised and needing to be created such as a progress indicator and tables.
From a more holistic perspective I wanted to expand the use of this design system beyond the product I was working on. There is value in the wider business being aware of the design system as different teams that are using the same platform (Microsoft Dynamics) could accelerate their design process as well rather than doing everything form scratch. By doing this, reducing workload and improving efficiency and speed of project delivery.
