App colaborativo para comparar preços de supermercados — UX Study Case

Natalia Pauletto Fragalle
Mergo
Published in
6 min readJul 8, 2019

Um pouco sobre o case desenvolvido durante o UX Weekend, da Mergo User Experience.

Participantes do UX Weekend, que ocorreu entre 06 e 07 de julho de 2019.

Neste último fim de semana, participei do curso UX Weekend, realizado pela Mergo User Experience e ministrado pelo UX designer Edu Agni.

Neste artigo, vou contar um pouco sobre o trabalho que foi desenvolvido durante esses dois dias de curso em uma equipe formada por seis pessoas: além de mim, Thaíssa Veiga, Maria Clara Moraes, Fábio Lopes, Talita Lima e Nathalia Rodrigues.

O desafio proposto era o de desenvolver um aplicativo mobile (com um tema a ser escolhido pela equipe) durante as 12 horas de curso a partir do processo de design proposto. Tal processo se configurou em cinco etapas, que serão descritas abaixo.

1. Plano de ação

Nesta primeira etapa do processo, a ideia era criar um produto buscando resolver um problema que os próprios integrantes da equipe poderiam enfrentar em suas vidas e rotinas.

Para realizar essa tarefa, desenvolvemos um briefing que buscava responder a cinco perguntas:

Que problema queremos resolver?

O primeiro passo foi pensar em qual problema o aplicativo que iríamos criar poderia resolver.

Um problema que encontramos em comum entre os membros da equipe foi relacionado a uma atividade que todos nós precisamos fazer: compras em supermercado.

Pensamos que as pessoas não conseguem ter uma noção sobre a disponibilidade e as variações de preço dos produtos e marcas em diferentes supermercados sem terem que se deslocar fisicamente até os mesmos.

Com isso, muitas vezes acabam gastando mais ou saindo sem algum produto do qual precisem.

Como o aplicativo irá resolver o problema?

A ideia, então, seria desenvolver um aplicativo que localizasse a melhor opção de supermercado de acordo com a lista de compras feita pelo usuário, sendo que as informações sobre preços, promoções e produtos seriam incluídas, atualizadas e verificadas pelos próprios usuários de forma colaborativa.

Em que o produto desenvolvido se diferencia das soluções existentes?

A partir de uma rápida pesquisa em aplicativos de supermercados existentes e em outras soluções encontradas pelas pessoas para resolver esse problema (como folhetos de supermercado, por exemplo), o nosso produto se diferenciaria por já direcionar o usuário para o supermercado mais barato de acordo com a lista de compras completa, apresentando valores atualizados.

Para quem exatamente é esse produto?

Por mais que seja uma solução aparentemente voltada a todo tipo de público, pensamos que ela seria atrativa especialmente pelas pessoas responsáveis pela decisão de compra na sua casa ou empresa que possuem familiaridade com o uso de smartphone.

Qual é a proposta de valor do seu produto?

Tendo em mente que as pessoas compram propostas de valor e satisfação, e não produtos e aplicativos, consideramos que a proposta de valor da nossa solução seria a certeza em economizar tempo e dinheiro com pesquisas de preços em supermercados.

Apresentação do plano de ação elaborado.

2. Empatia e definição

Como não havia tempo hábil para realizar pesquisas e entrevistas com potenciais usuários, desenvolvemos uma proto-persona para nos ajudar a levantar novas questões, insights e possíveis funcionalidades para o nosso produto.

Apesar de estarmos cientes da necessidade de se criar no mínimo três personas para o desenvolvimento de um produto real, como se tratava de um curso intensivo, apenas uma proto-persona foi desenvolvida nessa atividade.

A maior dificuldade na criação da proto-persona foi tentar não sermos tendenciosos, moldando-a para que as suas necessidades fossem exatamente àquelas que seriam supridas pelo aplicativo.

O caminho que deveria ser seguido era justamente o inverso: contar uma historinha do dia-a-dia dessa persona e, a partir dela, descobrir possíveis funcionalidades e soluções.

Persona criada para a atividade.

3. Ideação

No segundo dia de curso, partimos para a etapa de ideação do projeto desenvolvendo o fluxo de tarefas (task flow) da função principal do aplicativo — comparar os preços dos produtos em diferentes supermercados — a partir do ponto de vista do usuário, ou seja, listando as tarefas que o usuário faria no nosso aplicativo.

Tal fluxo de tarefas foi complementado pela listagem de funcionalidades ligadas à realização de cada ação, configurando o inventário da interface.

Desenvolvimento do fluxo de tarefas.

As tarefas e as funcionalidades atreladas a cada uma delas foram listadas da seguinte forma:

  1. Procurar os preços de um produto específico: formulário de busca com auto-complete; função “selecionar produto”; valor máximo e mínimo do produto em diferentes supermercados.
  2. Criar lista de compras: botão para incluir produto na lista; botões para adicionar ou remover produtos; botão para “favoritar” produto; valor total da compra aproximado.
  3. Comparar os preços: botão “comparar preços”; cards com cada supermercado e valor total da compra (do mais barato ao mais caro).
  4. Descobrir endereços dos supermercados: cards com cada supermercado e distância do usuário.
  5. Visualizar distância dos supermercados a partir da sua localização: mapa de localização do supermercado em relação à localização do usuário; endereço completo e telefone do supermercado, botão “abrir no Google maps” (para traçar rota).
  6. Consultar formas de pagamento aceitas: ícones relacionados às formas de pagamento (bandeiras dos cartões, vale refeição, dinheiro, etc).

4. Prototipação

Para validar a ideia central do aplicativo (comparar os preços de supermercados a partir da sua lista de compras), desenvolvemos em 40 minutos um protótipo de baixa fidelidade desenhando as telas principais em papel e tornando-o navegável por meio do aplicativo Marvel.

Telas desenvolvidas na atividade de prototipação.

Com o protótipo de baixa fidelidade busamos também validar uma parte do nível informacional do aplicativo (textos, títulos, mensagens de sucesso, etc) e o fluxo de tarefas principal anteriormente desenvolvido. Você pode conferir o protótipo navegável desenvolvido neste link.

5. Teste de usabilidade

Finalmente, a última etapa do processo de design proposto no UX Weekend consistiu na aplicação de testes de usabilidade com colegas de outras equipes.

Aplicação do teste de usabilidade.

Para tanto, primeiramente foi desenvolvido um cenário com o objetivo de contextualizar o usuário a ser testado:

Você é o chefe da sua família, está concluindo sua lista de compras do mês e gostaria de comparar os preços dos supermercados.

Em seguida, foram definidas duas tarefas a serem realizadas pelo usuário, uma específica para testar o fluxo de tarefas principal do aplicativo e outra exploratória para que o usuário pudesse executar uma ação secundária interagindo com o produto de forma livre.

Tarefa específica:

Inclua a maçã “A” em sua lista de compras, escolha o supermercado mais barato e verifique onde ele se encontra.

Tarefa exploratória:

Cadastre um produto no aplicativo.

Os testes de usabilidade foram aplicados com três usuários e os principais feedbacks colhidos foram:

  • A ideia de criar um aplicativo que compare os preços dos supermercados através da sua lista de compras é muito boa.
  • É muito fácil cadastrar produtos no aplicativo.
  • O modo de incluir um item na lista de compras não ficou muito claro para todos os usuários.
  • A opção de “favoritar” um produto da sua lista de compras não ficou muito clara para todos os usuários.
  • O botão para acessar a localização do supermercado mais barato não ficou muito clara para todos os usuários.
  • A representação do mapa no protótipo não ficou clara para todos os usuários.

Conclusões

Se tem uma coisa que eu aprendi durante esse tempo no qual eu venho me dedicando a estudar sobre UI/UX design é que o processo de design nunca é aplicado apenas uma única vez e que ele não é linear.

Com os feedbacks colhidos nos testes de usabilidade, seria possível dar continuidade ao trabalho desenvolvido retornando, por exemplo, nas etapas de ideação e prototipação, melhorando as funcionalidades, a navegação e a usabilidade do produto.

Dessa forma, poderíamos avançar para um protótipo de média ou até de alta fidelidade para a realização de novos testes com usuários, para validar novos fluxos de tarefas e a sua consistência visual.

A atividade de desenvolver um protótipo de aplicativo em dois dias utilizando o processo de design proposto pelo UX Weekend foi uma experiência riquíssima, que com certeza representou um novo passo na minha caminhada para me tornar uma UI/UX designer.

Aprendi muito com cada uma das atividades desenvolvidas e, principalmente, com o trabalho em equipe, composta com pessoas de diferentes formações, experiências e pontos de vista.

--

--

Natalia Pauletto Fragalle
Mergo
Writer for

Product Designer @Yieldify | Guest Lecturer @ ITI UFSCar | Co-founder @ Catalyt and UX Sanca | Design Sprint Master www.linkedin.com/in/nataliapaulettofragalle