Katerra Design System

A single source of truth for UI, UX, and brand components for a company growing at the speed of light.

Role: Creative Director and Hands-On Designer

PROBLEM

In the past 5 years, Katerra has grown from a small tech start-up with just over 30 employee’s to a disruptive construction tech giant with 8,000+ employee’s and offices and factories in several countries.

With exponential growth in such a short period of time we needed to create a single source fo truth for all UX components for cohesive alignment across all digital touchpoints.

We needed to deliver on the following key objectives:

• Create one single source of truth for UI/UX and brand components. 

• Have to ability to manage and update the design system dynamically, with ease and flexibility.

• Ability to collaborate and share with multiple product teams.

Solution

Through adhering to a specifically defined “what” and “why” behind all of our UI/UX designs we were able to execute a consistant and exceptional user experience across multiple products and teams.

• Leveraging the atomic design approach (atoms › molecules › organisms › templates › pages) we established a comprehensive language around the Katerra design systems.

• We utilized Sketch’s comprehensive ability to build out our design system in combination with Abstract to consolidate, communicate and iterate dynamically with multiple teams and products simultaneously.

Results

The Katerra responsive, custom CMS site was the first product executed leveraging the KDS (Katerra Design System). The system was needed quickly in order to accommodate Katerra’s rapid growth. The system took 3 months in total with 1 lead visual designer (myself), 1 additional production designer, and team of 6 dedicated developers.

High level site metrics:

• Overall sight traffic grew by 60%

• Page view and session rates went up almost 10%

• Bounce rate lowered substantially by 20%

• Click through rate conversion rate was up 10%