UX Review: Garantindo a qualidade das entregas em produção

Quando o time de Research & Usability (R&U) foi criado no início de 2016 dentro da área de Produto & Engenharia daqui do VivaReal, tínhamos por objetivo gerar insumos por meio das pesquisas realizadas, sendo a base para que os VPs (Vice Presidentes), Product Managers (Gerentes de Produto) e UX designers dos times tomassem decisões estratégicas e também para garantir a qualidade do produto em produção, seja levantando os problemas no legado ou validando as novas entregas.

Logo no começo do time de R&U, no primeiro semestre de 2016, não tínhamos um processo de desenvolvimento de produto muito claro. Cada time técnico seguia um processo e eles se diferiam muito entre si. Com isso, os UXs dos times desenvolviam as soluções de interface de forma "on demand" e geralmente não havia tempo para realizar a validação de usabilidade antes que os desenvolvedores começassem a trabalhar nas telas.

Com o tempo, os times começaram a implementar processos ágeis para o desenvolvimento do produto e tivemos, pela primeira vez, a oportunidade de inserir a validação de usabilidade dentro desse processo. A ideia era "pegar" problemas de usabilidade que pudessem prejudicar a experiência do usuário antes mesmo que ele fosse "codado", assim barateando o custo de desenvolvimento e de manutenção.

O processo

Com os processos ágeis sendo implementados nos times, foi possível colocar em prática o Lean UX no VivaReal. Com o Lean é possível separar bem as etapas de "desenvolvimento do UX" deixando claro as atividades de cada uma delas. É durante a etapa de produção, quando são desenvolvidas as interfaces ou fluxos, que ocorre a validação de usabilidade.

o processo de Lean UX e suas etapas. Fonte: Guilherme Toni Skinner

Para gerenciar a etapa de Produção de uma maneira mais clara e objetiva, foi criado um board no Trello onde todos do time de UX — tanto os UXs dos times técnicos como nós do time de pesquisa — temos acesso às demandas. Nele, temos as etapas comuns de um kanban: Backlog, To Do, Doing e Done divididos em colunas. Com a inserção da etapa de validações de usabilidade e testes, foram criadas mais duas colunas no quadro: Validation & Testing (Validação e Teste) e Adjustments UX Squads (Ajustes para os UXs dos times técnicos).

Trello de demandas do time de UX do VivaReal

Na coluna de Validação e Teste ficam os cards de demandas já desenvolvidas pelos UXs. Para que a validação seja realizada da forma correta, o UX responsável pela demanda insere no card as informações necessárias para a validação:

• Adicionar as analistas de usabilidade como membros do card — para que acompanhem a evolução do mesmo, vejam as anotações, comentários, etc;
• Descrever da forma mais clara possível do que se trata a demanda — assim, caso o UX não esteja presente para explicar o que é, já fica claro o contexto das telas e o que deve ser feito;
• Links para as telas a serem analisadas (podendo ser do Zeplin ou inVision)- no caso de ser uma tela específica dentro do projeto, indicamos que coloquem somente o link da mesma e não do projeto inteiro;
• Link do protótipo navegável (podendo ser no inVision ou no Framer);
• Definir o Due Date para sabermos o prazo de entrega da demanda — isso ajuda priorização das validações, caso tenham muitos cards para validar;

Para a validação em si, seguimos um modelo que estruturamos anteriormente para uma análise de usabilidade das principais features do portal VivaReal (veja um post sobre isso). Nesse modelo, existem os seguintes itens para o preenchimento:

• Tela/Página: Onde colocamos o nome da tela exatamente como está no arquivo (Zeplin, InVision, etc) para manter a referência;
• Item avaliado: colocamos o nome do item, que pode ser um check box, um label, uma busca aberta, etc;
• Requisito de Usabilidade: embasamos o apontamento do problema com heurísticas ou metas de usabilidade que são infringidas;
• Imagem ou link: colocamos o link da imagem referida, principalmente quando se trata de um fluxo ou projeto inteiro é importante identificar qual tela/item é o problemático;
• Sugestão de melhoria: a sugestão é do ponto de vista de Usabilidade, sendo que as decisões técnicas referente à ela serão tomadas pelo UX especialista do time. Exemplo: caso o texto de uma tela esteja com uma cor muito clara, não havendo assim uma boa legibilidade, sugere-se que escureça mais o texto e clareie mais o fundo para ter um bom contraste. Neste caso, o tom da cor que será colocada será definida pelo UX do time com base em nosso UI Kit, na paleta de cores padrão, etc. Por isso tais coisas não devem ser impostas e sim sugeridas.

Exemplo de planilha que é preenchida durante as validações de usabilidade. Fonte: Diana Fournier

A planilha serve como referência para o UX do time saber os pontos de ajustes e também como forma de documentar o histórico de modificações embasadas em usabilidade. Caso queiram baixar o modelo da planilha, clique aqui.

Resultados alcançados

Hoje, o UX Review (Validação de Usabilidade) já faz parte do processo de desenvolvimento do produto. É pré-requisito passar pela análise das especialistas antes de “codar”. Com isso, estamos evitando vários problemas que podiam resultar em "refação" de tela e código. Além disso, nessa etapa é possível identificar pontos mais problemáticos que geram escopo para testes de usabilidade e pesquisas mais aprofundadas para compreender melhor como o usuário entende nossas features e fluxos.

Lembrando que isso não é uma receita de bolo. É um processo que sempre pode ser otimizado para se adequar ao seu cenário e empresa! :)