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.