HDI Insurance Design System

Cliente / Produto

HDI Seguros (via Sysmap Solutions)

Período

Abr 2020 — Jul 2021

Papel

Núcleo do Design System

Contexto

Modernização da plataforma de seguros, com o Design System como base compartilhada entre as squads de produto.

Time

Núcleo do Design System, atendendo múltiplas squads de produto.

Tecnologias

Angular 12TypeScriptStorybookNode.jsBFFJenkins

Produtos de seguros carregam formulários densos, textos regulados e telas de vida longa. Sem um sistema compartilhado, cada squad desvia — e o desvio se acumula em retrabalho que ninguém planejou.

• —Definir primeiro o contrato do componente — API, estados e acessibilidade — antes de estilizar qualquer coisa.
• —Documentação em Storybook como fonte única de verdade, para que a adoção nunca dependesse de conhecimento tribal.
• —Angular 12 com inputs e outputs tipados, transformando uso indevido em erro de compilação em vez de relatório de bug.

• —Mais de 15 componentes construídos e documentados em Storybook, cada um com estados e orientação de uso.
• —Camada BFF em Node.js alimentando as interfaces com dados já moldados para a tela.
• —Pipeline Jenkins entregando a biblioteca e sua documentação em conjunto.

• Mais de 15 componentes documentados adotados como linguagem de interface compartilhada da plataforma.
• Menos retrabalho e menos redecisões por squad — consistência deixou de depender de quem construía a tela.

Um design system é adotado pela documentação, não pelo código. Os componentes foram a parte fácil; o trabalho foi tornar as decisões legíveis para todo o resto do time.