Sobre a empresa e o projeto
A Leve Saúde é um plano de saúde que nasceu durante a pandemia, no Rio de Janeiro, e é focado no público acima de 45 anos. Os 3 pilares da Leve Saúde são: rede própria, atenção primária à saúde e digital health.
Com a construção do novo aplicativo da Leve e com a previsão de diversos novos produtos digitais, surgiu a necessidade de criarmos um design system para apoiar todos esses projetos, garantindo escalabilidade, consistência visual e apoiando o crescimento da marca de maneira ordenada.
Esse design system começou a ser construído no Figma de forma paralela ao projeto do aplicativo, principalmente de acordo com as necessidades desse projeto mas com foco em escalabilidade e responsividade para outros dispositivos e sistemas.
1. Fundação
Para iniciar os estudos do design system, procurei primeiro entender as diretrizes atuais de branding, incluindo cores, tipografia e variações de logo. Além disso, estudei o site atual para entender qual era a linguagem visual para o digital que estávamos seguindo até então. Com esses materiais em mãos, criei os componentes de logo e design tokens de cor, tipografia, borda, espaçamento e sombra.
2. Iconografia
Para definir a nossa iconografia, utilizei uma biblioteca aberta gratuita para os ícones gerais (Feather Icons) e adicionei alguns ícones complementares específicos para o nosso contexto, como os relacionados a saúde. Escolhi ícones neutros e com formas simples para que fossem compreensíveis em telas menores e também fossem escaláveis para os demais produtos.
3. Componentes
Os componentes foram criados em paralelo ao projeto do novo aplicativo, porém, já pensados em alimentarem também outros projetos, como o Portal do Beneficiário, que é um projeto web responsivo. Todos eles foram desenhados para serem flexíveis e se adaptarem à necessidade de cada interface, adaptáveis aos diferentes tamanhos de tela e com todas as variações necessárias no handoff para os desenvolvedores.
.png)
4. Documentação de componentes
Ao final do desenho de cada componente, foi o momento de documentar todos os seus casos de uso e especificações técnicas. Essa etapa possibilita que outros designers da companhia façam o uso daquele componente como foi pensado a princípio, mantendo a mesma lógica nas interfaces de todos os projetos para não gerar nenhum tipo de confusão nos usuários.
.png)
5. Próximos passos
Com base na fase em que estamos, os próximos passos para a evolução desse projeto (e o nascimento do nosso Design System) seriam:
- Complementá-lo com diretrizes de branding, conteúdo e acessibilidade;
- Evoluir os tokens e componentes, como por exemplo, dividir os tokens de cores entre primitivos e semânticos, incluindo o tema dark e complementando a documentação;
- Escolher nome para o Design System final através de votação interna;
- Documentá-lo de forma online onde todos os desenvolvedores e designers possam consultar especificações, guidelines e pré-visualizar componentes;
- Definir métricas a serem acompanhadas para medir resultados do projeto;
- Definir um processo para lançamento de novas versões e permanecer em evolução contínua do produto.
