Design system for a public transport provider
A design system built for consistency, usability, and accessibility
Overview and context
In 2024, I was involved in the re-design of an Australian public transport provider’s website. I design few functionalities within the website, including the journey planner and the bus finder tool. The project has begun for some times until a decission was made to fous on the UI Kit, which was built before the website
The aim is to create a consistent UI Kit across multiple digital channels that aligns with the client branding, and to build it based on a new library called Hero UI. Hero UI satisfies the accessibility requirement and supports dark and light mode.
Role
UI designer
Front-end developer
Tools
Figma
Figma token studio
Platform
Web (desktop & mobile)
The challenge
The existing design system was a work in progress, it has not been completed. It grows everyday as the website design is updated. Some of the problems are noted below
Accessibility gaps
Slow design-to-development handoff
No built-in support for dark mode or multi-theme UI, resulting in hard-coded colors and poor adaptability
Minimal consideration on the different states, when the component is hovered, focused, or in focus visible state
Minimal documentation
With minimal resources in the design team, the design system became un-maintained and it was more a place to store component. These issues increased design debt and made scaling new features difficult.
What I did
Conducting a component audit
Defining token structure, colour variables, and component variants
Defining each colour including each shade
Defining the token in light and dark mode, and in different sizes
Defining size and reusable padding tokens
Designing reusable components and each different states
Establishing naming conventions
Checking colour contrast and font sizes in the design for accessibility
Creating documentation in the Figma file
Collaborating with frontend engineers and later on involved as a front-end engineer
Example components (anonymized)
Due to a non-disclosure agreement, please contact me directly if you have any queries or require further screenshot to demonstrate the project.
