Design System

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

Helping Fairmas, a 360° hospitality financial BI solution, consolidate its products and grow as one

Background

A few months before joining the company, Fairmas started the redesign and improvement of their web-based solution. With the expansion of existing products and the development of new ones, it became clear a more systematic way of designing was needed. This led the company to create a first component library based on Google’s Material Design principles.

Understanding the problem

As I started working with the existing library, 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, most 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.