DESIGN SYSTEM FOR WHAT?
Why we decided to build our own design system?
This is the first story of our Design System series. You can check our second and third story.
Since the beginning of Bridge Lab until today, we have just grown. We developed six major products and went from less than 30 employees in 2013 to 118 in 2019. We saw the Lab, the team, and the design being scaled.
But as design maturity increased, we noticed the lack of processes needed to deliver ever better products and realized that we needed to change our way of working.
Until then, whenever a new project came up, we would build and develop a new style guide on demand. The same problems came up, but each project had its own component style to solve them and it wasn’t possible to scale the design easily.
When we applied a component to an interface, another designer or developer could change it, creating multiple component styles for the same function. After a few months, and many hours of work focused on solving problems that were already fixed, we had over 10 styles ready with the same function.
As we analyzed our systems, we noticed many inconsistencies of components, language patterns and that they were not accessible. So we set goals and started process changes to ensure design scaling.
As our Lab is composed of professionals from different areas, we wanted to bring the design, analysis and development teams closer together so that everyone could contribute to the project at all stages. Multidisciplinary teams were essential, so that everyone was always aligned and building together.
Why having an accessible Design System matters — and how to built one
Therefore, we decided to build a design system that was:
- Used in all our web projects
- Accessible to the outside public
- Fully focused on usability.
We structured the building in 7 steps: the study of usability standards; component listing; project requirements analysis; reference search; study of accessibility requirements; component construction; and finally the documentation. And like that, bold was born.
(In our second article, we talk about these building steps and how you can use them to build a design system!)
As we were starting a project from scratch, we joined forces and put the design system into practice.
The perfect opportunity to define the real need for the components was when we began to redesign the Citizen’s Electronic Medical Record (Prontuário Eletrônico do Cidadão, PEC), one of our projects to the Ministry of Health, focused on the collection and storage of the citizen’s basic health clinical data from Brazilian public health. So we started applying the design system while it was still under development. In this process, we had opportunities to improve components more clearly and could make our product even more accessible and consistent.
Bold is an accessible and open source design system.
So you can create issues if you find bugs, suggest improvements, and use it in your projects to build great user experiences! You can access more information on our website.
So tell us: what did you think of bold? :)
This is a translated story. You can see the original story.
. . .
The Bridge Laboratory operates at the Technological Center of the Federal University of Santa Catarina (UFSC), with teams formed by graduate students, hired professionals and mentoring teachers. Since 2013, we have developed systems and applications in partnership with the Ministry of Health and the National Health Surveillance Agency — Anvisa.
