Franziska Lorenz—
UX Designer

UI Design system & styleguide

Research & introduction of a design system together with a new style guide based on angular material

Project Type

New feature / Rework

This project was done during my time at ExB.

Introduction

In February 2017, it became clear that our development team would revise the code from ExB's Cognitive Workbench and change it to Angular (Material). We decided to also revise our outdated style guide and introduce a component-based design system.
A well constructed design system can make a big contribution to the success of any major design project. Material design with its guidelines, components and best practices is one of the ways to organize a design system.
I work in a company that mainly employs researchers and developers, but currently not many designers and frontend developers. It was all the more important to rely on a design system because the benefits were obvious:

  • saving time for designers and developers
  • reduced debate - not necessary to waste time reviewing design decisions for the same component
  • reusability of components
  • improved collaboration when talking about paper prototypes

Excerpt from the old style guide

Average reading time: 5 minutes (917 words)

Outcome

Key deliverables of the project were a new general styleguide including standard definitions for e.g. color, typography and paddings / margins and an initial component library.
Based on the implementation of these definitions, a design system was created as a basis for all interface elements of future applications.

It has significantly improved our workflow, product consistency and collaboration across the enterprise.