Design system: Global changes
As a growing start up, Brim rapidly begun expanding its products and services, and soon we faced the need to scale our products consistently and efficiently.
I took the initiative of starting the development of a future-to-be Design System for Brim. Since this was the very initial phase of a library management, we called it “global changes”.
Starting point
After attending a few Design System Community meet ups, it has become clear that there is no cake recipe for creating a Design System. With this in mind, we stablished our goals and used them as our base.
“If actual human beings can’t use the stuff that we build, how is this not a priority?”
George Zamfir
Accessibility Product Manager | Slack (2019)
Focus on A11Y
One of the goals of this project is to make it more accessible by following the WCAG 2 Level AA conformance, which includes design changes in colour contrast, heading levels and keyboard navigation.
Component audit
I started by auditing the current components, identifying potential new ones and analyzing inconsistencies to be addressed. Throughout the way, I noticed that many base components, such as buttons and form fields, had different states throughout the pages. This repetitive issue was easily fixed by having a centralized file (library).
Libraries
The consensus was to have multiple libraries: The Brim Library, which holds all elements that are consistent regardless of the product, such as the brand colours, icons, buttons and interaction states; the Portal Library, where we keep all desktop and mobile components of our Portal; and the App Library, housing of app only components.
Conclusion
Design system is a never ending project, and, even though I portrait only the beginning of Brim's libraries, it allowed the team to focus on what matter to scale fast and consistently.
It also became the base of the PaaS project, which enabled us to work with a foundation and have a head start.