In Dec 2022, I joined DTP on an exciting adventure to create a unified Transport Design System for Victorians and visitors to Victoria. My hands-on role allowed me to contribute significantly towards the development of this Design System, while also steering design strategy and fostering collaboration and adaptability for my fabulous design team.
CLIENT
Department of Transport and Planning
ROLE
Experience Design
Design Systems
The Transport Victoria Design System
The Department of Transport is currently undergoing a digital transformation. This includes a significant overhaul of VicRoads, PTV, and the myki ticketing system, providing passengers with more options for navigating Victoria's transport network. This transformation also encompasses a consolidation of brands and products, resulting in a new integrated brand. This new brand will boast a scalable digital presence, underpinned by strategic design foundations and a global design system.
About the project
The project scope stemmed from a separation agreement between the VicRoads Joint Venture Operator (JVO) and the State. This process entailed moving state owned tools and content which we related to road use, rules, and safety from VicRoads onto another website, while leaving Registration and Licensing with the JVO (in VicRoads). As a result, a new customer-facing website, owned entirely by the state, was needed. The scope of MVP meant the focus was to design a foundation product experience in order for our customer to complete their task, move towards a superior CMS framework, and setting up for scale.
In addition to the contractual agreement, the business identified an opportunity to reach a seven-year-long goal of launching a unified transport brand. This brand, would be supported by a new Design System, and could easily scale utilising the new CMS. Brands like PTV and Regional Roads Victoria, along with VicRoads, would be incorporated into this program known as the VicRoads Modernisation.
Aligning on Business objectives
Our team’s success relied on aligning business objectives with Design KPIs, creating a design hypotheses, formulating a project vision, and planning our design initiatives. We tackled alignment head-on at the beginning, and this approach to alignment actually helped our entire project team understand business goals more deeply, particularly those in non customer centric roles like our Business leaders.
We collaborated closely with our POs and BAs, as well as our fellow engineers once they joined the working group. Our goal was to identify the critical metrics that would measure our success, specificic to design, and how it would contribute to the broader product team objectives.
Roles, and Processes
Our large working group, consisting of Designers, Developers, Business Analysts, Product Owners, Solution Architects, Test Analysts, Change Managers, and various other strategy experts, needed to be divided into multiple squads to achieve truely find some agile mojo. I took a hands-on role, which also included forming a design strategy and providing thought leadership. I was responsible for overseeing all design decisions across Mid, Senior, and Lead designers. Within our Agile ceremonies, us Designers implemented various mechanisms at each stage of the project to support collaboration, rapid prototyping, and adaptability due to frequent changes in project scope. We also had stacks of fun in our Design Jams, Process & Practice discussions, Design System Working Groups, and Guild Reviews.
Design System Purpose and Principles
From a digital perspective, the department identified the inefficiencies and challenges associated with the constant application of Continuous Improvement (CI) across numerous digital transport products, that was not resulting in improved product quality, nor cost efficiencies. Like many businesses, the department saw several benefits of a Global Experience Language. This program of work had seen an opportunity to significantly enhance efficiency and lower the costs of maintaining multiple channels in the future.
Colour system
The colour scales were harmonised by aligning the semantic hue of each step with a predetermined contrast ratio. This strategy provides confidence to designers and developers that colour steps above 600 are sufficiently visible against a white background, while steps 500 and below have adequate contrast on a black background.
Spacing and Proximity
We use a 16px base for spacing to ensure consistency across components and layouts. This simplifies design and promotes uniformity. Adjusting the progression with this base enhances visual differentiation, improving design principles like proximity, and hence, user comprehension.
Tokenised Standards
The benefits of design tokens include improved communication by using a common language, maintaining consistency across all platforms with synced files, efficient maintenance by editing in one place, and establishing a strong foundation with a steady design system providing value to the work.
Integrated Components
The design system consists of individual components that are both versatile and reusable, facilitating the creation of consistent and cohesive experiences. The Transport Victoria design system includes a variety of pre-designed elements such as buttons, cards, accordions, as well as larger structures like navigation bars and transformable tables. These components are governed by a set of foundational styles. The benefit of these components lies in their ability to facilitate the rapid development of business solutions, and ensure uniformity, clarity, and accessibility.
User Testing Metrics
We needed a stable, reliable, and repeatable metric to test top tasks over time. We chose representative segments - individuals who would actually use the website, and felt 15 people was a good number to ensure stable results. We grouped people based on similar experiences and mode of transport.
To ensure this metric's stability, reliability, and repetitiveness, we established specific rules to follow. These included providing no confirmations, or maintaining an ongoing conversation, we would be up front at the begining around not providing guidance, all in an effort to being as realistic as possible.
The success rate and completion times were our primary metric, and this definition of success for the customer was a critical aspect of our project. Upon completing this research, we would in each case present our findings to management, providing a comprehensive understanding of user needs and the effectiveness of our designs.
My reflections / lessons / next steps
- A significant takeaway was my realisation that effective execution in product design is about managing relationships. I needed as many allies as possible throughout the organisation to support and implement the majority of our solutions.
- My experience in digital advertising, branding, and art direction at a Creative Agency fostered my passion for meaningful design standards that were actually used and relied upon. Exposure to various brand guidelines and design systems led me to join DTP, where I relished the challenge of building a design system from scratch. I've found my niche and achieved my goal.
- Traditional usability measurement tools might not be entirely accurate for government products, and interpretations could vary significantly compared to non-government products.
