Laying the foundations and contributing components to the new Transport for NSW design system

Overview

The Transport for New South Wales (TfNSW) Connect design system is a comprehensive framework that enables consistency, efficiency and user-centricity across various digital products and service offerings. This case study explores the journey of developing and implementing the Connect design system, focusing on its impact on enhancing user experiences and streamlining the design and development processes.

Problem statement

Before implementing the Connect design system, the agency faced challenges related to inconsistent user experiences across its digital offerings. The lack of standardised design elements and components led to disjointed interactions and hindered the overall usability of the applications. The design and development teams spent significant time recreating common design elements, resulting in inefficiencies and a lack of scalability. The need for a cohesive design system became evident to create a unified visual language, enhance user experiences, and accelerate product development.

Users & audience

The design system catered to a diverse set of users and audiences, ensuring its applicability across various roles:

• Customers: The design system directly impacted customers by providing them with a seamless and consistent experience across TfNSW’s digital platforms. The users could easily navigate different applications, thanks to standardised components like breadcrumbs, search results, and alerts.
• Content Producers: Content producers benefited from the design system’s guidelines for creating content-rich interfaces. Consistent styling and layout guidelines allowed them to present information effectively, enhancing readability and engagement.
• Designers: The design system empowered designers to work cohesively by providing a library of pre-designed components. This freed up designers’ time to focus on solving unique design challenges and crafting innovative user experiences.
• Developers: Developers found the design system valuable as it offered clear specifications and annotations, streamlining the development process. Design tokens enabled them to translate design elements into code more efficiently, reducing inconsistencies between design and implementation.

Roles & responsibilities

In developing the TfNSW design system, I played a pivotal role in designing elements, components, and modules while leveraging design tokens. My collaboration extended to various stakeholders:

• Product Manager: Collaborated with the product manager to align design system goals with the agency’s strategic objectives. This involved understanding user needs, prioritising components, and ensuring the design system’s relevance.
• Business Analysts: Worked closely with business analysts to gather and document design requirements. This step ensured that the design system met the needs of different applications and user groups.
• Designers: Collaborated with fellow designers to share insights, best practices, and design solutions. The design system facilitated a consistent approach to design across the agency.
• Developers: Engaged with developers by annotating design specifications, and providing them with clear guidance on implementing design elements. This collaboration bridged the gap between design and development, ensuring the accurate translation of design concepts into functional components.

Scope & constraints

While implementing the design system, certain scope and constraints influenced the process and outcomes: