Como Criar uma Solução que Otimize a Triagem na Troca de Produtos em Apenas um Dia?
1. O Desafio
Somos quatro mulheres que decidimos encarar o desafio do Hackathon Woman in Tech do Hackingrio de desenvolver em apenas um dia uma solução que ajude a diminuir o tempo na triagem de produtos e evite erros na decisão humana. Eu como UX/UI designer, Raquel e Noelle com negócios e Karen no marketing.
2. O cenário Atual
Atualmente a rede varejista (stakeholder) apresenta excelentes números de devolução de celulares (cerca de 5%) e vestuário (cerca de 17%), feito de forma manual pelos funcionários da inspeção de qualidade, em um tempo 60 inspeções por dia, totalizando 5 inspeções por hora, quando não se comete falhas no processo. O objetivo do cliente era de agilizar o processo de inspeção de qualidade, melhorando a triagem e diminuindo o erro humano e assim, reter mais clientes.
3. O objetivo de Negócio
Criar um aplicativo que possa reduzir e evitar o erro humano, diminuindo o tempo em torno 25%, ou seja, do total das 60 inspeções por dia queremos reduzir para 45 inspeções por dia.
4. Ideação
Nessa etapa para entendermos um pouco mais do cenário fizemos uma pesquisa superficial (benchmarking) para entendermos o contexto de como é o processo de devolução no mercado do cliente varejista de e-comerce e seus concorrentes. Com isso surgiram algumas dúvidas e suposições, então criamos um matriz CSD onde descrevemos nossas certezas, suposições e dúvidas, feito no Miro.
Após criarmos essa matriz CSD validamos nossas certezas, dúvidas e suposições ao aplicarmos um formulário Google (onde obtivemos 78 respostas) para entender melhor o contexto do usuário.
Depois disso percebemos dois problemas principais: a diminuição da devolução do produto e a otimização do processo da triagem de devolução do produto. Nessa etapa, tivemos muitas dúvidas e saímos um pouco do foco do problema central. Mas resolvemos esse problema ao conversarmos com a stakeholder e ela deixar bem claro que o problema a ser resolvido era “otimização do processo da triagem de devolução do produto”, então reajustamos a rota e seguimos adiante com o foco no problema.
Escolhido então o problema, agora começamos o nosso brainstorm de 5 minutos, onde colocamos em post its (usando o Miro) ideias para a solução do problema. Depois disso classificamos as ideias utilizando a matriz de impacto x esforço, também no Miro.
Então, após discussões entre o grupo e novamente com a stakeholder, por fim escolhemos a ideia de criar um aplicativo que usasse o QR Code para classificar os produtos quanto ao tipo (vestuário, calçados, celulares e smartphones, etc) e causa da devolução em: não gostou do produto, produto danificado e produto não funciona; pois estas eram as principais causas de devolução, segundo a stakeholder. Outra solução também pensada seria adicionar uma etapa de pré-análise do produto via chamada de vídeo com algum funcionário da triagem.
Após isso, nos separamos em duplas: Karen e Raquel foram montar a apresentação e gravar o vídeo para o pitch e Verônica (eu) e Noelle, fomos pensar no protótipo.
5. A Solução
Para a solução pensamos e começamos a fazer o “rabiscoframe” durante 30 minutos e depois prototipamos no Marvel (mas não deu muito certo, então compartilhamos as ideias pela câmera do computador mesmo). Conversamos e vimos que uma pré-análise por vídeo chamada poderia atrasar o processo de devolução e troca (essa suposição deveria ser testada com o usuário, mas como só tínhamos algumas horas não tinha como testá-la). Então, decidimos que a pré-análise seria feita pelo usuário, através de vídeo ou foto, para então ser enviada para análise do setor de triagem e qualidade.
Fluxograma:
Temos então dois usuários do aplicativo o cliente e o colaborador. As telas do colaborador são apenas para escanear o QR Code e melhorar a triagem, já as telas do cliente tem as tarefas de discriminar o produto, dizer a causa da troca ou devolução, cadastrar um QR Code atrelado ao produto e enviar uma foto ou vídeo do produto a ser trocado. O protótipo foi desenvolvido no Figma.
Wireframe:
Para a construção do wireframe do MVP foram usadas principalmente as heurísticas de Nielsen consistência e padrões, reconhecimento em vez de memorização e design minimalista.
Guia de Estilo: cores, logo, tipografia e botões
As cores foram inspiradas em alguns grandes nomes do e-commerce no Brasil, como Magazine Luiza, Mercado Livre, Americanas.com e Shoptime, com isso decidi escolher dois tons de azuis e amarelo. O azul foi escolhido por ser uma cor fria, que passa uma sensação de confiança e segurança (sendo que o medo ou insegurança no processo de compra online foi um dos maiores problemas relatados na pesquisa com os usuários). O amarelo como uma cor quente, transmite a sensação de alegria e otimismo, fazendo um contraste com o tom azul escuro do fundo. O branco usado no nome da logo “Tamu Junto!” representa clareza, renovação e exatidão, que junto com o amarelo gera um equilíbrio entre diversão e a elegância .
A logo e o nome “Tamu Junto!” foram pensados baseados no valor que o aplicativo deseja passar, que é a colaboração ao melhorar e agilizar os processos de devolução e troca. A ideia era passar uma sensação de cooperação mútua, onde todos os envolvidos querem que o problema seja resolvido o quanto antes. As mãos abertas, como se estivessem esperando um “bate aqui” ou “hi5” simbolizam essa parceria entre a varejista e o cliente.
Para a tipografia da logo a fonte usada foi a Baloo que uma fonte gratuita sem serifa, mais arredondada e que dá a ideia de proximidade, sendo convidativa à interação, e também alegre, pois está nas cores amarelo e branco.
A tipografia usada para o wireframe foi a Roboto Regular, já que é uma fonte sem serifa grátis que é frequentemente usada pela Google e o sistema operacional Android.
Os botões utilizados na interface do wireframe foram: botão primário e drop down list button. Nesta interface o ghost button é o botão primário em muitas telas, isso porque ele é amarelo e faz contraste com o fundo azul, chamando atenção mas sem ofuscar a visão. Outro botão primário é o azul com amarelo, no fundo branco, contrastando com o fundo. O drop down list button é usado para listar os produtos a serem selecionados para troca ou devolução.
6. Teste de Usabilidade
Não foi possível fazer o teste de usabilidade no dia da entrega do pitch, pois não deu tempo de concluir e testar com o usuário. Entretanto, o wireframe foi testado na segunda e terça feira com cinco voluntários.
Usabilidade
Nesta etapa, avaliamos o desempenho do protótipo quanto a sua eficiência, eficácia e satisfação (de acordo com a ISO 9241 11) no contexto de uso, definindo objetivos que devem ser alcançado através de uma tarefa e métricas de sucesso.
O usuário cliente é um consumidor que quer trocar ou devolver um produto que não deseja mais, dentro do prazo de sete dias. Como tarefa, ele deverá conseguir cadastrar e enviar a causa da devolução do produto e o tipo de produto, gerando assim um QR Code; e ainda tirar uma foto ou vídeo do produto. Depois entender que é necessário imprimir e colar o QR Code na frente da caixa para identificação. O tempo utilizado para o usuário cumprir a tarefa de se matricular foi cronometrado.
O usuário colaborador é o funcionário que trabalha no setor de triagem e inspeção de qualidade da varejista e-commerce. Como tarefa, ele deve ser capaz de escanear o QR Code com o celular e então já saber o tipo de produto e o motivo da troca ou devolução, sendo assim sabendo se o produto tem ou não avarias.
Para isso foram aplicadas as perguntas abaixo:
O teste de usabilidade nos mostrou que faltava uma tela de login para o cliente (o que poderia já facilitar a escolha do produto, já que estaria atrelada ao banco de dados da varejista online), aumentando a sensação de segurança do cliente e diminuindo o erro do cliente selecionar a mercadoria errada. Percebi depois do MVP já feito que eu teria que colocar um botão de voltar na primeira tela do colaborador, para caso o usuário cliente clicasse no botão errado. O botão de fechar a tela (X) estava pequeno e precisava ser ajustado.
O tempo de uso do aplicativo foi de até 3 minutos e não foi relatada nenhuma dificuldade quanto ao uso do aplicativo.
7. Considerações Finais:
Infelizmente, nossa equipe não tinha uma desenvolvedora back end (e nem front end), portanto esse MVP não pode ser de fato testado. O front end foi desenvolvido pela Noelle, através das maravilhosas instruções do mentor Mateus, que sem ele não conseguiríamos colocar o código da interface no github.
Com essa experiência intensa eu pude aprender a trabalhar melhor em equipe, (pois sem a equipe não se consegue finalizar o pitch), a trabalhar sob pressão e com um prazo apertadíssimo, a delegar tarefas e confiar no time, a apoiar mutuamente as pessoas e a não “fugir” demais do objetivo de negócio proposto no briefing. Como habilidades técnicas, aprendi um pouco mais sobre design thinking e metodologia agile na prática, a fazer perguntas melhores (menos enviesadas e mais diretas), a escolher uma identidade visual simples baseado no benchmarking, a construir uma logo simples (mesmo sem as técnicas perfeitas do design gráfico), fazer um botão overlay no Figma e a elaborar um teste de usabilidade baseado em métricas de sucesso.
Agradeço a todos os mentores e organizadores do Hackingrio pela grandiosa experiência profissional e a equipe de mulheres incríveis do time Tamu Junto, que fizeram tudo isso acontecer e então, pude escrever o meu primeiro case de portfólio como ux/ui designer.
Linkidin para Conexão:
Verônica Carneiro , Noelle Bastos, Karen Kligerman e Raquel Nascimento
Bibliografia:
https://www.chiefofdesign.com.br/psicologia-das-cores/#subTitulo01
https://temporalcerebral.com.br/psicologia-das-formas-de-logotipos/
https://tableless.com.br/botoes-em-ui-design/
https://medium.com/tableless/botoes-em-ui-design-e8e8a7473747
https://www.chiefofdesign.com.br/ui-design-elementos-da-interface-do-usuario/
http://www.uxdesignstudio.com.br/por-que-testar-sites-5-usuarios/
http://www.inf.ufsc.br/~edla.ramos/ine5624/_Walter/Normas/Parte%2011/iso9241-11F2.pdf
https://kinsta.com/pt/blog/testes-de-usabilidade-de-sites/#identify-test-type
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
https://www.nngroup.com/articles/ten-usability-heuristics/
https://brasil.uxdesign.cc/10-heur%C3%ADsticas-de-nielsen-para-o-design-de-interface-58d782821840
