SeeDS - Design system
Contexto
O Design System SeeDS foi reestruturado com o objetivo principal de unificar designers e desenvolvedores no mesmo ambiente. Antes, a documentação estava fragmentada em diferentes plataformas, dificultando a manutenção e o acesso.
Minha atuação
- Estruturação da nova arquitetura de informação da documentação;
- Definição do tom de voz e estilo de comunicação;
- Refinamento dos textos de todos os componentes e seções com linguagem simples;
- Desenvolvimento e revisão dos textos da página inicial.
1. Descoberta
Durante a análise inicial, identificamos que o conteúdo estava em diferentes plataformas:
- Figma e ZeroHeight para designers;
- Storybook para desenvolvedores.
Essa fragmentação gerava inconsistências e duplicações. A partir de uma desk research e da coleta de feedbacks, mapeamos as principais dificuldades e expectativas dos usuários.
2. Soluções
As soluções foram divididas em etapas específicas:
2.1 Local da nova documentação
O primeiro passo foi consolidar todo o conteúdo em um único local. Após análise técnica e de usabilidade, o Docusaurus foi escolhido como a nova base para o SeeDS por oferecer:
- Facilidade de acesso e navegação;
- Funcionalidades para design e desenvolvimento;
- Estrutura de manutenção simples e colaborativa.
2.2 Definir o tom e voz
Com base nos pilares de voz da empresa, ajustei o tom para atender às necessidades do público:
- Somos um equilíbrio entre o entusiasmo e a praticidade;
- Somos irreverentes, sem perder a clareza das informações;
- Somos casuais na medida certa;
- Um pouco engraçados, mas sem exagerar.
2.3 Arquitetura da informação
Propus uma nova estrutura de navegação, que tornou a documentação mais intuitiva e eficiente. A organização passou a ser dividida por temas e fluxos, priorizando a busca rápida por informações.
Principais melhorias:
- Inclui mais divisões dos assuntos, tornando mais fácil encontrar informações
- A proposta une categorias e direciona as informações conforme os assuntos.
2.4 Reescrita da documentação e hierarquia da página
Toda a documentação foi reescrita com linguagem simples e objetiva, focando nos componentes e suas aplicações práticas. A hierarquia da informação foi reorganizada em abas específicas, permitindo ao usuário acessar o conteúdo conforme sua necessidade:
- Design: informações relacionadas ao design dos componentes.
- Como usar: orientações sobre como utilizar o componente com o contexto de aplicação.
- Desenvolvimento: informações específicas sobre como implementar e trabalhar com o componente.
- Acessibilidade: boas práticas relacionadas à acessibilidade.
2.5 Textos da home page
O foco da página é destacar o valor que podemos agregar.
- O header inclui os principais tópicos, juntamente com os cards abaixo do logotipo, com uma breve explicação sobre cada assunto;
- Apresentamos dados relevantes e a história sobre a origem do SeeDS para demonstrar importância;
- Também destacamos os valores da equipe em outras ações.
Resultado
A reestruturação do SeeDS resultou em um Design System unificado, acessível e colaborativo, atendendo igualmente designers e desenvolvedores.
🔨 Ferramentas
-
Figma
-
Docusaurus
-
Inboarding