At idealo flight department we needed to introduce a design system. The engineers were implementing on a design to design basis and massive inconsistencies were showing on both the development and UX side.
I led this project alone whilst remaining in close contact with our engineers, giving them updates along the way of the progress of the project. I also had to exchange with idealo’s branding department to ensure that our product design system was coinciding with the shopping product and their already existing guidelines.
I did not have full freedom to choose an array of new colours and text styles, seen as these were already predetermined by idealo’s brand department but due to the fact we are another product we did have the freedom to deviate from predetermined brand assets when absolutely necessary.
I started by ideating a name for the design system that is individual to our team. I settled on ‘Wingspan’ owing to it’s connection to flight and span being a html container element.
I then held meetings with the engineers in which we discussed what would be beneficial to them to be contained in the design system.
I decided to provide Wingspan in 3 nested libraries:
Tokens are the core style assets such as colours, text styles, spacing and shadows.
Elements are the typical UI building blocks that will be consistently used such as radio buttons, checkboxes, input fields and buttons, pulling their core style from the Tokens library.
Components are full blocks of elements that make an entire row or column in the webpage such as the navigation bar or the search form.