Create a design system from scratch to enable shared design experience and standards across products and improve our efficiency in delivering solutions.
Depois de iniciar a nova estrutura de equipe da empresa, cada designer era responsável por um dos produtos.
Nós nos deparamos com problemas em todos os produtos, tais como:
Bibliotecas de componentes conflitantes
Componentes e soluções de design inconsistentes no mesmo produto
Muito tempo investido no design da interface
Demanda por um processo de entrega mais ágil
Projeto de componentes
Microinterações
Gerenciamento
Princípios de design
Documentação
Redesenho da interface
Cristiano Vieira, Líder de design
Felipe Martins, PD
Fabiano Bergamo, PD
Marcela Pianovski, PD
Paulo Zubiolo, PD
Pedro Bertollo, PD
Durante o primeiro semestre de 2022, criamos o EixoDS. Nosso foco foi melhorar a experiência e o tempo gasto em tarefas para processos de logística.
Durante a fase de design de componentes, nos concentramos em criar componentes que tornassem a experiência entre os produtos consistente e que os layouts se adequassem ao nosso contexto de uso.
Nesse exemplo, preparei diferentes layouts e visualizações de tabela para a equipe do projeto validar a escalabilidade dos produtos pelos quais eles eram responsáveis e quais dados e interações deveriam ser considerados.
Nosso processo estava longe de ser linear ou livre de obstáculos. Durante a criação, nos vimos decidindo sobre as compensações necessárias para que a implementação acontecesse:
Nossa liderança planejou um roteiro no qual o sistema de design estaria pronto para a transferência em maio.
A equipe foi dividida em diferentes fases do processo e colaborou em outras partes do projeto sempre que possível.
Éramos uma equipe de 6 designers atuando na criação e iteração do sistema de design. Iniciei um registro das reuniões no Confluence com tópicos discutidos durante as reuniões e um registro de alterações no arquivo do sistema de design para que todos pudessem atualizar as alterações feitas para alinhamento ou discussão adicional.
Preparamos uma apresentação sobre o sistema de design durante uma reunião mensal com desenvolvedores, gerentes e diretores.
Tivemos que definir um ponto de partida para a implementação. Após discussões, concluímos que deveríamos começar com a plataforma Shipper, o produto em que eu trabalhava. Depois de desenvolver componentes e layouts para os produtos, outras equipes começaram a acompanhar os desenvolvedores da minha equipe para começar a aplicá-los em seus produtos.
O alinhamento com os gerentes foi crucial para que pudéssemos começar a desenvolver a biblioteca de componentes.
Estrutura do arquivo Figma
Tipografia e sistema de cores
Depois que a primeira solução foi entregue com a nova biblioteca e depois de coletar o feedback dos desenvolvedores e designers, observamos:
Menos tempo é gasto em processos de design thinking ao usar o Design System
Mais assertividade e menos ajustes de homologação de design antes do lançamento
Código limpo e maior eficiência no desenvolvimento da equipe, sem perda de tempo com refatoração de componentes para atender às necessidades do produto/uso
Alinhar nosso projeto com gerentes e desenvolvedores interessados em trabalhar com uma biblioteca de componentes foi crucial para iniciar o desenvolvimento, reduzindo contratempos e tornando nosso projeto mais do que um arquivo Figma.
Minhas habilidades de comunicação melhoraram muito durante esse projeto. Assumi a responsabilidade de testar os componentes e gerenciar os desenvolvedores envolvidos, relatando o processo semanalmente ao meu líder de equipe e aos gerentes de produto.
Obrigado pela leitura!💖
Voltar para todos os projetos 🔙💼