Hatch: Building the first design system for a growing brand

UX/UX, Design Systems

As Director of Design Systems at Hatch for almost three years, I led the implementation of Cloud 9, Hatch’s design system. This was my first attempt at creating a design system from scratch, and it involved integrating it into an application that had been on the market for over seven years. Starting with a legacy application required a thorough audit of the existing styles in production. The team and I delved into the iOS and Android codebases, discovering over 100 colors and numerous unused type styles.

Our first major success was implementing a new color scale of navy blues. Transitioning from hundreds of colors to our new scale involved designing a detailed transition guide for both native platforms, ensuring a smooth and safe shift. This achievement laid the foundation for a unified design language at Hatch. We then applied the same process to standardize type, buttons, form elements, and other common components across all platforms.

The establishment of Cloud 9 was an important milestone, setting Hatch on a path of design consistency and clarity. Today, Cloud 9 continues to grow and evolve with Hatch, and I take immense pride in the work we did.

Cloud 9
Cloud 9
Cloud 9
Cloud 9
Color
Color
Color
Color
Type
Type
Type
Type
Buttons
Buttons
Buttons
Buttons
Tables mock up
Tables mock up
Tables mock up
Tables mock up
Home screen mock-up
Home screen mock-up
Home screen mock-up
Home screen mock-up

Have a project?
Let’s work together.

© 2024 Barry Lachapelle Design Inc.

Have a project?
Let’s work together.

© 2024 Barry Lachapelle Design Inc.

Have a project?
Let’s work together.

© 2024 Barry Lachapelle Design Inc.

Have a project?
Let’s work together.

© 2024 Barry Lachapelle Design Inc.