Criação e Documentação de Design System

Detalhes das diversas fases no desenvolvimento de um Design System

Role

Product Designer

Industry

Design, Design Ops

Duration

1 mês (2022)

Etapa 1: Atomic Design

Implementei o conceito de Atomic Design, estruturando átomos, moléculas, organismos, templates e páginas.

Esse método garantiu que as regras fossem claras e consistentes, permitindo escalabilidade sem dependência de estruturas anteriores.

Etapa 2: Matriz R.A.S.C.I.

Defini os papéis de cada integrante no desenvolvimento do Design System utilizando a matriz R.A.S.C.I. Priorizamos uma abordagem colaborativa, onde todos participaram ativamente em todas as etapas, eliminando o papel de “Informado” para maior integração do time.

Etapa 3: Análise de Stakeholders

Conduzi uma análise de stakeholders para compreender o impacto do Design System nos diferentes setores da empresa.

O resultado incluiu análises comportamentais documentadas em tabelas e gráficos, representando visualmente o nível de interesse e poder de cada área em relação ao projeto.

Etapa 1: Atomic Design

Implementei o conceito de Atomic Design, estruturando átomos, moléculas, organismos, templates e páginas.

Esse método garantiu que as regras fossem claras e consistentes, permitindo escalabilidade sem dependência de estruturas anteriores.

Etapa 2: Matriz R.A.S.C.I.

Etapa 3: Análise de Stakeholders

Conduzi uma análise de stakeholders para compreender o impacto do Design System nos diferentes setores da empresa.

O resultado incluiu análises comportamentais documentadas em tabelas e gráficos, representando visualmente o nível de interesse e poder de cada área em relação ao projeto.

Etapa 4: Roadmap de Entregas

Desenvolvi um roadmap baseado no modelo Go Product Roadmap, organizando entregas trimestrais e definindo estágios necessários para cada lançamento.

Etapa 5: Inventário de Componentes

Criei um inventário completo de componentes com base em uma plataforma existente (Dribbble). A complexidade da plataforma exigiu a divisão das tarefas entre os designers.

Utilizamos o Notion para documentar todo o processo, desde a análise até a criação de componentes básicos e complexos.

Etapa 6: OKRs e Publicação Final

Estabeleci OKRs claros para medir o impacto do Design System, incluindo melhorias em princípios do produto, acessibilidade tipográfica, e otimizações de espaços, cores e estados.

Finalizamos o projeto com a publicação do "Olé Design System" na biblioteca online Zeroheight, garantindo acessibilidade a usuários e desenvolvedores.

Resultados

Cada designer selecionou um componente base para criar e trabalhou com dois tipos de tokens para obter uma compreensão mais profunda da criação do Design System.

Definimos de forma colaborativa essa divisão e todos tiveram oportunidade de entender mais sobre o tema.

Clique aqui para acessar o Zeroheight do nosso Design System

Skills utilizadas

Design Systems
Atomic Design
Stakeholder Management
Roadmap e Planejamento Estratégico
Documentação em Notion e Zeroheight
OKRs e Medição de Impacto
Acessibilidade e Consistência Visual

Resultados

Cada designer selecionou um componente base para criar e trabalhou com dois tipos de tokens para obter uma compreensão mais profunda da criação do Design System.

Definimos de forma colaborativa essa divisão e todos tiveram oportunidade de entender mais sobre o tema.

Clique aqui para acessar o Zeroheight do nosso Design System

Skills utilizadas

Design Systems
Atomic Design
Stakeholder Management
Roadmap e Planejamento Estratégico
Documentação em Notion e Zeroheight
OKRs e Medição de Impacto
Acessibilidade e Consistência Visual

Ana Neves

Ana Neves

Ana Neves