Building a citizen-centric design system for the whole of government
Context
Single Digital Presence (SDP) is an initiative to consolidate the hundreds of websites across the Victorian Government and its associated organisations into one front end experience for improved usability and accessibility. By providing ‘Ripple';’ an open, flexible, off-the-shelf solution, government agencies can use to immensely reduce the cost and effort of digital development.
Product - Vic.gov.au, open source design system for the whole of Vic Gov
Role - Lead UI, UX & Research
Key achievements
Designed and deliver first iteration of Vic Gov design system within a very small team over 6 months, for use across multi-tiered organisational ecosystem.
Facilitated multi-level stakeholder engagement to define refreshed digital brand
Flexible, adaptive design system that has since been rolled out across over 250+ websites, including Vic.Gov.au (up to 1 million visits per month) Business Victoria, Victoria Police, Victorian Aboriginal Heritage Council.
Approach
To address this challenge, we focused on accessibility, flexibility, and inclusivity as the core principles. We adhered to AA+ accessibility standards, ensuring high contrast text, consistent labeling with images, clear signage, and presence of transcripts with visual content. Additionally, we needed a system that could cater to various government organizations and agencies, allowing for compatibility with their unique branding. I developed a system that enabled quick customization of colors and patterns to apply distinct branding within seconds.
Included was a digital brand refresh for the Victorian Government, which had to be conducted rapidly over the course of just a couple of weeks. This process included multiple workshops with key/high level stakeholders, the creation of multiple style tiles for validation with diverse user test participants. The visual concepts we attained wide-scale stakeholder alignment on included references to the inclusion and celebration of diverse peoples across the state. This led to the integration of rainbow gradients and large scale acknowlegments of country across all page footers.
We then applied styles to a core kit of sketch components and rapidly built out. We tested in both Sketch and in-browser across templates and pages, and essentially used vic.gov.au to test out the library - paying particular attention to how robust and scalable it was. We ran multiple rounds of testing with diverse citizens - representing a cross section of the Victorian peoples. Extensive UAT testing was done that included groups of people with ranging abilities.
Building a designer friendly library in Sketch was essential, and it followed best practices with user experience in mind. Each layer, style, symbol, component, page, and type style was meticulously named and organized. With tight delivery deadlines, I continued iterating while delivering development-ready resources to external parties.
Solution
The result was a highly accessible and flexible design system that could be easily customized for various government organizations. We conducted usability testing sessions with Victorian citizens, refining interface details based on feedback, particularly related to content and functionality. The clean and modern visual design resonated well with users.
As the system rolled out to partners, we maintained flexibility, iterating on elements to accommodate a variety of use cases. The library itself remained accessible, ensuring that all components were easily accessible for efficient use. The end result was a digital solution that not only uplifted the Victorian Government's digital presence but also facilitated streamlined and accessible branding for a wide range of government entities.
