OBJETIVO
Identificar as necessidades dos usuários e dos negócios para desenvolver uma jornada de autoatendimento amigável para o público brasileiro, pensando em usuários de diferentes perfis.
Minha função
Product Designer
Ferramentas
Figma, Figjam, Optimal Workshop, Maze
Pesquisa
Logo de início já foi possível identificar alguns flows fundamentais, como: escanear produtos, solicitar ajuda e checkout.
Para aprofundar no mercado de autoatendimento foi realizado o Benchmarking com os principais nomes do setor, sendo possível trazer novas complexidades:
1.
Remover item demandar interferência humana;
2.
Mercados costumam adotar limitação de 20 itens;
3.
Produtos 18+ travam a tela até liberação de atendente;
4.
Instruções fora da tela, podem passar despercebidas
Em seguida, para compreender melhor as necessidades de negócios e dos clientes, foi aplicada a técnica Blueprint;
O caráter holístico colaborou a enxergar os melhor os fluxos e
possíveis atritos:
1.
Como apresentar na tela os itens que precisam de balança, com valor e peso?
2.
Como desenhar etapa de pesagem pensando em autonomia?
Definição
Para esboçar algumas ideias da jornada principal (escanear, editar carrinho e pagar) da navegação do autoatendimento, voltei a conversar com as pessoas usuárias em um Crazy 8s de três cenários:
1.
Escanear itens;
2.
Tela Checkout;
3.
Catálogo de itens.
OBJETIVO
Identificar as necessidades dos usuários e dos negócios para desenvolver uma jornada de autoatendimento amigável para o público brasileiro, pensando em usuários de diferentes perfis.
Minha função
Product Designer
Ferramentas
Figma, Figjam, Optimal Workshop, Maze
Pesquisa
Logo de início já foi possível identificar alguns flows fundamentais, como: escanear produtos, solicitar ajuda e checkout.
Para aprofundar no mercado de autoatendimento foi realizado o Benchmarking com os principais nomes do setor, sendo possível trazer novas complexidades para a exploração:
1.
Remover item demandar interferência humana;
2.
Mercados costumam adotar limitação de 20 itens;
3.
Produtos 18+ travam a tela até liberação de atendente;
4.
Instruções fora da tela, podem passar despercebidas
Em seguida, para compreender melhor as necessidades de negócios e dos clientes, foi aplicada a técnica Blueprint;
O caráter holístico colaborou a enxergar os melhor os fluxos e
possíveis atritos:
1.
Como apresentar os itens que precisam ser pesados?
2.
Como desenhar a etapa de pesagem pensando em autonomia?
Definição
Para esboçar algumas ideias da jornada principal (escanear, editar carrinho e pagar) da navegação do autoatendimento, voltei a conversar com as pessoas usuárias em um
Crazy 8s de três cenários:
1.
Escanear itens;
2.
Tela Checkout;
3.
Catálogo de itens.
Como resultado da dinâmica foi possível compreender que os usuários participantes demonstram preferir:
1.
Alimentos organizados em categorias (verduras, legumes, frutas);
2.
Redução na carga de leitura, optando por feedback visual.
Antes de começar a desenhar as interfaces resolvi fazer análise de heurísticas com os competidores de modo fosse possível me nortear à melhores decisões de design.
Rabiscoframe
Nessa etapa preferi desenhar À mão para extrair mais ideias, sem me apegar a fidelidade e até mesmo a uma ideia em si; para cada tela desenhei 3 ideias diferentes. Depois de refinar cheguei ao resultado abaixo.
Para verificar se estava seguindo um bom caminho apliquei teste de usabilidade as pessoas usuárias em dois cenários de maior complexidade na jornada de compra:
1. Editar carrinho (excluir item).
2. Encontrar item para pesagem.
+90%
Em média de acertos
Solução Final
Pensando nas maiores complexidades durante a descoberta, trouxe a partir da etapa de escanear produtos a possibilidade de editar o carrinho, seja para aumentar a quantidade, quanto remover item indesejado ou engano.
1.
A partir do primeiro item escaneado é possível iniciar a visibilidade do sistema de toda a jornada.
2.
Visualização do carrinho com imagens dos produtos servindo como feedback para confirmação dos itens.
Caso algum item precise de verificação de idade, existe a a sinalização e disponibilidade de escolha ao cliente, para remover o item ou solicitar atendente.
Ao clicar no [+] no card dos itens aparece o modal para selecionar a quantidade desejada.
O mesmo vale para o [-] quando
necessário remover algum produto do carrinho.
1.
Para a pesagem basta identificar o alimento. Selecionar por categoria, filtro de mais populares ou pelo nome na barra de pesquisa.
2.
Como resultado da pesquisa toda a jornada é jornada é bastante visual, contando com a possibilidade de reconhecer os produtos por imagens.
Em sequencia, priorizei que as informações de peso e valor fossem facilmente reconhecidas por padrões já estabelecidos, como de uma balança regular encontrada em mercados.
Para a tela de checkout é apresentado o resumo do carrinho com rolagem própria, seguindo o padrão da jornada, para quando a compra é de maior quantidade.
Para priorizar a autonomia fiz a tela do botão de ajuda, contendo
opções por necessidade e preferencia:
1.
Chamar atendente.
2.
Instruções do autoatendimento
3.
Central de dúvidas mais comuns.
As escolhas de cores, ícones e tipografia foram determinadas pelo Styleguide da Square. Não foi utilizado UI Kit para o case, bem como todo o desenvolvimento dos componentes foram elaborados por mim.
Bora conversar? :)
Manda um alô que respondo rapidinho!
Copiar e-mail
Copiado!
Beatriz Leal
© 2024
Beatriz Leal
© 2024
Beatriz Leal
© 2024
OBJETIVO
Identificar as necessidades dos usuários e dos negócios para desenvolver uma jornada de autoatendimento amigável para o público brasileiro, pensando em usuários de diferentes perfis.
Minha função
Product Designer
Ferramentas
Figma, Figjam, Optimal Workshop, Maze
Pesquisa
Logo de início já foi possível identificar alguns flows fundamentais, como: escanear produtos, solicitar ajuda e checkout.
Para aprofundar no mercado de autoatendimento foi realizado o Benchmarking com os principais nomes do setor, sendo possível trazer novas complexidades para a exploração:
Em seguida, para compreender melhor as necessidades de negócios e dos clientes, foi aplicada a técnica Blueprint;
O caráter holístico colaborou a enxergar os melhor os fluxos e
possíveis atritos:
1.
Como apresentar os itens que precisam ser pesados?
2.
Como desenhar a etapa de pesagem pensando em autonomia?
1.
Alimentos organizados em categorias (verduras, legumes, frutas);
2.
Redução na carga de leitura, optando por feedback visual.
Como resultado da dinâmica foi possível compreender as preferências que as pessoas usuárias demonstram preferir:
Definição
Para esboçar algumas ideias da jornada principal (escanear, editar carrinho e pagar) da navegação do autoatendimento, voltei a conversar com as pessoas usuárias em um Crazy 8s de três cenários:
1.
Escanear itens;
2.
Tela Checkout;
3.
Catálogo de itens.
Antes de começar a desenhar as interfaces resolvi fazer análise de heurísticas com os competidores de modo fosse possível me nortear à melhores decisões de design.
Rabisco
frame
Nessa etapa preferi desenhar À mão para extrair mais ideias, sem me apegar a fidelidade e até mesmo a uma ideia em si; para cada tela desenhei 3 ideias diferentes. Depois de refinar cheguei ao resultado abaixo.
Para verificar se estava seguindo um bom caminho apliquei teste de usabilidade as pessoas usuárias em dois cenários de maior complexidade na jornada de compra:
1. Editar carrinho (excluir item).
2. Encontrar item para pesagem.
+90%
Em média de acertos
Solução
Final
Pensando nas maiores complexidades durante a descoberta, trouxe a partir da etapa de escanear produtos a possibilidade de editar o carrinho, seja para aumentar a quantidade, quanto remover item indesejado ou engano.
1.
A partir do primeiro item escaneado é possível iniciar a visibilidade do sistema, indicando estágio das etapas.
2.
Visualização do carrinho com imagens dos produtos servindo como feedback para confirmação dos itens.
Caso algum item precise de verificação de idade, existe a sinalização e disponibilidade de escolha ao cliente, para remover o item ou solicitar atendente.
Ao clicar no [+] no card dos itens aparece o modal para selecionar a quantidade desejada.
O mesmo vale para o [-] quando
necessário remover algum produto do carrinho.
1.
Para a pesagem basta identificar o alimento. Selecionar por categoria, filtro de mais populares ou pelo nome na barra de pesquisa.
2.
Como resultado da pesquisa toda a jornada é jornada é bastante visual, contando com a possibilidade de reconhecer os produtos por imagens.
Em sequencia, priorizei que as informações de peso e valor fossem facilmente reconhecidas por padrões já estabelecidos, como de uma balança regular encontrada em mercados.
Para a tela de checkout é apresentado o resumo do carrinho com rolagem própria, seguindo o padrão da jornada, para quando a compra é de maior quantidade.
1.
Remover item demandar interferência humana;
2.
Mercados costumam adotar limitação de 20 itens;
3.
Produtos 18+ travam a tela até liberação de atendente;
4.
Instruções fora da tela, podem passar despercebidas
Para priorizar a autonomia fiz a tela do botão de ajuda, contendo
opções por necessidade e preferencia:
1.
Chamar atendente.
2.
Instruções do autoatendimento
3.
Central de dúvidas mais comuns.
As escolhas de cores, ícones e tipografia foram determinadas pelo Styleguide da Square. Não foi utilizado UI Kit para o case, bem como todo o desenvolvimento dos componentes foram elaborados por mim.
Como resultado da dinâmica foi possível compreender que os usuários participantes demonstram preferir:
1.
Alimentos organizados em categorias (verduras, legumes, frutas);
2.
Redução na carga de leitura, optando por feedback visual.
Antes de começar a desenhar as interfaces resolvi fazer análise de heurísticas com os competidores de modo fosse possível me nortear à melhores decisões de design.
Rabiscoframe
Nessa etapa preferi desenhar a mão para extrair mais ideias, sem me apegar a fidelidade e até mesmo a uma ideia em si; para cada tela desenhei 3 ideias diferentes. Depois de refiná-las cheguei ao resultado abaixo.
Para verificar se estava seguindo um bom caminho apliquei teste de usabilidade com usuários em dois cenários de maior complexidade:
1. Editar carrinho (exclusão de item).
2. Encontrar item para pesagem.
+90%
Em média de acertos
Solução Final
Pensando nas maiores complexidades do projeto, durante a descoberta, trouxe, a partir da etapa de escanear produtos a possibilidade de editar o carrinho, seja para aumentar a quantidade, quanto remover algum item.
1.
A partir do primeiro item escaneado é possível iniciar a visibilidade do sistema.
2.
Visualização do carrinho com imagens dos produtos servindo como feedback para confirmação dos itens.
Caso algum item precise de verificação de idade, existe a a sinalização e disponibilidade de escolha ao cliente, para remover o item ou solicitar atendente.
Ao clicar no [+] no card dos itens aparece o modal para selecionar a quantidade de itens desejada.
O mesmo vale para o [-] quando
necessário remover algum produto do carrinho.
1.
Para a pesagem basta identificar o alimento. Selecionar por categoria, filtro de mais populares ou pelo nome na barra de pesquisa.
2.
Como resultado da pesquisa toda a jornada é jornada é bastante visual, contando com a possibilidade de reconhecer os produtos por imagens.
Em sequencia, priorizei que as informações de peso e valor fossem facilmente reconhecidas por padrões já estabelecidos.
Para a tela de checkout é apresentado o resumo do carrinho com rolagem própria, seguindo o padrão da jornada, para quando a compra é de maior quantidade.
Para priorizar a autonomia fiz a tela do botão de ajuda, contendo
opções por necessidade e preferencia:
1.
Chamar atendente.
2.
Instruções do autoatendimento
3.
Central de dúvidas mais comuns.
As escolhas de cores, ícones e tipografia foram determinadas pelo Styleguide da Square. Não foi utilizado UI Kit para o case, bem como todo o desenvolvimento dos componentes foram elaborados por mim.
Bora conversar? :)
Manda um alô que
respondo rapidinho!
Beatriz Leal
© 2024
Beatriz Leal
© 2024