Cinco ideias para uma colaboração melhor entre equipes de desenvolvimento e design

O desenvolvimento de um aplicativo é um esporte coletivo, que exige o trabalho em equipe de diversos participantes, incluindo as equipes de desenvolvimento e design. Como Roger Staubach, famoso quarterback do Dallas Cowboys dos anos 1970, costuma dizer: “Em qualquer esporte coletivo, as melhores equipes têm consistência e química.”

A falta de colaboração entre as equipes de design e desenvolvimento resulta em menos eficiência e no aumento do tempo de resposta para os projetos. KPIs conflitantes, a falta de compreensão do processo de pensamento uns dos outros, a ausência de uma cadência de reuniões e o uso de ferramentas de colaboração que favorecem mais um lado do que o outro agravam o problema. Vamos nos aprofundar em todos esses fatores e analisar como as empresas podem melhorar a colaboração entre as equipes de design e desenvolvimento.

Em vez de KPIs convencionais, as equipes de design e desenvolvimento podem se beneficiar com KPIs centrados no usuário, como a taxa de conversão, métricas de engajamento do usuário, duração da sessão, taxa de devolução etc. Esses KPIs colocarão ambos os grupos na mesma página e ajudarão a focar no que é realmente importante: a experiência do usuário.

Pense na taxa de conversão como um KPI para um projeto destinado à criação de landing pages para uma nova campanha. Em vez de entregar o design da landing page em X dias (equipe de design) e colocá-la no ar em X dias (equipe de desenvolvimento), ambas as equipes focarão em torná-la excelente do ponto de vista do usuário.

KPIs convencionais para profissionais de design e desenvolvimento raramente levam em conta o tempo de espera ou colaboração e criam conflitos desnecessários.

Alguns dos KPIs comuns para a equipe de design incluem:

• Tempo necessário para concluir o projeto
• Tempo gasto em revisões
• Feedback interno/externo sobre o design
• Número de projetos concluídos em um trimestre

Com esses KPIs, o feedback da equipe de desenvolvimento é prejudicial para a equipe de design, porque ela precisa tirar o foco de novos projetos e refazer as telas já entregues. Nesse caso, seus KPIs a colocam em conflito com a equipe de desenvolvimento.

Por outro lado, alguns dos KPIs comuns para profissionais de desenvolvimento front-end incluem:

• Linhas de código e número de implementações
• Tempo de ciclo: tempo gasto em uma única tarefa
• Estabilidade e simplicidade do código

Designs complexos e repletos de recursos exigem mais esforço de programação da equipe de desenvolvimento. Então, toda vez que a equipe de design insiste em novos recursos que exigem uma programação complexa, a equipe de desenvolvimento vê isso como um obstáculo.

Embora os KPIs convencionais tenham suas vantagens, as pessoas responsáveis pelo gerenciamento devem garantir que os KPIs de uma equipe não entrem em conflito com o trabalho da outra. Isso pode ser alcançado dando mais peso aos KPIs compartilhados e centrados no usuário.

Se a equipe de design entender os fundamentos do desenvolvimento front-end, conseguirá ver as coisas pela perspectiva da equipe de desenvolvimento. O mesmo vale para a equipe de desenvolvimento. Além disso, profissionais de design com conhecimentos básicos de HTML e CSS criarão designs levando em conta as limitações tecnológicas. Entender como um aplicativo funciona nos bastidores — mesmo que sejam apenas o básico e os recursos de API — ajuda a equipe de design a compreender melhor as limitações técnicas.

Ao fazer alguns cursos básicos nas disciplinas um do outro, as equipes de desenvolvimento e design conseguirão falar a mesma língua. Esse tipo de treinamento cruzado melhora a colaboração e faz com que os dois grupos trabalhem juntos para descobrir formas melhores de solucionar problemas.

Coursera e Career Foundry oferecem cursos especiais para profissionais de design que desejam aprender sobre o desenvolvimento front-end. Esses cursos abordam os conceitos básicos do desenvolvimento web e ensinam HTML, CSS e JavaScript: as três linguagens usadas no trabalho de qualquer profissional de desenvolvimento front-end. Esses cursos também abordam o design de UX e UI a partir da perspectiva da equipe de desenvolvimento. Os profissionais de design que fazem esses cursos adquirem um entendimento melhor de como a equipe de desenvolvimento dá vida aos designs.

A equipe de desenvolvimento também pode se beneficiar com cursos do Canva e LinkedIn Learning. Esses cursos abordam tipografia e combinações de cores, mas, o que é mais importante, eles ensinam as etapas do processo criativo e como a equipe de design pensa. Profissionais de desenvolvimento que fazem esses cursos adquirem um entendimento melhor de tudo o que envolve o design.

Esses cursos exigirão mais tempo e esforço tanto da equipe de design quanto de desenvolvimento, mas o treinamento cruzado será recompensado com mais eficiência. Além disso, quem fizer esses cursos também terá novas skills e certificações no currículo.

Um sistema de design consiste em um guia de estilo e uma biblioteca de padrões. É uma única fonte da verdade repleta de componentes reutilizáveis (menus suspensos, botões de CTA, formulários de leads…) e instruções claras sobre como usá-los. Além disso, ele reduz discrepâncias e o vaivém entre as equipes de design e desenvolvimento. Ter um sistema definido de componentes reutilizados também diminui a desnecessária dívida técnica de engenharia que poderia se acumular. Isso acontece ao criar os mesmos elementos de UI mais de uma vez. A reutilização de ativos possibilita um tempo de entrega mais rápido e um aplicativo consistente.

Um guia de estilo é um conjunto de padrões para todos os identificadores de marca, como o logotipo da empresa, o esquema de cores, a fonte, a tipografia e o design do modelo. A maioria das empresas começa com um guia de estilo e evolui para uma biblioteca de padrões conforme cresce.

Um biblioteca de padrões é uma coleção de todos os componentes interativos do seu design, incluindo botões, barras de navegação e carrosséis. Ela também consiste em definições e descrições de todos esses componentes, descreve claramente seus usos e contém a programação associada a eles.

Um sistema de design combina ambos e oferece a quem usa informações completas sobre tudo o que está incluído no guia de estilo e na biblioteca de padrões, além das práticas recomendadas de design e diretrizes de implementação. A equipe de design pode criar conceitos diretamente no sistema de design ao arrastar e soltar componentes armazenados previamente. Em seguida, a equipe de desenvolvimento consegue visualizar a programação associada a cada componente, além de enviar feedback para a equipe de design no mesmo espaço.

Algumas das ferramentas on-line mais conhecidas para o gerenciamento de sistemas de design incluem material.io, supernova.io, zeroheight.com e PatternFly.

Reuniões de equipes multifuncionais ajudam a solucionar conflitos, aprimorar a comunicação e aumentar a compreensão entre os dois grupos. O agendamento de reuniões recorrentes semanais ou quinzenais entre as equipes de design e desenvolvimento ajudará a analisar projetos em andamento, iniciar novos projetos e colaborar com eficiência. 

Em uma webinar sobre a colaboração entre equipes de design e desenvolvimento, Nicki Snyder, gerente de experience design na Pathwire, destacou a importância de reuniões entre as equipes de design e desenvolvimento:

“Nós (da área de design) realmente gostamos de criar coisas e presumir que darão certo. Não trouxemos a engenharia logo no começo do processo, o que causou muito trabalho desnecessário que poderia ter sido evitado se tivéssemos passado uma hora revisando o que queríamos, definindo qual seria o estado final e conversando (com a equipe de engenharia).”

Profissionais de gerência de produtos seriam as pessoas ideais para conduzir essas reuniões e garantir que ambos os grupos foquem em melhorar a experiência do usuário. As pessoas na gerência de produtos também definem a pauta dessas reuniões, que pode ser qualquer questão ou obstáculo específico com um projeto, a revisão de designs de um novo recurso do produto ou de uma página da web, ou uma conversa sobre uma landing page com baixo desempenho. Essa reunião também pode ser convertida em uma sessão de trabalho em que um pequeno grupo de profissionais de design e desenvolvimento soluciona um problema específico.

Fazer reuniões iniciais de lançamento e sessões de trabalho ajuda a equipe de desenvolvimento a saber se é possível realizar o necessário no aplicativo. Isso permite tempo para fazer uma pesquisa mais aprofundada (research spike), caso precisem ver o que é necessário para que a funcionalidade ou o design se tornem realidade. Fazer reuniões no início do projeto ajuda profissionais de gerência de produtos a criarem prazos de entrega realistas e já fornece os requisitos antecipadamente para a equipe de design.

A responsabilidade de garantir que essas reuniões não se transformem em apenas atualizações de status é da gerência de produtos. Elas só devem acontecer quando houver uma pauta predefinida que aborde de forma clara um problema a ser solucionado por quem está participando.

Os principais pontos aprendidos nessas reuniões podem ser utilizados para atualizar o sistema de design. De preferência, essas reuniões passarão de semanais a quinzenais, a mensais e, depois, de acordo com a necessidade, conforme o sistema de design fique mais robusto.

O processo convencional de colaboração de design e desenvolvimento envolve um repasse da equipe de design para a equipe de desenvolvimento. Por exemplo, a equipe de design cria as telas e compartilha o arquivo da imagem com a equipe de desenvolvimento. Depois, a equipe de desenvolvimento fornece feedback sobre o que pode ou não ser feito. Então, a equipe de design revisa (ou refaz) as telas conforme necessário e as envia novamente para a equipe de desenvolvimento, e assim por diante. É um processo demorado, com várias idas e vindas antes que qualquer coisa vá ao ar.

As ferramentas de colaboração de design e desenvolvimento têm como meta transformar esse repasse em um trabalho em equipe. As equipes de design e desenvolvimento conseguirão olhar para a mesma tela em um ambiente editável em tempo real, o que eliminará o aspecto de vaivém no processo.

Há também ferramentas de colaboração de design e desenvolvimento como o Adobe XD que são mais voltadas para as necessidades da equipe de design e dão suporte ao processo de repasse desde o wireframe até designs completos. Algumas ferramentas, como o zeplin.io , são focadas na equipe de desenvolvimento e atendem às suas necessidades, fornecendo fragmentos de programação, ativos e especificações para diferentes tamanhos de tela em um único lugar. O Zeplin conta com integração ao Adobe XD, portanto, além dele, pode ser usado para dar suporte à equipe de desenvolvimento.

No webinar que mencionamos antes, Nicki citou alguns dos desafios relacionados ao processo de repasse. Um desses desafios foi obter o feedback da equipe de desenvolvimento muito tarde no processo. Ela também mencionou como o InVision ajudou a transformar o repasse em um processo de trabalho em equipe.

Além do InVision, existem ferramentas como o Bit e Figma que ajudam equipes de desenvolvimento e design a colaborar em tempo real. Essas ferramentas também podem ser integradas ao JIRA ou a outras plataformas de gerenciamento de projetos. Os preços variam de acordo com a quantidade de usuários e projetos, com US$ 9,95 a US$ 20 por usuário a cada mês sendo a faixa de preço de um plano profissional.

Normalmente, a discussão sobre a colaboração de design e desenvolvimento foca em páginas da web e aplicativos, mas o e-mail também pode se beneficiar.

Graças a uma colaboração melhor entre as equipes de design e desenvolvimento:

• Os e-mails funcionarão em todos os tipos de caixas de entrada e dispositivos.
• A entregabilidade aumentará devido a uma programação mais limpa e simples.
• As taxas de cliques aumentarão por causa de layouts melhores.
• As taxas de descadastramento diminuirão graças ao aumento no engajamento.

Além disso, a implementação de um sistema de design, junto com o treinamento de front-end e os recursos simples da Pathwire, ajudará a equipe de design a criar modelos de e-mail que podem ser ajustados e reutilizados continuamente. Por exemplo, alguém da equipe de design pode configurar o modelo de uma newsletter, e alguém do desenvolvimento garante o seu funcionamento em todos os tamanhos de tela com ferramentas como o Inbox Display da Email on Acid ou e a pré-visualização de e-mail da Mailjet, e uma pessoa responsável pelo marketing pode apenas incluir novas imagens e substituir o texto no mesmo modelo todos os meses.

Falando em newsletters, assine a nossa. Todo mês enviaremos a você artigos assim, guias detalhados, os desenvolvimentos incríveis da Pathwire e muito mais.

Assista à transmissão ao vivo do painel do nosso webinar: “Aprimorando o relacionamento das equipes de desenvolvimento e design ao seu potencial máximo com a Pathwire e a InVision.”

O painel de debate inclui:

• Nicki Snyder, gerente de experience and design na Mailgun by Pathwire.
• Lawrence Norton, engenheiro de software na Mailgun by Pathwire.
• Nick Karavas, consultor de soluções na InVision.

Autor: Nicki Snyder Nicki Snyder is the Director of Experience Design for the CPaaS Design Group at Sinch. She leads our Product Design team and focuses on the UX and visual interface to optimize our product. She writes about design and brings insight into collaborating with developers on projects.