Cru software design system
Consistency across design
How we helped Cru Software develop their design system
Client
Cru Software
Service
Design system
The background
Breaking new ground
In Australia, mining is big business. So much so, that over 200,000 people are rostered to work across mining sites in regions bigger than Texas. Every day thousands of workers are assigned essential tasks to keep Australia's biggest economic engine moving.
Cru Software helps make this happen.
During a pivtol change to a SaaS model, we were asked to help apply a consistent UI language to help get their engineering team working together. Hatch Head decided that the most effective way to achieve this in a team without any designers was to create a design system so that the developer and product teams had a consistent set of rules to apply to any feature designs.
Before vs After defining design system
The beginning
Getting to know the pieces
When creating a design system, we first took an audit of all the colours, elements and typography currently used within the the platform. Over 33 screens with close to 50 different components were recorded and reviewed. This helped us find redundant or repeated elements, inconsistent colour and typography styles and see what existing UI patterns can be repurposed into the new design system.
Audit all elements within current Cru platform
The foundation
One language
Design systems play a crucial role in upholding standards, encompassing more than just visual elements; they also involve precise terminology. Is it referred to as the 'brand colour' or 'primary colour'? Should we use 'toggles' or 'switches'? 'Workers' or 'resources'?
Following discussions, we identified crucial areas where assigning accurate names to components was necessary. This significantly reduced confusion and fostered unified dialogue about critical project aspects. We also established a basic style guide to loosely define typography, colors, icons, and spacing. This foundation proved essential for guiding our work in a unified direction while allowing room to explore creative design solutions.
The process
Bring it all together
We then take what we have learned from the previous steps to create the new elements.The result is a set of rules and UI kit that when used, reduces inconsistency
The collaboration
Define share language
A design system is a shared language among all teams. Hatch Head facilitated multiple workshops across various teams to ensure that the system was understood and adopted. The development team then created the Storybook component library to facilitate faster and more efficient development, ensuring consistency
