Service Victoria Design System
Sitecore design system
Situation
At Service Victoria, I was instrumental in the creation of the Sitecore design system, following the success of the React design system. This system was designed to promote a consistent, scalable, and efficient approach to UI development across all Service Victoria digital platforms.
Built with the Atomic Design methodology, it established a clear hierarchy of UI components (atoms, molecules, organisms) ensuring brand alignment and a unified user experience across desktop, tablet, and mobile devices. The core principle was to reflect Service Victoria's brand identity in every user interaction.
A unique challenge arose with the requirement to develop specific UI components for Victoria Police. Victoria Police operates with its own distinct brand identity, characterised by a unique colour palette, specific typography, and other visual elements that differ significantly from Service Victoria's core branding.
The objective was to strategically extend the Service Victoria design system to accommodate the distinct branding of Victoria Police. This required a solution that balanced brand individuality with the efficiency and consistency benefits of a centralised design system, ultimately ensuring a clear and appropriate user experience for individuals interacting with the digital services.
Tasks
-
To establish a robust, scalable, and brand-aligned design system that streamlines UI development and ensures a consistent user experience across all Service Victoria digital platforms, including specific accommodations for the Victoria Police brand.
-
Developing the system's ability to handle different brand identities, particularly the distinct requirements of Victoria Police.
-
Make it easy for developers and designers to understand and correctly implement the design system components.
-
Contributed to the scalable and long-term robust nature of the design system by providing a framework for its sustainable growth and evolution.
Actions
-
This involved establishing the foundations that would underpin the entire design system. This included defining principles related to usability, accessibility, brand expression (for both Service Victoria and Victoria Police), consistency, and performance. These principles acted as a compass, guiding all subsequent design and development decisions.
-
This involved making key decisions about how the UI components would be structured and built using React. Adopting the Atomic Design methodology (Atoms, Molecules, Organisms) provided a logical and scalable framework for organising the component library, promoting reusability and maintainability.
-
This crucial action involved designing and implementing the technical mechanism within the Sitecore design system to handle different brand identities, specifically accommodating the unique visual styles of Victoria Police.
-
Building a successful design system requires buy-in and active participation from various teams (designers, developers, product owners). This action involved actively fostering collaboration by organising workshops, conducting regular communication, soliciting feedback, and advocating for the adoption and contribution to the design system across Service Victoria and with stakeholders at Victoria Police.
These designs are currently protected – if you’d like access, please contact me directly
Results
The Sitecore esign system ensured a more unified and consistent user experience across all Service Victoria digital platforms.
By providing a shared library of pre-built, branded components, it eliminated inconsistencies in visual styling and interaction patterns, strengthening Service Victoria's overall brand identity and building user trust.
The design system effectively addressed the challenge of integrating the distinct branding of Victoria Police. By implementing a variation system, development teams could build interfaces that adhered to the Victoria Police visual identity while still leveraging the underlying structure and benefits of the core Service Victoria design system. This avoided the need for a completely separate and redundant component library.
