Design system

NIX/Grupo Nexxees e Ottohx/Benner

Resumo: Criar um design system para web e mobile é um processo meticuloso, pois precisa garantir consistência, eficiência e escalabilidade no desenvolvimento de produtos digitais. Irei contar as etapas do processo de criação de design system web e mobile para as empresas Otto e Nix.

Pesquisa e planejamento

- Necessidades: foi necessário compreender as necessidades a serem supridas pelo design system a partir de conversas com product owners e desenvolvedores. Também fiz o mapeamento da presença dos componentes antigos nos produtos web e mobile

- Exemplos: entender boas práticas com base em design systems existentes (Material Design do Google e iOS da Apple)

- Objetivos: melhorar a consistência, aumentar a eficiência do time e adequar os produtos com os princípios de acessibilidade

Princípios básicos

- Identidade Visual: o design system precisa alinhar os elementos visuais do produto com o manual da marca como logotipo, paleta de cores, tipografia, ícones e imagens.

- Princípios de design: as decisões de design precisam estar de acordo com as Heurísticas de Nielsen

Criação de componentes

- Metodologia: utilizei a Atomic Design Methodology como base para os design system que desenvolvi

- Tokens de Design: cores primárias, secundárias, alerta e erro, grids de espaçamentos, tipografia, ícones e sombras. Foram agrupados na categoria Foundations

- Componentes Atômicos: componentes menores e reutilizáveis como botões, inputs, checkboxes, entre outros agrupados como Componentes

- Componentes moleculares e organismos: componentes mais complexos que combinam os componentes atômicos, como tabelas, formulários, modais e menus. Também estão no grupo Componentes

- Patterns: são os grupos de padrões para telas como empty states e erros

Ferramentas utilizadas

- Figma: para criação do design system

- Zeplin: para colaboração entre designers e desenvolvedores.

- JIRA: para gestão de projetos e tarefas

Validação e implementação

- Testes de Usabilidade: foram realizados testes com usuários após a implementação dos componentes do design system.

- Treinamento: apresentei aos desenvolvedores o uso do design system com suas especificidades para ser melhor implementado

- Feedback contínuo: a equipe de desenvolvimento forneceu feedback sobre performance do produto e implementação para ser acompanhado pelo design system com as devidas atualizações

Resultados

- Componentização modular: os componentes foram pensados para serem facilmente modificados conforme necessário.

- Guia de Estilo: foi criada uma documentação de boas práticas, explicando diretrizes de uso.

- Identidade visual: o design system entregou componentes de acordo com o manual de marca, tornando os produtos digitais consistentes com a identidade visual

- Biblioteca de Componentes: foi criada uma biblioteca de componentes para diferentes status, incluindo botões primários, secundários, hover, além de formulários, tabelas, gráficos, etc.

- Acessibilidade: os componentes estão em conformidade com os padrões de acessibilidade (WCAG)

- Eficiência: os design systems aumentaram significativamente a eficiência do desenvolvimento e melhoraram a experiência do usuário, proporcionando consistência e acessibilidade nos produtos