Cru Software
Scale design in an engineering lead team
Cru software is a rostering system for large scale workforces
While pivoting to a SAS model, the product team were tasked with improving the UI across the platform to make it easier to use as well as consistent across features.
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.
Building a design system
Part designer, part engineer, what does it take to create a design system?
Where do we start?
We find out where we are
When creating a design system, we first took an audit of all the colors, elements and typography currently used within the the platform.
This helps us find redundant or repeated elements, inconsistent color and typography styles and existing ui patterns that can be repurposed into the new design system.
2. Define the naming conventions
A shared language between all element and team members
We then consolidated, grouped and named the colours and shades.
3. Bring it all together
Using the rules to create new elements
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
Bridging the gap between teams
Rolling out the Design System to product and development teams is a critical step in the process.
A design system is a shared language between all teams. Hatch Head facilitated multiple workshops across the various teams to ensure that the system was understood and adopted.
We also collaborated with the development team to create the Storybook component library to make sure that the developer experience was seamless when using the design system.
