Finalist 2024

Ripple 2.0 Design System

Single Digital Presence - Department of Government Services / Department of Premier and Cabinet (VIC)

Ripple 2.0 - digital design system of the Victorian Government

Ripple is the design system for Victorian government digital products. Ripple is a system of reusable styles, components, patterns and tools for building Victorian government digital products.


Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:

  • makes it easier for citizens to find, understand and use government information
  • makes it easier to create Brand Victoria approved content, assets and sites
  • increases delivery speed for digital products and services

Over 50 government websites use Ripple, including our main vic.gov.au platform. These sites attract millions of views per month.

Design Brief:

Background:
The Ripple Design System is an open source design system and the front-end layer of the consolidated Victorian government content publishing platform. It provides a single source of truth for styles, components and patterns when creating digital experiences on Victorian government websites.

Problem statement:
Ripple was built with core principles of an atomic design system in 2018. Overtime, Ripple was changed to suit the needs of government without improvement to its core design language and architecture. It required a full design and development refactor to ensure it adhered to atomic principles, was scalable, could have colour theming applied and provided a consistent best practice and accessible user experience for Victorian citizens.

Intended outcome:
To continue meeting the highest performance, usability and accessibility standards that improves citizens ability to find, understand, trust and use Victorian government information. To enable world-class design system that improves developers, designers and publisher experiences.

This project was developed by:

Design Process

The Ripple refactor project undertook a comprehensive design process to ensure the project exceeded the design brief. Below is a high level overview of this design process followed by the design team over the 24 months period of the project.

The final design was implemented as a fully realised design system for the Victorian government which meets accessibility, SEO, security and performance best practice. Ripple is now live of a number of vic.gov websites and is available as an open source design system for public and private use - https://www.ripple.sdp.vic.gov.au/

UX research
Ripple User Survey and analysis
Collation of usability and accessibility issues, and a visual audit
Establish design principles
Research design tokens to enable theming capability, scalability of system and best practice standards

Component background research
Research and collect examples of the ‘component/style’ from other leading design systems
Reference Ripple 1 component
Summary of known issues
Reference related Ripple 2 components to align styles + design
Reference solution direction from JIRA ticket

Component Design
Design exploration for the component / style.
Consider behaviour, states, responsive nature when designing.
Sign off to build master component.

Master Component
Build the master component in Figma
All type styles, colours, layer properties to be linked to Figma file styles.
Build out required breakpoint versions dependent on responsive nature.

Component Documentation Specifications
Copy across component to Document Specs Figma file and spec out.

Internal documentation
Create component Confluence page and document in template
Sign off on internal build documentation

Handover to Dev
Meeting with developers to review design documentation and handover for build.

Component QA
Developers code component / style and pass back for design QA.
Compare Storybook to Figma component, and documentation
Write up feedback for developers.
Approve the component.

External documentation
Creation of Figma file guidance
Creation of external documentation for design system website

Design Excellence

Atomic design principles, design tokens and accessibility first design, ensure Ripple is a leading design system which embodies best practice principles and is an exemplar of good design. It sets a benchmark for design excellence in Victorian by being a best practice example for Victorian government departments and design agencies employed by government to follow, providing educational guidance and documentation on how to design a best practice digital application.

Accessibility
Accessibility first design has enabled the Ripple design system to be WCAG 2.1 AA compliant out of the box. Several design features have been implemented to support this compliance including:

  • The inclusion of underlines on all links to ensure a visual change for visually impaired users (design does not rely on colour alone).
  • A consistent and strong focus state throughout all components on site, utilising colour, a underline and shape change to signify the focused element to the user.
  • Focus state colour is the direct opposite of the site primary colour in value, which allows for all colourblind users to see a visual difference between the focus state colour and the site primary colour.

Theming
Custom inbuilt theming allows for any brand to apply their colours to the design system and meet accessibility requirements for contrast. It also allows Ripple to be flexible in brand application while ensuring a consistent user experience across the ecosystem of Victorian Government websites enabling users to only learn a handful of interaction patterns.

Educational documentation
The creation of the Ripple documentation website supports the usage of the Ripple Design System. We have documented the features and functions of Ripple to help guide designer and developers to build Victorian Government websites.

Component documentation has detailed guidance including:

  • usage
  • how to use this component
  • how not to use this component
  • variants
  • theming guidance per component

Design Innovation

The state of Victoria has a rich community of design practitioners who are innovating and leading Australia in design best practice and creativity. This creativity is expressed in the public service by the Victorian government have greater design personalisation and branding needs compared to sister states and territories.

For this reason Ripple is the first Australian government design system to innovate in the brand space. It has been designed with in-built custom theming capabilities, which allow for greater brand flexibility and design expression.

As apart of the Ripple 2.0 project research was conducted to understand the impacts of brand on citizen usability, engagement and trust in government websites. This research showed that it was critical for brand to be implemented mindfully in a way which allowed users to use a brand colour change as a method to way find content on government websites while retaining the familiarity of consistent user patterns. This research allowed the refactor and theming framework to be underpinned by evidenced based research findings to ensure user needs are met.

Design tokens are used for theming, which allows for any colour palette to be applied to the design system guaranteeing WCAG AA colour contrast requirements. Each brand colour has a type token associated with it to support global application of the accessible pairing across the design system.

The implementation of design tokens allow for style changes to made at a base level enabling the colour of components to be changed in a few clicks. Through small changes such as colour palette, corner radius, and font family, an independent site requiring custom branding can be applied without changing the fundamentals of the design system to ensure usability and accessibility are retained.

Design Impact

Atomic principles and design tokens support the scalability and flexibility of Ripple encouraging reuse, minimising unnecessary design time required to create new components or sites.
It encourages consistent design with comprehensive styles and guidance for extending the system if custom components are required to support user or business requirements of different technology platforms.

Ripple is a technology agnostic design system that has reusable and scalable components, as during the reactor Ripple 2.0 was decoupled from the backend of content publishing platform. Victorian government department, agencies and vendors are now able to save design resources, time and money by utilising Ripple to apply out of the box styling to their technology platforms. We have many instances of the Ripple design system being applied to other technology platforms such as Salesforce and Service Now.

Ripple has a positive impact in the following ways -

Social
As Ripple is applied to more platforms Victorian citizens know what to expect from a user experience with the Victorian government, meaning an increase in trust they have to only learn a few patterns of interaction to successfully complete their goals. This is particularly helpful for users with low levels of digital literacy such as the elderly.

Environmental
As Ripple is a technology agnostic design system, it is able to be applied to various platforms saving design and development time and resources, this equates to a saving in natural resources as projects do not start from scratch.

Commercial
The Ripple design system and Ripple framework are open source and released under an Apache 2.0 License, providing reliable and long-lived software products through collaborative, open-source software development. This means that Ripple is able to be used for commercial purposes, as under the Apache license, users are permitted to modify, distribute, and sublicense the original open source code of Ripple.

Digital Design 2024 Finalists

Eleventh Planet

Joanne Mott and John Power / Hacer Group / Rothe Lowman Architects

Blackmagic Camera App

James O Shea / Alexander Diaz / Mio Hu / Jeremy Marsh / Hailey Choi / Cassidy Van Bloom

Multicultural Framework Review

Think HQ & CultureVerse / Department of Home Affairs

My Drive Hero | Get Rewarded for Simply Driving Safely

Mo Hamdouna, Andres Herrera, Lidya Hartando, Ezequiel Gallo (Mo Works) / Blake Robinson, Josh Wong (MyDriveHero)

Smart Cities, Wyndham Tech School

Wyndham Tech School / Wyndham City Council Smart Cities Office / Spiire Visual Media Studio

Goldee: The AI Personal Assistant for Busy Families

Shadowboxer / Goldee / Timba Smits, The Jacky Winter Group

Vic Vice- Victorian Virtual Industry Careers Experience

Goulburn Murray Local Learning and Employment Network / Spiire Visual Media

Quit Website

Northmost / Quit

Empathy in Action: The National Centre for Action on Child Sexual Abuse’s Website Design

The National Centre for Action on Child Sexual Abuse / Storyfolk

Berry Street Gifts

Yump Digital / Berry Street