Independent NSW DDS Websites

The Client

The NSW Government implemented its design system, known as the NSW Digital Design System (DDS), in 2019. The introduction of the DDS aimed to unify the customer experience for individuals seeking services from the NSW Government. It provided a comprehensive framework for government agencies and vendors to adhere to while crafting and constructing digital solutions.

By implementing the DDS, the NSW Government aimed to prioritise customer outcomes, ensure inclusivity, embrace transparency and collaboration, and deliver user-centric digital services.This is part of a trend in governments across the world with the GDS in the UK government being a bring example.

From these efforts the NSW Digital Design system was born.

What is a design system?

A government design system is a collection of standardised design elements, guidelines, and resources that provide a consistent and cohesive user experience across digital services and platforms within a government organisation. It is a set of best practices and design principles aimed at improving the usability, accessibility, and overall quality of government websites, applications, and digital services.

A government design system typically includes a comprehensive library of design components, user interface patterns, typography, colours, and other visual elements that ensure a consistent look and feel across different government digital products. It also incorporates guidelines for interaction design, content presentation, and accessibility standards to ensure that government services are usable and accessible to a wide range of users, including individuals with disabilities.

Why governments need design systems

The purpose of a government design system is to streamline the design and development process, promote consistency and efficiency, and enhance the user experience for citizens interacting with government services online. By adopting a design system, government agencies can reduce duplication of efforts, improve collaboration among teams, and deliver user-friendly, accessible, and visually cohesive digital experiences to the public.

Government design systems often align with broader design system initiatives, such as the Government Digital Service (GDS) in the UK or the US Web Design System (USWDS) in the United States, which provide guidelines and resources for multiple government agencies to ensure a unified and standardised approach to digital service delivery.

NSW Government Branding guidelines

The NSW Department of Customer Service introduced branding guidelines.

At a minimum NSW government agency websites have to include several compulsory parts of the NSWDDS, the header, logo, footer and form design. However it's strongly encouraged that all agencies use a full implimentation of the NSW DDS. Agencies however can apply for a brand excemption and these come in 3 versions:

  • Independent
  • Co-brand
  • Standalone

Standalone websites have few branding requirements however Independent and Co-brand and still encouraged to use the NSW DDS but can adjust aspects such the logo, colours and other aspects.

Law Enforcement Conduct Commision

LECC approached PretaGov seeking assistance in making their existing agency website compliant with the NSW DDS. With an independent exemption, they desired a CMS implementation of the latest NSW DDS that was user-friendly and allowed them to create a distinct look for their independent agency. Their requirements included:

*Easy access to the latest inquiries Powerful search functionality for customers to find relevant documents easily Intuitive editing experience for quick dissemination of information

*Custom AOC footer to show respect to the landowners and emphasize their independent status through colors
* Enquiry forms that integrate with their backend case management system while preventing spam.
* Due to the sensitivity of the uploaded information, a highly secure CMS was preferred to minimize the risk of data leakage.

*Enquiry forms that integrate with their backend case management system and also prevent spam.

Due to the sensitive nature of the information uploaded via these forms, a highly secure CMS was prefered and a solution that reduced the chance of potential data leakage.

NSW Crime Commision

The NSW Crime Commisions requirements were very similar to LECC. After a quick content conversion the Crime Comission editors were able to spend time updating and reorganising the content to take advantage of the new NSW DDS components.

Plone 6 is Designed for Design Systems

Plone 6 is a compete rewrite of Plone. Retaining the well know backend architecture that has kept the CIA and FBI websites from being hacked. The Plone 6 project revamped the editing and viewing experience with a headless design using a React single page app. This allows for blazing fast site browsing while still retaining server side rendering for SEO purposes.

The use of React makes it very easy to build on top of, making custom apps easy to add to Plone 6.

The new Volto block based page editor matches perfectly with modern design systems such the NSW DDS. Many components could be taken directly from the provided NSW DDS code and made editible with Volto very quickly.

NSW Digital Design System for Plone 6

PretaGov decided early on to open source the NSW DDS for Plone 6 implementation

In addition we contributed fixes and new features to base Plone 6 as part of this work, making Plone 6 even more capable.

What are the NSW Design Standards?

The set of guidelines known as the NSW Design Standards provide a comprehensive framework for government agencies and vendors to adhere to while crafting and constructing digital solutions.

  1. Prioritize customer outcomes over government solutions
  2. Choose appropriate technology and tools
  3. Ensure inclusivity for all
  4. Embrace transparency and collaboration
  5. Create a diverse and collaborative team
  6. Measure and continuously improve, avoid abrupt changes
  7. Prioritize safety and security from the beginning
  8. Embrace reuse and encourage reusability
  9. Plan and safeguard user privacy
  10. Embrace flexibility and iteration in your approach