A Prontmed é uma empresa de tecnologia na área da saúde, sendo uma das maiores organizadoras de dados clínicos do Brasil, ajudando milhares de profissionais de saúde, milhões de pacientes e dezenas de instituições.
GOBAN é o nome do Design System da Prontmed. Seu nome vem do tabuleiro do jogo "Go", um jogo milenar chinês que é considerado um dos mais profundos e complexos do mundo. O logotipo do Goban faz alusão às peças do jogo e às 4 elípses presentes no logotipo da Prontmed.
O tabuleiro pode ser entendido como "grid", pois é nele que todas as peças (elementos do Design System) ficam. Essas peças mudam constantemente, mas sempre dentro do grid (ou do Goban).
O Design System foi construído para atender às necessidades dos produtos da empresa, como Prontuário Eletrônico, Aplicativo, Plataforma de Pacientes, Dashboard para médicos e Backoffice.
A ideia de criar um Design System partiu da necessidade de dar maior vazão para a produção de layouts e agilidade nas entregas, trazendo consistência e unidade a todo o ecosistema Prontmed.
...
Goban em números
Números e resultados estimados alcançados com a implantação do Design System.
...
Design Tokens
A definição das cores globais e a criação dos Design Tokens foi, sem dúvida, a etapa mais importante para dar velocidade à produção de componentes e telas.
...
Biblioteca de componentes
Com um time bastante enxuto e não dedicado a apenas à construção do Design System, os elementos eram construídos de acordo com necessidades de demandas específicas, definindo prazos e apresentações de entregas em cerimônias semanais (Weeklies).
...
Botões
Os botões foram contruídos de forma ainda bastante trabalhosa, antes mesmo da implantação do novo recurso de variáveis do Figma. Este mesmo trabalho também foi feito em outro produto, com diferenciação do border radius e cor de ação principal (Action).
...
Documentação
A documentação era parte da entrega de cada componente, sendo consultada por todas as pessoas envolvidas no produto.
Junto a cada board, nós designers, disponibilizamos links que direcionavam o time à página em questão do Storybook, com o componente em produção.
...
Status da construção dos componentes
Junto com a documentação, criamos uma página no Figma para dar visibilidade a todos os interessados em consultar a evolução da construção dos componentes no decorrer do tempo.
Criamos também uma componentização na simbologia de status para facilitar a atualização.
...
Aplicação nas interfaces
Uma pequena amostra das interfaces com alguns dos componentes do Design System aplicado.
...
Ficha técnica
Empresa Prontmed
Segmento Tecnologia na área da saúde
Design System Goban
Designers Marco Moreira, Camila Padovan e Charles Rony
Front End Hugo Cirarelli e Jorge Hecherat
