Ripple 2.0 Design System

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

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

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.

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.