Bem+ Benefícios
Os benefícios do trabalhador,
num só app
Saúde, assistências e descontos para você e sua família, sempre no celular.
Product Design · OpenCircle · 2022
Sobre o projeto
Um app de benefícios e o design system por trás dele
Em 2022, desenhei o app da Bem+ para que a inclusão de dependentes chegasse a quem nem sabia que ela existia. Para isso, levei a inclusão para o primeiro acesso, o único momento em que todo trabalhador passa pelo app. O design system nasceu junto com essas telas, mas sem documentação, e não se sustentou. Em 2026, revisei o projeto por iniciativa própria com IA e, em cerca de 4 dias, a biblioteca ganhou 38 componentes documentados e nenhuma cor de texto reprovada no contraste.
- UX
- UI
- Design System
- Design Tokens
- Documentação
- Acessibilidade
- IA aplicada ao design
- Projeto
- Bem+ Benefícios · App mobile
- Setor
- Benefícios corporativos
- Papel
- Product Designer
- Período
- 2022 (projeto) · 2026 (revisão para o portfólio)
- Ferramentas
- Figma, Claude e Midjourney
- Protótipo
- Acesse o protótipo
O produto
Do acordo coletivo ao celular do trabalhador
Os benefícios são negociados entre o sindicato e as empresas do setor, e cada empresa os oferece aos seus funcionários pela Bem+. No app, o trabalhador consulta seus benefícios, apresenta a carteirinha digital, encontra onde usar na rede credenciada e inclui os dependentes.
O desafio de design
Segundo o cliente, na maior parte das vezes o trabalhador não sabia que podia incluir dependentes, porque o RH não comunicava. Cada dependente aumenta a receita da Bem+, então a inclusão precisava ficar visível no app.
2022 · OpenCircle
Um design system feito no ritmo da entrega
Criei os fundamentos (cores, tipografia, espaçamento, sombras e bordas) e fui adicionando componentes conforme cada tela pedia. As variables do Figma só chegaram em 2023, por isso cores, textos e sombras ficaram em estilos.
O que eu faria diferente
Comecei a estudar design tokens para usar na empresa, mas não consegui levar a proposta adiante. Hoje eu começaria por um piloto com um componente e um dev, para mostrar o ganho antes de propor ao time todo.
Depois da entrega
Sem regras de uso, a biblioteca se desfez
Nenhum componente explicava quando usar, quando não usar ou como aplicar. Ao revisar o projeto para este case, encontrei componentes desvinculados nas telas e cores aplicadas em HEX, fora dos estilos.
O que mudou no meu processo
Hoje, começo um design system por um PRD com escopo, padrão de nomes e critérios de aceite, e cada componente já sai com anatomia, regras de uso e exemplos do que não fazer.
2026 · Revisão
Antes de mexer nas telas, auditei o que existia
Com o Claude e o MCP do Figma, auditei os componentes do DS original antes de reorganizar a biblioteca e migrar o app.
0 de 46
componentes com descrição
Nenhum componente explicava anatomia, quando usar ou quando não usar.
5
padrões de nome
Prefixos bem., bb., base., bm. e nomes sem prefixo convivendo na mesma biblioteca.
13
cores de texto reprovadas
Combinações abaixo do WCAG AA em badges, campos, abas e cards. A pior tinha 2,18:1.
32 px
de alvo de toque
O chip do menu de categoria ficava abaixo dos 44 px recomendados para toque.
Auditoria feita com Claude e o MCP do Figma nas páginas de componentes do arquivo original. Contraste pelo WCAG 2.2 AA, sem contar estados desabilitados.
Método
Como dividi o trabalho com a IA
Com as regras definidas no PRD, o Claude cuidou da execução em escala no Figma, e eu fiquei com as decisões e a revisão.
- 1
Reconstruir a biblioteca
Eu decidi
Escopo, padrão de nomes e critérios de aceite no PRD, tokens em duas camadas (primitivo e semântico) e as regras de uso de cada componente.
O Claude fez
Aplicou no Figma o que estava no PRD: variáveis, componentes e o frame de documentação de cada um.
- 2
Migrar as telas
Eu decidi
Revisão da copy e ajustes de alinhamento e espaçamento para seguir os tokens.
O Claude fez
Trocou componentes e cores antigos pelos da nova biblioteca, fluxo a fluxo.
Revisei tela por tela tudo o que foi substituído.
Resultado da revisão
O que mudou na biblioteca
Medi a biblioteca nova com os mesmos critérios da auditoria do arquivo original.
038
componentes com documentação
51
padrão de nomes (bem.)
130
cores de texto reprovadas no WCAG AA
3244 px
de alvo de toque no chip
Biblioteca Bem+ Design System · Mobile, medida com Claude e o MCP do Figma: 40 componentes e 385 textos avaliados. Contraste pelo WCAG 2.2 AA, sem contar estados desabilitados.
Decisão de produto
A família entra no primeiro acesso
Problema
Segundo o cliente, o trabalhador não sabia que podia incluir dependentes, porque o RH não comunicava.
Decisão
Propus incluir dependentes no primeiro acesso, o único momento em que todo trabalhador passa pelo app. O cliente aprovou.
Trade-off
A etapa pode ser pulada em "Agora não", e a inclusão continua disponível na aba Dependentes.
Onde discordei do cliente
O cliente pediu um botão fixo de inclusão na home. Argumentei que a ação é rara e que a aba Dependentes já leva ao fluxo, e propus banner, pop-up, push e uma régua de comunicação. O cliente manteve o botão.
1 · Primeiro acesso
2 · Empresa sem plano para dependentes
3 · Revisão do cadastro do dependente
Componente novo
Em que passo eu estou?
O fluxo de alterar senha não mostrava em que etapa a pessoa estava. Criei o bem.step-header, com o texto "Passo 1 de 2" para o progresso não depender só da cor, e apliquei nos quatro fluxos em etapas do app.
Uma tela a menos
Tirei a tela de escolha entre SMS e e-mail, porque quase ninguém precisava escolher. O código vai por e-mail, e o SMS fica como alternativa na mesma tela.
O app · revisão 2026
As telas do app
Ao migrar as telas para a nova biblioteca, troquei as ilustrações antigas por outras geradas no Midjourney e mantive as fotos dos benefícios.
Abertura
Rede credenciada
Boas-vindas
Assistência Natalidade
Ilustrações feitas no Midjourney
Fundamentos e tokens
Cada cor tem nome e lugar
Os componentes só usam tokens semânticos, que apontam para os primitivos. Para trocar a cor da marca, basta alterar um valor.
Como os nomes são lidos
Primitivo
Guarda o valor
colorcategoria/primaryfamília/900tom→#64296E
Semântico
Diz onde a cor entra
colorcategoria/bgonde entra/brandpapel→aponta para primary/900
Componente
Usa o token semântico
bemprefixo da marca.step-headernome do componente→fundo em color/bg/brand
01 · Cor
Nenhuma cor de texto da biblioteca fica abaixo do WCAG AA no fundo em que é usada.
Primária · roxo
- 50#FBF6FD
- 100#F6EBFC
- 200#EED6F8
- 300#E3B6F1
- 400#D38BE7
- 500#BC5ED7
- 600#A23EBB
- 700#88319A
- 800#702A7E
- 900#64296E
- 950#3C0E44
Secundária · magenta
- 50#FCF3F8
- 100#FBE8F4
- 200#F8D2EA
- 300#F4ADD8
- 400#EC7ABC
- 500#E252A0
- 600#D03280
- 700#B42266
- 800#9F215A
- 900#7D1E49
- 950#4C0B28
Neutra · cinza
- white#FFFFFF
- 50#FDFDFD
- 100#F7F7F7
- 200#F5F5F5
- 300#F1F1F1
- 400#E5E5E5
- 500#C3C3C3
- 600#A5A5A5
- 700#7B7B7B
- 800#676767
- 900#262626
Feedback · sucesso, aviso e erro
- 100
- 200
- 300
- 400
- 100
- 200
- 300
- 400
- 100
- 200
- 300
- 400
02 · Tipografia
Cada estilo leva o nome da função, como text/body e text/label, então o texto é escolhido pelo papel que cumpre na tela.
Roboto
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 àáâãçéêíóôõú
- Regular 400
- Medium 500
- Bold 700
- text/heading · 36 pxSeus benefícios
- text/subheading · 27 pxAssistência Natalidade
- text/overline · 21 pxIncluir dependentes
- text/body · 16 pxTeleconsulta com clínico geral, sem sair de casa.
- text/label · 12 pxVigência 23/11/2022
03 · Espaço
A mesma escala vale para margens, paddings e espaços entre elementos. Na migração, foi ela que alinhou o conteúdo das telas.
- 4
- 8
- 16
- 24
- 32
- 40
- 48
- 64
- 80
04 · Raio
- subtle6 px
- container8 px
- xl32 px
- pill999 px
05 · Ícones
Biblioteca e documentação
A documentação nasce junto com o componente
Os componentes do app ficam numa biblioteca única, com variantes, estados e documentação de uso.
40 componentes
com variantes, estados e regras de uso
01
Botão
Dispara a ação principal da tela. Três variantes, quatro estados e ícones opcionais à esquerda e à direita.
- Aplicação
- Anatomia
- 1Contêiner: 48 px de altura, raio radius/control, padding horizontal de 24 px.
- 2Ícone à esquerda (opcional): 20 px.
- 3Rótulo: text/body/regular, uma linha, com verbo de ação.
- 4Ícone à direita (opcional): 20 px.
- Quando usar
Quando usar · Para a ação principal da tela (pagar, continuar, confirmar). No máximo uma primary por tela.
Quando não usar · Para navegar entre telas (use link) nem para ações destrutivas sem uma confirmação antes.
Aprendizados
O que levo deste projeto
1Medir antes de decidir
Duas decisões se apoiaram só em argumentos. Hoje eu combinaria com o cliente o que medir antes de fechar cada uma.
Botão de novos dependentes na home
Sem dados, não consegui mostrar que o botão teria pouco uso. Eu mediria o botão por alguns meses contra a aba e o primeiro acesso.
O que eu mediria
- Toques no botão
- Cadastros iniciados pelo botão
- Cadastros iniciados pela aba
- Novos dependentes no primeiro acesso
Canal do código
Tirei a escolha entre SMS e e-mail sem medir. O próximo passo é comparar a conclusão nos dois canais e deixar o melhor como padrão.
O que eu mediria
- Conclusão por e-mail
- Conclusão por SMS
- Troca de canal na tela
2A IA no trabalho repetitivo
Com o Claude e o MCP do Figma, auditoria, migração e documentação levaram cerca de 4 dias. A IA executou em escala, e as decisões e a revisão ficaram comigo.
Auditoria
Encontrou 5 padrões de nome e 13 cores de texto reprovadas, algo difícil de contar à mão.
Padronização
Trocou componentes desvinculados e HEX solto pelos componentes e tokens da biblioteca nova.
Documentação
A documentação saiu junto com cada componente, sempre no mesmo roteiro.
Obrigada pela leitura
Veja outros projetos aqui no portfólio ou fale comigo pelo LinkedIn.