Creating a design system for a whole government means meeting a range of priorities.
We need to work efficiently. We’re funded with public money, and have a duty of care to use it carefully.
We need to maintain quality. We focus on inclusive, accessible, and customer-friendly services.
Balancing quality and efficiency with a design system
Design systems increase the productivity of digital teams by standardising and sharing the building blocks used to make digital products. The blocks have already been well designed and well tested, so digital teams can spend their time understanding users and creating a composition of pre-existing components to help their users get what they need.
Our current design system contains the design blocks and HTML needed for products to look, and feel, distinctly NSW. Having reached that goal, we’ve built confidence in our approach, and we’ve been funded to expand our offering. We’re doing so by concentrating on 3 things:
1. Making it easier to contribute from outside our own team
Defining a framework to make the Design System modular means we can make it more community-contribution friendly. With this approach, all teams using the system can share work with each other and it back to the master library. Rather than just creating components, we'll be concentrating on facilitating collaboration, documentation, distribution, and ongoing improvements to patterns.
2. Reorganising our patterns according to the customer need they solve
We’re reorganising the patterns according to the situation they suit, rather than what they are on a screen. Behind each user-need based pattern is a ‘full stack’ toolkit to help designers, developers, researchers, and architects.
Whilst the existing patterns helped with consistent visuals, we found teams were still spending time connecting the dots between something a user needed and the components they had available, this will fast-forward that step.
3. Using those customer need focussed patterns as a common language across roles
When talking about needs-focussed patterns, we're creating a self-contained package which defines how it looks, interacts, and affects user experience. That means if a product manager, developer, or designer refers to an 'address field' there's a common understanding of the different parts. From research, we found that often some of the most important parts of UX design don't involve the user interface, often being left to an isolated dev task, rather than a user-centred design process.
Anatomy of a full-stack pattern
As an example, we’ll look at the pattern to collect an address which, if complete, would contain the following:
UX Toolkit:
- When to use it
- When not to use it
- User-centred design considerations (exception handling, copy, usability, inclusivity)
- How to inform the user of errors
UI Designer’s Toolkit:
- A figma component showing the UI
- Branding/visual (colours, etc)
- Styling tokens (border radius, shadows, hover states, etc)
- Layout requirements
- Visual accessibility info
- Typography styles
- Error states
UI Dev Toolkit:
- An accessible textbox with error states
- Label
- Type-ahead list styling
- Layout (grid, spacing, etc)
- Interaction accessibility info
Front-end Dev Toolkit:
- A react component for address fields
- Handlebars template
- HTML template
- JS to make the type-ahead work
Back-end Dev Toolkit:
- Code to link the typeahead to NSW Point (the NSW address API)
- Guidance on how to on-board for NSW Point
- PaaS-ready react app framework
Integrations:
- NSW Point
NSW Design Standards guidance:
- Security — meeting the standards
- Privacy — meeting the standards
- Design with users — when to test your product
We’re just the conductors
We’re not planning on writing every line of code and designing every combination of components ourselves. We’re not the ones being faced with end-user needs on a daily basis, and we’re also a small team.
We’re creating a framework so that when anyone works on a digital service, it’s easier to re-use and share building blocks with others. For example, a service may need to meet the user need ‘Enter a business name’. A new pattern could be built and deployed rapidly by changing the integration from NSW point to an ABN lookup, but reusing the UI, type-ahead, and react components.
We’re more than happy to bring in work from other teams or design systems, too. Our approach is to work completely in the open and all of our work is either licensed either CC (for visual) or MIT/Apache (for code). We’d love nothing more than for our design system to save people time and give a head-start on quality, even outside of our own organisation.