development of a design system and design definitions for an entire web-app with multiple functions
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.