SeeDS - Design System

Contexto

O Design System, conhecido como SeeDS, passou por uma reestruturação, com o objetivo principal de atender tanto designers quanto desenvolvedores em um único local.

Minha atuação:

• Estruturar a nova arquitetura de informação para a documentação;
• Definir o tom para a comunicação;
• Refinar todos os componentes com linguagem simples e boas práticas;
• Desenvolver, revisar e aplicar boas práticas de UX Writing na página inicial.

1. Descoberta

O principal ponto identificado na pesquisa é que a documentação estava em diferentes plataformas:

• Figma e ZeroHeight para os designers;
• StoryBook para os desenvolvedores.

Por meio de uma análise das antigas documentações, conseguimos compreender as principais dificuldades enfrentadas pelo nosso público. Além disso, ao considerar alguns feedbacks recebidos, identificamos as expectativas e necessidades dos usuários.

2. Soluções

As soluções foram divididas em etapas específicas:

2.1 Local da nova documentação

Identificamos a necessidade de consolidar toda a documentação em um único local que seja conveniente para todos.

Consideramos os seguintes pontos ao escolher o Docusaurus como plataforma para hospedar o SeeDS:

• Facilidade de acesso;
• Funcionalidade para design e desenvolvimento;
• Organização e manutenção simples.

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

Uma nova arquitetura foi proposta:

• 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.
• Integra novas informações faltantes e que agregam valor ao público.

2.4 Reescrita da documentação e hierarquia da página

Toda a documentação foi reescrita com linguagem clara e simples, se concentrando nos componentes.

A reestruturação foi planejada, considerando, a hierarquia das informações na página.

Agora, as informações estão divididas em abas:

• 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

A página inicial foi desenvolvida em colaboração com o designer responsável e escrita em linguagem simples e objetiva, com o objetivo de acolher nosso público.

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.