Um guia para product designers: Utilizando QA para garantir boas entregas
Nesse artigo abordo boas práticas desenvolvidas na OLX Brasil que podem auxiliar no processo de QA junto ao time de Produto e Engenharia
Uma entrega de qualidade abrange diversas áreas: tecnologia, experiência, visual e solução dos problemas dos usuários e muitas dessas responsabilidades estão sob cuidado do designer. Em um contexto de trabalho, a equipe de Design tem o papel de identificar oportunidades, validar hipóteses, conceber soluções e passá-las para a Engenharia. Mas o trabalho não termina aí. A validação da solução após desenvolvimento é o que garante o fechamento da entrega com chave de ouro, assegurando que o que foi construído segue o que foi planejado, para que, a partir daí, seja disponibilizado para o cliente final.
Esse processo é chamado de UXDQA: user experience design quality assurance, que consiste em revisar uma entrega pós-implementação para certificar-se de que o produto final está de acordo com o projeto de design.
Aqui na OLX Brasil, as equipes têm autonomia para organizar os processos de entrega de acordo com a sinergia da equipe. No entanto, para facilitar o gerenciamento do tempo de entrega e a produtividade das equipes, adotamos metodologias ágeis que possibilitam o rastreamento e acompanhamento dos processos de implementação. Atualmente, temos uma etapa específica de QA no fluxo de produto, mas a decisão de atuar ou não nesta etapa fica sob responsabilidade das próprias equipes.
Passo 1: Alinhamento com o seu time
Crie um fórum de discussão com o squad para oficializar a etapa de QA nos processos de entrega
Partindo do pressuposto de que as equipes já incluem a etapa de QA na esteira do produto, nosso primeiro passo é alinhar a importância desta etapa com produto e engenharia. Muitas vezes, devido à velocidade das entregas, esta etapa é negligenciada e pouco priorizada.
Neste ponto, é essencial a atuação do designer, que deve evangelizar as equipes sobre a importância do processo de validação. Essa discussão deve ser incentivada para que o time passe a valorizar essa parte do processo e o QA deixe de ser responsabilidade apenas do designer, passando a ser responsabilidade de todo o time.
Passo 2: Espaço controlado
Garantir que existe um espaço de teste
Embora pareça óbvio, é necessário destacar que não é considerado uma boa prática fazer ajustes no produto enquanto ele está em produção, ou seja, com usuários utilizando o produto. É importante, portanto, certificar-se de que existe um espaço de teste em um ambiente controlado, no qual não existam usuários reais interagindo com a solução. Dessa forma, você garante que o usuário terá acesso apenas ao produto final, já finalizado e condizente com a experiência que foi projetada.
Passo 3: Checkpoint de implementação
Acompanhar a evolução da implementação e fazer apontamentos durante o processo
Para otimizar o tempo de desenvolvimento, é importante realizar checkpoints regulares com os desenvolvedores. Durante o processo de implementação, traga apontamentos para que pequenos ajustes possam ser feitos antes da finalização. Isso fará com que existam apenas correções pontuais a serem realizados no final da implementação, otimizando o tempo e o esforço durante o processo. Para que isso aconteça, o designer e a engenharia devem manter alinhamentos recorrentes, criando uma sinergia de trabalho.
Esse tipo de alinhamento pode ser realizado via slack, video chamada ou comentários no Figma.
Passo 4: Apontamentos no Figma
Utilizando o Figma para exemplificar o que não está de acordo com o projeto
Na OLX Brasil, utilizamos o Figma como ferramenta de criação. No próprio projeto de handoff, criamos um espaço com os apontamentos de QA, onde o designer identifica os ajustes e mostra a comparação do projeto original e do projeto implementado. Isso é feito utilizando recursos de comentários, tanto em formato de notas quanto em comentários do Figma. Além disso, numeramos as alterações para garantir que elas sejam facilmente rastreadas.
Realizar apontamentos visuais pode ser útil para identificar os ajustes necessários no projeto. A qualidade visual dos projetos é responsabilidade do designer, enquanto a qualidade do código é responsabilidade do engenheiro. Por isso, muitas vezes, pequenos detalhes, como o espaçamento, o peso da fonte ou a tonalidade da cor, podem passar despercebidos pelos engenheiros. O apontamento visual pode exemplificar os pontos que precisam ser alterados na composição.
Esse processo de utilização do Figma e comparação visual pode fazer mais sentido em casos em que a implementação do design system não está madura e alguns itens precisam ser criados ou inseridos manualmente pelos desenvolvedores. Em alguns contextos onde não há exceção e tudo é criado a partir do design system, talvez esta etapa não seja necessária.
Importante sempre colocar o link do apontamento no Figma dentro da tarefa do Jira referente aquela entrega, facilitando do engenheiro identificar onde está registrada a correção.
Passo 5: Utilizando ferramentas de agilidade para documentar
Sinalizar o que está em andamento e concluído
Anteriormente, comentei sobre a utilização de metodologias ágeis na esteira de produto adotada pela OLX Brasil. Atualmente, usamos o Jira para rastrear a produtividade e gerar relatórios para a liderança. Além disso, o Jira é uma ferramenta útil para documentar tarefas e facilitar a comunicação entre os membros das squads.
Neste sentido, quando o item chega à coluna de QA, está liberado para o designer, PM ou time de engenharia fazer a validação da tarefa. Podem existir tarefas que precisam de revisão de código ou de regra de negócio. Normalmente, somos informados pelo desenvolvedor qual análise precisa ser realizada. É importante que todos os membros da equipe estejam cientes do status da tarefa e das ações necessárias para avançar para a próxima etapa.
Quando uma tarefa precisa de validação da equipe de design, o engenheiro responsável sinaliza e o processo de verificação inicia e indicamos nos comentários da tarefa os itens do projeto que precisam ser revisados e o link do Figma com o detalhamento dos ajustes e informações do projeto.
Durante a criação deste processo, percebi que existem dois tipos de alteração que se repetem por aqui:
A alteração “On time” ocorre quando surge uma oportunidade e passa por todas as etapas da esteira de produto até chegar em QA. Quando chega em QA, é revisada e finalizada. Os apontamentos são feitos na própria tarefa, sem necessidade de criar itens extras. Outro cenário são os “Ajustes pós-implementação”, quando, após a implementação — e após ter passado pela etapa de QA — é identificado um problema no produto e ele precisa ser revisado. Quando isso acontece, criamos uma tarefa específica para o ajuste e a levamos para o backlog, onde no início da sprint ela será discutida e priorizada. Na OLX Brasil, utilizamos uma gestão de tempo de engenharia em que 70% das atividades de implementação estão relacionadas ao objetivo da sprint e 30% são destinados a valores técnicos, bugs e débitos técnicos. Uma tarefa que ficou para trás e não compromete o funcionamento do sistema é encaixada nos 30%.
Checklist
Por último, trouxe um checklist prático para auxiliar o processo de verificação:
✅ Testar em tamanhos de tela diferentes. Nos casos de soluções para desktop e msite, utilizar a ferramenta de inspecionar no chrome pode ajudar;
✅ Concentre-se na experiência do usuário, estamos resolvendo a dor dele?;
✅ Interaja com o produto utilizando um caso de uso real;
✅ Observar o tempo de carregamento da página;
✅ Conferir pesos e tamanho das fontes;
✅ Conferir se as imagens estão em alta qualidade;
✅ Conferir se as interações com os inputs estão corretas;
✅ Conferir espaçamentos entre componentes;
✅ Conferir acessibilidade como contraste, tamanho de fonte, legibilidade, navegabilidade;
✅ Identificar se o sistema está provendo todos os feedbacks das ações para o usuário como mensagem de erro, sucesso, etc;
✅ Conferir gramática;
✅ Conferir se não existem elementos se sobrepondo ou quebrando na página;
✅ Conferir se as linkagens da página direcionam o usuário para o local correto.
Descubra com a gente faz tecnologia! Acesse aqui!
Recomendações de leitura
Quer saber mais sobre nossa cultura, dia a dia, oportunidades?
Confira nossa página de carreiras!
