Construção, adaptação, e evolução do Senior Design System
O Senior Design System (SDS) tem sido um dos meus maiores desafios em 10 anos de experiência com Design. Fui contratada para organizar o sistema que estava sem atendimento há meses e criar um novo produto para atender aos novos aplicativos da empresa.
Objetivos
Quando meu gestor me apresentou o design system da empresa, tínhamos uma versão para aplicações web que estava sem atendimento há um bom tempo e estava defasado, e precisaríamos criar uma versão nova, para aplicações mobile. Foram apresentados os seguintes objetivos:
- [WEB] Atualizar a plataforma — do Confluence para o Zeroheight (atualizando todo o conteúdo que já existia);
- [WEB] Refatorar TODOS os componentes que eram criados inicialmente no Adobe XD para a Figma;
- [WEB] Reorganizar todos os processos de solicitação dos times de produto;
- [WEB] Refatoração e reorganização de estilos padrões da biblioteca;
- [MOBILE] Criar novas bibliotecas na Figma e guias no Zeroheight que fossem similares ao produto Web e que atendessem a demanda já em atraso dos aplicativos mobile;
- [MOBILE] Realizar curadorias dos produtos que nasceram sem um guia de estilo ou design system e mapear as similaridades e problemas em cada um;
- [AMBOS] Realizar reuniões, workshops e guildas de apresentação do design system para toda a empresa (muitos desenvolvedores sequer conheciam o time de design ou o SDS).
Dores
A principal dor já foi apresentada logo no início do projeto: Éramos apenas duas pessoas, um desenvolvedor e um designer, para controlar mais de 20 produtos. Nós tínhamos mais de 120 issues abertas no Jira entre bugs, pedidos de atualização e novos componentes.
A plataforma de documentação antiga não possuía uma conexão com os softwares de criação de componentes, então todas as visões dos guias eram prints de tela, tornando o processo de atualização e refatoração muito lento.
Também não tínhamos acesso ao Adobe XD, todo o repasse para a Figma deveria ser baseado na documentação defasada da plataforma. Tivemos problemas com espaçamentos, medidas, componentes que estavam diferentes entre documentação e código, e mais uma lista de processos que simplesmente não serviam mais à nossa necessidade.
Processo
Após uma curva de aprendizado e mapeamento de conteúdo nos primeiros meses de projeto, conseguimos unir um grupo de designers de produto carinhosamente apelidado de Migos do SDS, onde eu poderia ter algum apoio na criação e refatoração de componentes das bibliotecas, ainda possuindo todo o controle de processos e de publicações.
Conseguimos estabelecer novos processos de criação e desenvolvimento. Fizemos uma estruturação de funções entre criadores e validadores de componentes e documentações, e foram mapeados e contabilizados os passo-a-passo de cada componente.
São realizadas diversas reuniões e guias para uso do SDS, onde tiramos dúvidas e auxiliamos os times de produto a fazer as devidas atualizações de componentes.
Entregas
Conseguimos recentemente reconstruir todos os componentes da biblioteca Web para a Figma e reestruturamos o modelo de documentação. Consideramos o produto estável e diminuímos em cerca de 70% do nosso backlog no último ano, sem deixar de evoluir e trazer novidades, realizar atendimentos e trabalhar simultaneamente no produto Mobile.
Fizemos curadorias dos aplicativos e lançamos a biblioteca em bons padrões de estilo e com componentes bem estruturados e manuteníveis.
Hoje tenho mensalmente reuniões de atendimento com os designers de produto para identificar dificuldades, dores e oportunidades de crescimento do SDS dentro da empresa. Nossa última pesquisa identificou que os aplicativos que utilizam a biblioteca do Senior Design System possuem notas maiores nas stores e estão mais consolidados no mercado.
Foram criados templates de jornadas comuns e um Show-case para facilitar os trabalhos dos designers e desenvolvedores, além de trazer clareza e boa visualização da nossa biblioteca por qualquer colaborador.
Nossas documentações seguem em construção, mas já trazem segurança, guias de boas práticas e recursos para todos da empresa. O Zeroheight possui conexão com a Figma então podemos garantir que a documentação sempre vai trazer a última versão dos componentes.
Senior Design System — Web · zeroheight
Senior Design System — Mobile · zeroheight
Foram criados vídeos-guia de utilização do design system, disponibilizados na plataforma de learning da empresa e uma das grandes entregas que fizemos nos últimos meses foi a adaptação de tematização e darkmode para aplicações mobile.
Nossas últimas entregas do produto:
- Criação de vídeos-guia para onboarding, que vão ser disponibilizados na plataforma de learning da empresa e estarão disponíveis para todos os colaboradores;
- Lançamento do darkmode para nossas aplicações mobile;
- Unificação de escala de cinzas entre os dois DS;
- Readequação do darkmode seguindo o sistema de variáveis da Figma;
- Preparo e adaptação para o futuro darkmode WEB;
- Auxílio na organização da biblioteca própria de ícones.
Próximos passos
Sendo um produto de entregas contínuas, ainda temos um roadmap extenso de entregas. Estamos trabalhando na evolução da versão Web e consolidação da Mobile. Tenho aprendido constantemente com o Design System, estou desenvolvendo habilidades de gestão, organização, resolução de problemas, controle de tempo e entregas e de apresentação e resiliência.
Temos ainda muitas entregas pela frente e sigo animada para os próximos desafios.
