Design System

development of a design system and design definitions for an entire web-app with multiple functions

A few months before joining the company, Fairmas started the redesign and improvement of their web-based solution, including the development of a design system.

Background

With the expansion of existing products and the development of new ones, it became clear a more systematic way of designing was needed. This need was spotted by the previous designer in the company, who created a first system based on Google’s Material Design principles.

Understanding the problem

As I started working with the existing system, and with a continuous adapting of old sites to the new design, new challenges emerged.

Even though the available system defined most of the components needed by the application, how each of them related to one another had not been specified. Some of them needed adjustments to be easier to translate into ReactJS.

Unifying the design system

In order to create a unified range of products, I started by doing an audit of the available and missing definitions. This resulted in several tasks. Some of these were:

The entire system is based on Google’s Material Design. This offers a few advantages:

The design language constantly evolves

Results and takeaways

Documentation is key.  The system should be clear to use and understand for every new designer or programming joining the company

Where the system is developed can be crucial. Though Sketch is a great tool to design, sometimes the updates complicate the maintenance of the library.