Estudo de caso
Transformando a experiência de compra em supermercado através do autoatendimento
Cliente: Square
Duração: 5 meses
Metodologia: Double diamond
Habilidades praticadas
Desk Research, entrevista com usuário,
teste de usabilidade, design de interface e prototipação.
Ferramentas utilizadas
Maze, Figma, Optimal Workshop, Google doc.,
Google Meeting, Google Planilha, Zoom e Miro.
Introdução
A Square é uma plataforma de pagamento que possui diversos produtos e um dos principais é o Square Register.
O Square register é o produto que vamos expandir sistema com duas telas, uma para o lojista e outra para usuário.
Objetivo
O foco principal do case é transformar o Square Register em um sistema de autoatendimento, pensando em uma jornada simples e inovadora.
Público
Para qualquer pessoa, independentemente da idade ou nível de escolaridade, que deseje tornar suas compras mais rápidas e eficientes.
Proto-persona fornecida pela Square:
52+anos
Xoemas Ximbs
Público com mais idade, que nem sempre tem
conhecimento com tecnologia.
18 anos
Justin Biebs
Público com bastante conhecimento em tecnologia,
gosta de agilidade e pouco contato com humanos.
33 anos
Manu Gavs
Público que dispensa ajuda, vai tentar resolver todos os problemas sozinho, desisti da compra mas não pede ajuda.
Principais etapas realizadas ao longo do projeto
Descobrir
Entender e questionar o briefing;
Desk Research;
Canvas;
Análise de competidores;
Survey;
Entrevista com usuário;
Jobs to be done.
Definir
How Might We);
User flow/Task flow;
Moscow.
Desenvolver
Card sorting;
Tree testing;
Crazy 8`s;
Wireframe;
Dot voting;
Teste de usabilidade;
Moodboard.
Entregar
Protótipo;
Teste de usabilidade;
Documentação.
Pesquisa de campo
Visita aos estabelecimento que possuem autoatendimento
- Supermercado
- Carregamento de passagem
Desk research
Através de pesquisa em sites, fóruns e redes sociais,comecei a entender um pouco mais de como estava o cenário atual, quais os sentimentos dos usuários, as vantagens e segurança do autoantedimento, quais tecnologias são utilizadas e quais soluções já existem.
Canvas
Para entender os desejos, as motivações e descobrir as dificuldades que os usuários têm ao usar o autoatendimento, eu fiz o canvas na perspectiva dos usuários.
Resumo
Problema/dificuldade: Balança, escaneamento.
Motivações: Mais rápido, evita grandes filas e a possibilidade de evitar contato humano.
Sentimentos: Insegurança e tensão, pois poderá apresentar algum erro.
Análise de competidores
Chegou o momento de buscar conhecimento sobre os concorrentes diretos e indiretos.
Com essa busca, obtive conhecimento sobre quais eram as principais características, tecnologias, métodos de pagamento e onde as soluções deles funcionam.
Survey
Até o momento temos bastante informação sobre tecnologia, empresas concorrentes, depoimentos de usuários e muito mais. Com todos esses dados, chegou o momento de buscar mais conhecimento com os usuários que usam ou já utilizaram o autoatendimento em qualquer contexto.
Objetivo: De modo geral, como os usuários utilizam e se sentem ao usar o autoatendimento.
Público: Pessoas que utilizam o autoatendimento, seja em lojas, supermercados ou restaurantes.
Resumo Survey
Com tantas informações fornecidas pelos usuários, decidi criar um mapa de afinidade.
Agora, estamos prontos para explorar possíveis abordagens sobre como lidar com essas informações.
Balança/base
Suporte
Escaneamento
Pagamento
Entrevista com usuário
Busquei conversar com os usuários sobre as principais jornadas: Registrar, pesar e pagar o produto.
Comentários
“Sempre vou ao mercado e no dia que preciso ir trabalhar no escritório compro produtos para o lanche. Quando comecei a usar autoatendimento tinha muito
problema para fazer o escaneamento porque eu não sabia que precisava colocar o produto dentro da sacola para finalizar o processo, o sistema travou e eu não conseguir resolver sozinho.”
“A pessoa precisa saber, então era bom sempre ter uma pessoa ajudando pelo menos a primeira vez, mostrar como é e ensinar a pessoa”
“Me senti envergonhado em precisar de ajuda do funcionário para uma coisa tão simples”
“Já uso autoatendimento a muito tempo, morei 7 anos nos Estados Unidos, é bem normal isso por lá!
Para mim é muito tranquilo, tem gente que acha estranho porque não sabe usar. Para quem sabe usar, é muito mais rápido “
Objetivos
Negócio
- Reduzir a necessidade de intervenção dos funcionários;
- Minimizar o número de filas, proporcionando uma experiência mais ágil para os clientes;
- Implementar um sistema intuitivo e fácil de aprender para otimizar as operações.
Usuários
- Garantir mais autonomia nas compras, permitindo que os usuários realizem
suas escolhas de forma independente; - Facilitar o registro das compras, assegurando uma experiência sem problemas;
- Possibilitar a realização de compras sem a necessidade de contato humano;
- Proporcionar uma experiência de compra acessível a todas as idades e níveis de escolaridade.
Priorização
Para iniciar a construção do MVP, foi necessário priorizar as funcionalidades, concentrando o maior foco nas atividades em que os usuários enfrentam as maiores dificuldades.
Card Sorting
Através dessa abordagem, busco analisar como eles realizam suas buscas e organizam mentalmente as categorias pertinentes.
Este processo nos proporcionará insights valiosos para otimizar a experiência do usuário e garantir uma navegação mais intuitiva e eficiente.
Insights
Validar ticket de estacionamento
Durante a fase de descoberta, não havíamos mapeado nenhum caso
relacionado a esta categoria. Contudo, um usuário destacou
essa necessidade durante um exercício.
Categoria acessibilidade
Enquanto pensava sobre os menus do totem, considerei a inclusão de uma categoria de acessibilidade, contendo opções como aumento de fonte e ajuste de contraste. Durante os testes, os usuários indicaram que preferem ter essas configurações diretamente na página principal, sem depender de um menu específico. Para confirmar essa informação irei aplicar o tree testing
Tree testing
Após realizar o card sorting ainda fiquei com alguns questionamento e para solucionar resolvi aplicar um teste de navegação.
60%
Usuários categorizaram os itens de aumentar fonte e contraste na seção de acessibilidade.
40%
Optaram por colocá-los diretamente
na página inicial.
Essas divergências motivou a realização de um teste de navegação, explorando a possibilidade de inserir esses recursos na página principal, ao invés de
mantê-los dentro do menu.
50%
Usuários categorizaram os itens de autoajuda na seção ‘Acessibilidade’, enquanto os outros
50% os colocaram em ‘Suporte’.
Essa divisão igualitária motivou a realização de um teste adicional para compreender melhor a preferência dos usuários e orientar minhas decisões futuras.
Tree testing – Tarefas
Wireframes
Agora estamos chegando no momento de desenvolver o autoatendimento de fato, no primeiro momento resolvi desenhar as telas no papel, fiz 3 desenhos diferentes para cada cenário e depois fiz um média fidelidade pra facilitar os testes de usabilidade.
Cenários: Registrando e pesando o produto, suporte, pagamento.
Teste de usabilidade
Nesse teste priorizei ter 2 usuários que nunca usaram autoatendimento e que fossem da idade de 52+.
Comentários dos 52+, após o teste:
“Não gosto de colocar meu CPF em canto nenhum”
“Cenoura e legumes ou Verdura?”
“Minha maior dificuldade foi excluir o produto”
“É muito complicado, até no meu celular eu evito
escrever porque é tudo muito pequeno,
no whatsApp eu sempre mando áudio”
“Para você que é novo é muito fácil”
Insights
protótipo
UI design
Teste de usabilidade
Comentário
“Tá bem intuitivo o visual, simples de entender, principalmente o caminho feliz e quando precisei sair do caminho feliz foi muito simples de entender.
Ex: digitar código manual e pesar o produto.”
“Tá bem fácil de entender, botão com boa descrição, a tela não tá poluída”
Próximos passos
- Validar ticket de estacionamento pelo autoatendimento;
- Desenvolver aplicativo para fazer registro dos produtos;
- Ter opção de fazer pagamento com: 2 cartões, dinheiro + ticket restaurante,
apple pay, sansung pay; - Notificar o supermercado quando código de barra não for encontrado;
- Construção dos banners e suportes visuais para mercado;
- Aprimorar a acessibilidade no autoatendimento.
