At a glance

State government
Design & user research
Civic tech, Open design

The purpose

To create a library of reusable design assets to reduce costs for Victorian Government and provide better user experiences.

The players

This Victorian agency is responsible for a variety of services across the state and is also responsible for six websites. (Note: Due to a strict media/communications policy, unfortunately we can’t name this department.)

The problem

The previous six agency sites were siloed, disparate and difficult to manage. In addition, users struggled to understand and navigate all the sites, which meant the department received lots of requests from users who couldn’t find what they were looking for online.

Our client decided to bring their six sites into Drupal 8. As part of this transition project, they wanted a library of reusable visual components and an accompanying digital style guide that reflected the Brand Victoria Guidelines while also addressing the department’s unique needs.

All designs needed to meet the W3C AA Accessibility guidelines. The time frame was also quite tight, because the department needed the digital assets and style guide ready before they could start the design/theming in Drupal.

The solution

Once we’d won the tender to create the library, our first action was to ensure we understood the department’s ‘world view’. We itemised each component and its usage, drafting a central briefing document. We then workshopped each component, keeping in mind the technical, responsive and accessibility implications, and ensuring we met the Brand Victoria Guidelines.

Our approach consisted of these phases:

  1. Familiarisation: Identifying each component and usage across the department’s sites.

  2. Visual design guidelines: Understanding and applying Brand Victoria Guidelines while creating a visual ‘set’ of six sites that were unified but at the same time visually differentiated from each other.

  3. Wireframing and design: We created low-fidelity wireframes to demonstrate component usages, before refining to create high-fidelity responsive and brand-compliant designs.

  4. Stakeholder reviews: Through the entire process we worked closely with our client to incorporate all refinements and feedback via regular workshops and constant communication.

  5. Packaging and sign off: Finally we packaged all components into the requested output formats and supplied the style guide.

Our visual component library included multiple images, icons and responsive components. All components can be incorporated into different templates, and are responsive and accessible across different devices. To help demonstrate how the components would work we also supplied sample layouts to demonstrate the modularity and configurability of the library.

Salsa also created digital style guidelines reflecting our client’s unique brand identity. The style guide ensures consistency is maintained across all distinct page templates and sites within the broader agency portfolio, providing each site with an individual identity but also making it clearly part of the wider family.

The benefits

Salsa helped breathe new life into the department’s digital user interactions, with the standardised visual component library creating a consistent user experience across all department websites. Victorians now experience clean, user-friendly sites that are accessible and comply with the Victorian Brand Guidelines.

The library also saves the department time, money and risk by having a singular flexible design system that is accessible and validated for development and re-use across all of our client’s digital assets. Design once, apply to multiple sites.