Creating a pattern library
State Revenue Office
The challenge
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.
The process
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.
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.
UX patterns
In addition to creating the pattern library, 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.
The impact
Improved efficiency
Not only for designers but also for developers as there is no need to individually draw or develop each component.
Created consistency
As all designers will be using this design system it creates consistency between the designs created.
Improved trust
By creating consistency across all portal designs, customer begin to trust the SRO and it’s portals more as this is one of the biggest pain points for the customers that the portals all look different.