Prontmed is a health technology company and one of the largest clinical data organizers in Brazil, supporting thousands of healthcare professionals, millions of patients, and dozens of institutions.
GOBAN is the name of Prontmed's Design System. The name is inspired by the board used in the ancient Chinese game Go, which is considered one of the most profound and complex games in the world. The Goban logo references the game pieces and the four ellipses featured in Prontmed's logo.
The board can be understood as a "grid," as it serves as the foundation where all the pieces (elements of the Design System) are placed. These pieces are constantly evolving but always remain within the grid—or the Goban.
The Design System was built to meet the needs of the company's products, such as the Electronic Health Record, Mobile App, Patient Platform, Dashboard for Physicians, and Backoffice tools.
The idea of creating a Design System arose from the need to streamline layout production and accelerate delivery times while ensuring consistency and unity across the entire Prontmed ecosystem.
Goban in numbers
Estimated numbers and results achieved with the implementation of the Design System.
Design Tokens
The definition of global colors and the creation of Design Tokens was the most important step in speeding up the production of components and screens.
Component Library
With a lean team not dedicated solely to the creation of the Design System, the elements were built based on the needs of specific demands, with deadlines and delivery presentations defined in weekly ceremonies (Weeklies).
Buttons
The buttons were built in a rather labor-intensive way, even before the implementation of Figma's new variables feature. This same work was also done in another product, with differentiation in border radius and the main action color (Action).
Documentation
The documentation was part of the delivery for each component and was consulted by everyone involved in the product.
Along with each board, our team provided links that directed the team to the relevant page in the Storybook, featuring the component in production.
Along with each board, our team provided links that directed the team to the relevant page in the Storybook, featuring the component in production.
Component constrution status
Along with the documentation, we created a page in Figma to provide visibility to all those interested in tracking the evolution of the component construction over time.
We also created a component-based status symbol system to make updates easier.
We also created a component-based status symbol system to make updates easier.
Application in Interfaces
A small sample of the interfaces with some of the components of the Design System applied.
Ficha técnica
Company Prontmed
Industry Health Technology
Design System Goban
Designers Marco Moreira, Camila Padovan, and Charles Rony
Front End Hugo Cirarelli and Jorge Hecherat
Industry Health Technology
Design System Goban
Designers Marco Moreira, Camila Padovan, and Charles Rony
Front End Hugo Cirarelli and Jorge Hecherat
