A sinergia entre Design e Engenharia em um time de Design System
Minha percepção sobre a interação entre designers e engenheiros durante o processo de criação de novos componentes.
Sou estagiária de Product Design na OLX Brasil desde julho de 2021 e, no final de dezembro de 2022, tive a oportunidade de migrar para o time de Design System da OLX, atuando no DSapega. Após ter trabalhado por um ano e meio em times de produtos, percebi durante essa mudança uma proximidade ainda maior entre Design e Engenharia dentro do contexto de Design System, em comparação com as outras experiências que tive. Neste texto, gostaria de compartilhar minhas experiências durante essa adaptação, abordando como designers e engenheiros podem interagir durante o processo de criação de novos componentes.
Dentro do nosso Design System, dividimos o processo de design de um novo componente em várias etapas. Primeiro, fazemos o mapeamento da necessidade de criação do componente, analisando a usabilidade atual (caso exista) insights e feedbacks de usuários em pesquisas. A próxima etapa é explorar referências visuais e funcionais do componente em outras plataformas e design systems, pontuando os pontos positivos e negativos de cada um. Em seguida, esboçamos o componente no Figma e depois definimos sua funcionalidade, tokens e variações com base nas informações identificadas nas etapas anteriores.
Ao final, documentamos as especificações técnicas e de acessibilidade do componente, indicações de uso, comportamento, anatomia e variantes. Após concluir o handoff, o componente segue para desenvolvimento, passando pelo discovery técnico, code review e revisão com design, até ser finalizado.
Dentro disso, como o design e a engenharia podem interagir durante esse processo para torná-lo mais eficiente?
Comunicação simplificada entre as áreas
Eu moro em uma república estudantil com uma argentina e uma boliviana, o que tem sido uma experiência muito interessante para mim no quesito de comunicação. Conviver com elas me fez perceber que o bom e velho “portunhol” resolve 99% das nossas necessidades de comunicação, por que há um esforço conjunto entre as partes para comunicar as ideias de forma com que todas possam compreender.
E o que isso tem a ver com a interação entre designers e engenheiros? O Português e Espanhol possuem suas próprias particularidades, mas são provenientes do latim, o que as tornam línguas semelhantes. Eu enxergo design e engenharia da mesma forma. São diferentes disciplinas, porém estão dentro do mesmo contexto e possuem um objetivo em comum: criar componentes, padrões e soluções que possam otimizar o trabalho dos designers e desenvolvedores dos times de produto, trazendo também ganhos de consistência e usabilidade para os usuários da plataforma.
Quando designers e engenheiros conseguem comunicar a visão de cada área de uma forma que facilite o entendimento dos termos técnicos de cada uma, é possível chegar em uma solução que atenda bem a ambos os lados, principalmente aos usuários finais.
Desta forma, os designers podem trabalhar em conjunto com os desenvolvedores, entendendo as limitações técnicas e as melhores práticas para a criação do componente, que auxiliem na implementação. Assim como engenharia pode se envolver nas etapas iniciais do processo de design, contribuindo para o mapeamento com a visão técnica, que pode influenciar na parte visual e funcional do componente.
A importância das documentações e do handoff
Dar prioridade para a documentação no processo tem sido importante para nós como forma de garantir que ela sempre esteja atualizada e possa ser consultada por todas as pessoas da empresa, auxiliando a comunicação entre designers e desenvolvedores dos times que utilizam o Design System. Com isso, também evitamos que as tarefas de atualização de documentação permaneçam em backlog e sejam despriorizadas com o tempo por novas demandas.
Já o handoff é uma ferramenta essencial para manter o registro do que foi planejado e servir de apoio durante o desenvolvimento. Por isso, vale o entendimento entre as duas partes do que é necessário ser incluído no documento de handoff, que pode variar de caso a caso, mantendo também um espaço aberto para perguntas posteriores caso haja dúvidas.
Errar faz parte: A importância dos reviews
Apesar de prestar muita atenção, alguns erros podem passar despercebidos por nós no meio do caminho (e provavelmente vão). Fazer algumas rodadas de revisão é uma forma de mitigar que esses erros virem retrabalho para os designers e desenvolvedores depois do componente estar finalizado.
Dentro do nosso processo de criação, o designer responsável pela tarefa solicita o review de outros designers da equipe, diminuindo os riscos de que algum item na construção do componente no Figma, documentação ou especificações técnicas esteja incorreto. Após a conclusão da parte de Design e entrega do handoff, realizamos uma rodada de review entre designers e engenheiros com o componente desenvolvido, garantindo que ele esteja com todos os tokens corretos, além de certificar sua acessibilidade e o comportamento com o leitor de voz.
Mesmo com o componente pronto e em uso, contamos também com a ajuda dos outros times para testar em contextos diferentes e trazer feedbacks, auxiliando na sua evolução e também ampliando essa interação com designers e engenheiros para fora do time de Design System.
Nasce uma estrela (ou um novo componente)
Finalizando o processo, temos um novo componente para chamarmos de nosso. Isso não significa que o trabalho acabou, pois melhorias, correções e atualizações são feitas continuamente à medida que a plataforma e os produtos evoluem, e novas demandas surgem dos usuários do Design System. Design e Engenharia podem interagir de diferentes maneiras, o que se torna essencial para o sucesso do Design System. E assim, juntos, trabalhamos para garantir a adoção do DS apega em toda a plataforma.
Meu nome é Raquel Rebouças, tenho 21 anos e sou Product Designer. Sou apaixonada por tudo que envolve design, criatividade e objetos cor-de-rosa. Escrevo no Medium sobre minhas experiências no mercado de trabalho, percepções sobre design no cotidiano, entre outras aventuras.
Descubra como a gente faz tecnologia, além das oportunidades abertas aqui na OLX Brasil.
