Overview
Laying the foundations and contributing components to the new Transport for NSW design system.
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:
Developers adopting a new way of working: The transition to the design system required developers to adopt new workflows and practices. This adjustment posed a constraint as some developers needed time to acclimate to the change, affecting the initial implementation speed.
Resource limitations due to funding issues: A continuous challenge throughout the implementation was the lack of resources due to funding issues. This constraint affected the speed and scale at which the design system could be developed and rolled out.
Processes
The development of the design system followed a systematic approach to ensure its effectiveness and adoption:
Research and analysis: Conducted an in-depth analysis of existing design inconsistencies and user pain points. Gathered insights from user feedback and benchmarked against industry best practices.
Design and iteration: Leveraged my expertise to design and iterate on key components, including cards, tables, global alerts, in-page alerts, breadcrumbs, pagination, and search results. Design tokens were used to maintain consistency and allow for easy customisation.
Collaboration and documentation: Worked closely with the product manager, business analysts, designers, and developers throughout the design process. Also documenting design specifications, guidelines, and usage examples to ensure clear communication and easy reference for all stakeholders.
Design system contributions
Cards module
Global alerts & notifications
Tables
Search results
Pagination
Breadcrumbs
Results
The implementation of the design system yielded significant results:
Consistency: The design system successfully established a unified visual language across digital products, ensuring a consistent user experience and reinforcing the agency’s brand identity.
Efficiency: Design and development processes were streamlined, as teams could leverage pre-designed components and guidelines. This led to reduced duplication of effort and accelerated product development timelines.
User-Centricity: The user-centered approach to design resulted in improved user satisfaction and engagement. Components like global alerts and in-page alerts helped convey critical information effectively.
Collaboration: The collaboration between designers, product managers, business analysts, and developers fostered a shared understanding of design principles and implementation details.
The Transport for NSW design system has transformed the agency’s digital landscape by creating a standardised, user-centric, and efficient approach to design and development. The case study highlights the significance of cross-functional collaboration, meticulous design processes, and the impact of a well-implemented design system on enhancing user experiences.