Digital design guidelines presentation slides for NSW Government Premier & Cabinet.

NSW Department of Premier and Cabinet

NSW Government Digital Design Guidelines

Impact area

Empowering people

Services

Experience and product design

Making it easier to create accessible, mobile-friendly government websites for the NSW public

The challenge

The Department of Premier & Cabinet wanted to ensure consistency and trust across NSW Government websites with the aim of providing simple and seamless experiences for all citizens.

What we did

Folk worked closely with the Department of Premier & Cabinet to define and validate a foundational digital design guideline that NSW brands can easily apply and adhere to their services.

To achieve this, we knew how important it was to work closely with the teams who design and build NSW digital services. By partnering with key NSW government agencies through collaborative research, workshops and analysis, we were able to identify and frame;

  • Citizen needs and pain points with the as-is digital experience
  • Triggers and barriers to the introduction of digital design guidelines
  • Requirements for brand variance and system boundaries
  • Foundational digital design principles for NSW

The all-new foundational NSW Government Digital Design Guidelines make it easy for design teams to build on brand, accessible digital design for all citizens and their experiences.

https://www.digital.nsw.gov.au/design-system/style

The solution has been designed and tested with NSW citizens, covering a range of accessibility needs.

Close collaboration

Through collaborative research, workshops and analysis, we worked closely with 15 government departments and agencies, including:

  • Department of Premier and Cabinet
  • Department of Industry
  • Department of Finance
  • Department of Education
  • Department of Justice
  • NSW Health
  • Transport for NSW
Three participants collaborating during a workshop, placing sticky notes onto a whiteboard.
Three participants collaborating during a workshop, placing sticky notes onto a whiteboard.
NSW Government design principles displayed as eight icon tiles including Distinctly NSW, Clearly simple, Purposeful, Audience centric, Current, Trusted, Unified, and Inclusive.

Design and developer tools to make citizen centred products and services.

Card-style mockup displaying an article title, summary text, and a large download button.Card-style mockup displaying an article title, summary text, and a large download button.
NSW Government Premier & Cabinet website header shown in mobile and desktop layouts with placeholder grid content.

Responsive layouts

Layouts for pages that designers can add or remove components to suit their product’s needs, optimised to scale elegantly from mobile to large screens.

NSW Government Premier & Cabinet website header shown in mobile and desktop layouts with placeholder grid content.

Brand application and site navigation

The digital design guidelines include the masthead and footer for every NSW Government webpage.

NSW Government Premier & Cabinet website header shown in mobile and desktop layouts with placeholder grid content.

Visual identity system and core UI components

The colour, typography, and UI components have been carefully considered and tested to meet the needs of digital creators when developing citizen-centred products and services.

Montserrat type specimen showing alphabets and sample headings used across NSW Government digital products.
Typographic scale table listing font sizes, weights, and line heights for NSW digital headings and body text.
Design System Style page on a laptop, outlining layout, colour, typography, and iconography guidance.Design foundations in Sketch, showing colour and typography specs within the NSW digital UI kit.
Tablet screen showing NSW Trustee & Guardian service comparison page designed with the NSW digital guidelines.

The digital guidelines provides a simple and seamless experience for all citizens in NSW.

Collection of NSW climate and energy websites using shared layouts, cards, and navigation from the design system.
NSW Koala Strategy website shown on a laptop, applying the government design system to content-rich pages.
Mobile interface for searching asbestos products, demonstrating NSW Government digital patterns and form design.