Creating a design system
State Revenue Office
2024
The problem
When I started in my role, I noticed that each UX designer was creating designs from scratch and that the designs for different revenue lines did not match.
This took up a lot of the designers time and also created less trust with the customers as the revenue line portals all looked different.
How I began
I began by creating a list of required components to understand what are the most commonly used components within the business.
There was an existing SRO component library, however it only contained a small amount of components. Most of these were outdated, not used and not reflected in the designs or live customer portals.
There was also the VIC gov design system, Ripple. However, some components were not appropriate for the SRO portals and needed adjusting.
Solving the problem
I collaborated with the HCD team and Corporate Affairs team to create new colours and then created tokens using those base colours. This would allow me to use existing components and update the colours quickly.
To ensure I wasn’t re-designing things that were already available, I used what was appropriate from the existing SRO component library and Ripple design system and applied the SRO fonts and colours.
Some components needed editing for example, the breadcrumbs taken from Ripple I removed the background and shadow as it was distracting on the screen as most screens at the SRO are forms with a lot of fields.
I collaborated with other UX designers to create any components they needed to complete their designs for their portals. I then provided training to the designers to ensure they knew how to use the different components.
This resulted in a reduction in time spent on designs and consistency in designs between the different revenue lines.
I am currently working with the development team to update and implement the new components, however due to resource limitation these updates will be rolled out on a project by project basis when resources are available.
Creating UX patterns
In addition to creating the design system, I also found an issue that the different customer portals had different experiences for the same user journeys e.g. login, reset password etc. This led me to explore all of the different revenue lines and identify common patterns throughout that could be unified.
I then took the common patterns and began to unify them by collaborating with product owners and developers to understand product and technical requirements.
Some of the revenue lines have specific requirements so the commons patterns would have to be adjusted for those.
Below is the general UX pattern that was created and a mockup of how the login page would look for the short stay levy portal.
I have also unified the user journey for reset password, setting a password, collection notice and declaration, updating email and password and managing users. This has resulted in more efficiency, not only with designers but now developers can reuse screens and components from other portals to speed up their work. It also helps gain trust of the customers because each portal they use, their experience will be the same.
