Having set up our Design System, which specifies the look and feel of different elements, we could give our developers a starting point and support for implementing new features and solutions. Now they do not need to waste time on thinking how a specific element should look and behave like.
Yet we planned to go even further and decrease the development time even further; following the atomic design we started creating a set of commonly used web components (individual encapsulated HTML elements), which were not only designed and documented but also developed – i.e. functioning.
These components are being implemented and delivered by a small team of developers and can be used straight out of the box. Having no external dependencies, being included in a single package and providing semantic versioning to better manage breaking changes and backward compatibility, the components are a no-brainer to be immediately integrated anywhere.
Now developers from different teams can take those components out of the box and integrate them into their projects whenever they implement new solutions. In turn all projects use the same components, which makes our products look and feel in a same way.
The process of creating those components is very structured and fluent: Developers pick a component documented in the Design System, implement and test it. The components are ready to be reviewed by the designers in Storybook. Once finished the stories from Storybook will be integrated into the Design System, so it is always up to date even if there are adjustments in the code.
This final step reveals even more benefits to our designers, developers and our products:
1) designers and developers don’t need to waste time questioning how an element should look and feel like
2) developers can avoid writing the same code again and again for different products
3) components can be updated independently and latest update can be distributed to all products using these components
4) developers gain more time for testing, experimenting, learning new things …
5) products are stable
6) products can be delivered faster
