Transport Website Design System

UI/UX Designs

A Comprehensive Design System

The Transport website embodies a comprehensive approach, consolidating all information related to various modes of transport for Victorians in one centralized platform. It encompasses the PTV website, Victorian road safety information, road disruption updates, and details on other modes like ferries/boats. This consolidation ensures that users can access all transportation-related information conveniently in one place. To ensure the success of this ambitious project, we took a strategic step back to design and build a comprehensive design system capable of handling the intricate challenge of merging multiple brands under a single entity.

In this project, a cohesive UI design team collaborated effectively. The fantastic team included a Lead UI designer, two Senior UI designers, and a Mid-weight UI designer. Additionally, we had UX designers, business analysts, and developers on board. Developers joined the project in the later stages to construct components on Storybook, contributing to the seamless execution of the project.

Figma structure - Foundation

The Figma design system structure is consistent, comprising multiple interlinked files, including Foundation, Documentation, Components, and Templates. The Foundation file serves as a style guide housing fundamental atom components like fonts, colors, icons, spacing, and more. This structured approach facilitates efficient management and organization of design elements throughout the system.

Figma structure - Documentation

A thoroughly documented design system plays a crucial role in maximizing its effectiveness and eliminating confusion. This documentation ensures that the design system functions at its full strength, serving as a reliable single source of truth for all stakeholders involved. We spend quite a bit of time to create documentation on confluence and linked them appropriately with the components and templates.

Figma structure - Components

Engaging in the enjoyable aspect of the project, I was tasked with a list of components to develop. Adhering to the foundation guidelines, I crafted responsive components, navigating through the need to address numerous variations. One notable example is the content links component, where I successfully tackled the creation of over a thousand variants to ensure comprehensive coverage.

Figma structure - Templates

In addition to component design, I took on the responsibility of designing various page templates. These templates were subsequently handed over to developers for implementation, empowering content designers to utilize them for publishing content efficiently. This collaborative approach ensured a seamless transition from design to development and ultimately facilitated the content creation process.