Franziska Lorenz

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

+ Show Design Process

Average reading time: 5 minutes (917 words)

What is "Material design"?

_{And why did we decide to use it?}

In its own documentation station, Google describes its design system as follows:

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

Google has developed Material Design to create a consistent visual language for all products. It seems reasonable - they did not want to do the same design work on two different products twice - and they also create a unified Google look that their users can get used to while navigating between Google products.
One of our problems was that many pages, products, functions and user interface components do not suit each other. The apps were designed at different times by different designers and there was no consistent design philosophy and guiding principles. Without specific design principles that everyone had agreed on, a lot of time was wasted explaining design decisions. The user experience suffered from a lack of predictability and consistency.

Collecting sources and inspiration to understand Material Design and how to theme it

The team & my role

Design team: Director of Design, Senior UX Designer and me
Developers: two backend- and two frontend developers

We researched how the material design system works in general and how to customize it for our use. My initial focus was on defining color and typography. Later, I was responsible for creating the component library and documentation.

Goals

minimize technical depth
develop a library that will be used by all our apps in the future
increase the consistency of all our applications for a better user experience
integrate modern visual design trends to make it an enjoyable experience for users
develop reusable components

The styleguide

As inspiration, we used some material based UI kits from companies like Google, Airbnb, Dropbox, Firefox etc. as a visual reference and to understand the latest trends. Adele is a pretty good platform to find different types of documentations.

Adele by UXpin - a Design Systems Repository

Typography

Roboto is currently one of the most commonly used fonts and was also Google's standard at the beginning. We didn't want to overtax our own product and decided to stay with it for now.
We focused on customizing the font definition to fit desktop applications and use more shades, as the standard usage did not do that very well.

Excerpt of our adapted typography definition

Color Palette

The research on how the Google color system works and how it can be adapted to our own wishes was very complex. Staying within the basic principle of the three colors Primary, Secondary and Warn, there are many tools to configure them.

But we wanted to deviate a little and needed a much broader definition of colors, foreground and background shades. Google itself has published some Material studies including color adaptions, but none is well documented enough to easily solve the color topic.

Excerpt of our color palettes

Colour plays a decisive role in the interaction with elements. We had to consider the current user groups when making colour choices and didn't want the surface colours to be too cheesy. Here are some changes we've made:

Primary color
We've turned all the action buttons into a lighter blue.

Accent color
Often one colour is not enough for us and with many interaction elements we have often reached the limit of comprehensibility. We defined a slightly different accent color, not too playful.

Grayscale
In the past, our color system was influenced by black and gray. We've removed the many grayscales and only specified a few ones for foreground, background, separators, and text.

Excerpt of our adapted color definition

Building the Components Library

We didn't suddenly want to change everything fundamentally. So it was important to find a balance between the old styles and the new design system so that the predictability for the users was not negatively affected.
There is already a large base of standard components with many states.
Our frontend team used angular material that brought some - but not all - known standard components.

We analyzed all our apps to create a list of interface elements used. This extensive collection has helped us build a more systematic design system.

We started creating the component library in Sketch to ensure reusability for us designers as well. We took care to optimize the components for use on the desktop. Although much white space makes everything seem a bit more airy, it would cost us too much valuable space for e.g. configuration interfaces.

Excerpt of our component library

Conclusion

How did this help the CWB and all stakeholders?
Product - Today we can build and ship things faster than before. The quality of the shipped product has increased while the shipping time has dropped.
Designer - Creating, sharing, and syncing a rich set of components has become easier and faster. This will also help us to facilitate the transfer of knowledge to the new team members in the future.
Developer - The component library they created helped them to maintain the sanity of code and consistency in the final product.

Another thing I've learned is that you can gather a lot of inspiration from different sources, and that never stops. At a certain point, you first have to put it into practice and then bring in improvements step by step.
The construction of this design system system was very time consuming and there was a lot of back and forth. But it was definitely worth it.

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.

Next project →

Portfolio

About

Say hi