Cru Software 

Creating a Design System to bring features to market faster
UI Design
Design System

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?

A collection of the original elements that were audited

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.

A collection of the original elements that were audited

2. Define the naming conventions

A shared language between all element and team members

We then consolidated, grouped and named the colours and shades.

A collection of the original elements that were audited

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.

The Hatch head team performing a workshop