KISTERS Design System

Design Ops UI/UX

December 1, 2017

KISTERS is a company which has been building software for the water industry since 1985. With a team of over 500 employees worldwide, it is one of the leading companies in the field. As their first in-house designer working with a team of engineers, there was a need for me to create an overarching design system which could be used to form a wide range of web products into a family.

I was responsible for creating a design system in Sketch of dozens of components and implementing it both as a sketch library and as a UI library based on Dojo components within the KISTERS portal, bridging the gap between design and development.

Task

Designing and implementing a design for KISTERS web products

Strategy

Design Ops
Design

Design System, UI Design
Client

KISTERS AG
Tools

Sketch, CSS, HTML

Design systems on the web have mainly emerged from larger organisations such as Google, Atlassian, or IBM. Used at scale and as a single source of truth, these systems are a necessity, used by thousands of designers and engineers. Without them, building consistent software is infeasible.

In the case of the smaller development team at KISTERS however, without the resources to create a complete design system from scratch, its purpose and scope was different. The design system should build off components already in use, break down the barriers between design and development and be further developed over time in a leaner process. When working with limited resources, it is crucial to know which actions will make the largest impact and to break down any barriers between team members.

KISTERS product colours, based on the KISTERS brand colours

Beginning with Design Tokens

Design token – known from the concept of atomic design – such as colour, typography, iconography and spacing represent the core visual language of any design system. These are used by engineers to create new components, are quicker to produce than a complete UI component library and can make a large difference in how the product is perceived. We used them to form a basis for the design system.

Being in the niche industry of water management, there was a need for specialised iconography to show concepts such as “Water Level”, “Discharge”, or “Dam”. In order to show these concepts, as well as more general icons in a visually consistent way, I created an icon set containing over 250 icons and embedded as an icon-font within the KISTERS portal.

After creating the core of the visual language, I extended it with essential elements such as forms, buttons, and labels, as well as more complex components like calendars, tables, maps, and graphs.

Bridging the gap between design and development

Design Systems are only useful when they’re actively maintained and can be easily consumed by anyone working on the product.

KISTERS’ design system was built in Sketch. Importantly, it’s kept in the team library, allowing us to push any updates live to all members of the design team, keeping everyone up to date. Design projects at KISTERS are documented in Invision which supports prototyping and code snippets. When combined with the living design library, these two features help immensely in bridging the gap between designers and engineers

In addition to the sketch library, used by the design team, I have built the KISTERS design system into a UI library based on Dojo components. This living UI library is used by the developers in all current products and product redesigns.

With the creation and implementation of the design system, both in Sketch and as a UI library, I was able to empower everyone in the design and development process to confidently and more rapidly build and launch new products that are consistent with the KISTERS visual language.

Back