AluraPets - Estudo de caso de UX e UI
Este projeto é o resultado do meu trabalho no 3º challenge de UX da Alura.
Mostrarei abaixo algumas das etapas e insights que me guiaram neste projeto,
desde a descoberta até a entrega final.
Este projeto é o resultado do meu trabalho no 3º challenge de UX da Alura.
Mostrarei abaixo algumas das etapas e insights que me guiaram neste projeto,
desde a descoberta até a entrega final.
O objetivo foi entender os possíveis problemas que ocorriam com os clientes da pet shop fictícia AluraPets e desta maneira melhorar a experiência de compra e consequentemente a fidelização dos usuários e clientes para uma maior recorrência de uso dos produtos e serviços ofertados.
Fundamental para qualquer projeto, acredito que empatia é o ponto primordial dentro do design centrado ao usuário, pois ao se colocar no lugar do usuário outras questões relevantes surgem, como a consistência visual e a facilidade de entendimento e uso. Tudo deve convergir para garantir que os objetivos dos usuários em relação aos produtos e serviços serão alcançados.
Atuei em todo o processo de Experiência do Usuário e também de Interface do Usuário, trabalhando de forma independente, usando o método de "Double Diamond" como guia.
Como não havia uma base definida, além das pesquisas e análises de melhoria e possíveis pontos de falha, optei por desenvolver tanto o site (em versão mobile e desktop) quanto o aplicativo.
Foram oito semanas de trabalho (em tempo parcial) para o desenvolvimento de todo o projeto incluindo as etapas de pesquisas e estruturação, além do desenvolvimento dos estilos, interfaces e protótipos.
Como processo de design optei por utilizar o duplo diamante, pois é uma metodologia que pode ser empregada em diversos contextos. Também é relativamente fácil de ser entendida e visualizada, além de ser amplamente utilizada , facilitando o entendimento por parte dos outros membros do time de design ou ainda futuras equipes diversas em colaboração.
A clássica abordagem do duplo diamante.
Isso significa que o projeto tem quatro grandes etapas, em um processo de divergência e convergência.
A primeira etapa do meu processo de design envolveu entender o briefing e realizar uma pequena pesquisa documental para avaliar os concorrentes. Em seguida realizei algumas pesquisas e entrevistas para entender como os potenciais clientes e usuários se comportam em relação ao mercado de pet shops.
Depois de analisar os insights que surgiram, comecei a conceituar algumas soluções de forma manual utilizando a metodologia do crazy eights e rabiscando esboços conceituais. Além disso, criei padrões para incorporar alguns princípios de design como contraste, tipografia e hierarquia, aumentando assim a consistência visual.
Em seguida foquei nos fluxos de usuário, wireframes e wireflows para me ajudar na organização e arquitetura das informações.
Com a interface pronta, pedi feedbacks de alguns colegas designers para entender as lacunas que ainda poderiam existir e assim iniciei a criação
Sabemos que os animais de estimação sempre estiveram presentes nas famílias brasileiras e mundiais. Atualmente, segundo dados da Abinpet o Brasil tem a segunda maior população de cães, gatos e aves em todo o mundo e é o terceiro maior país em população total de animais de estimação. São 54,2 milhões de cães, 23,9 milhões de gatos, 19,1 milhões de peixes, 39,8 milhões de aves e mais 2,3 milhões de outros animais.
O total é de 139,3 milhões de pets, o que demonstra a força potencial do setor na economia brasileira.
Realizei mais algumas pesquisas que podem ser conferidas no arquivo completo (Figjam).
As únicas informações disponíveis inicialmente foram:
Uma planilha com as principais reclamações que foi disponibilizada para nortear o desafio.
Sabia que tratava-se de uma pet shop tradicional que vendia online e estava passando por problemas de fidelização junto a seus clientes.
Eles me disseram o seguinte:
"Percebemos que nossa taxa de fidelização está muito baixa. Clientes que compraram uma vez não retornarão a comprar conosco, e gostaríamos de entender o motivo para melhorar a confiança e poder vender mais".
Com base nas informações fornecidas defini uma pergunta chave, para ajudaria a direcionar toda o meu esforço durante o desenvolvimento do projeto:
Como podemos melhorar a experiência de compra dos clientes da AluraPets?
Ao pesquisar na internet e também em lojas de aplicativos, as empresas com maior relevância e de maior visibilidade foram as que selecionei para efetuar a avaliação comparativa.
Primariamente, por serem empresas já consolidadas e conhecidas no mercado, funcionariam como referência, pois já possuíam estrutura sólida e consolidada no mercado, além de uma significativa base de clientes.
As escolhidas neste processo foram:
Cobasi
Petz
Petlove
Para esta análise utilizei alguns parâmetros, elencados abaixo:
Comunicação
Tom e voz
Público alvo
Inovação
Por fim, concluí que apesar de diferenças pontuais, os produtos e serviços são bem similares entre as empresas analisadas, o que demonstra bastante concorrência neste setor.
Optei por esse framework porque ele traz mais clareza sobre qual caminho seguir e poderia ajuda a focar no que mais importa.
Com base nas suposições e principalmente nas dúvidas pontuadas, pude avançar para as pesquisas de forma mais direcionada.
Comecei a desenhar um usuário fictício, uma proto-persona, com o objetivo de aumentar a empatia e entender melhor as dores existentes e onde eu poderia agregar mais valor à experiência de compra.
Após definir alguns pontos delicados na matriz CSD, realizei uma pesquisa através do google forms, para mapear melhor o perfil de usuários e ajudar a validar a proto-persona que havia desenvolvido inicialmente.
Optei por uma pesquisa anônima por ser menos invasiva e também por aumentar a confiança dos participantes e consequentemente a veracidade das respostas.
O único filtro que defini foi o de público-alvo, sendo o de: pessoas que possuem pets, assim teria certeza de que os participantes se encaixariam no perfil desejado.
O resultado completo consta nesta planilha. Consegui menos participantes do que gostaria, mas como havia definido deixar aberta por apenas 2 dias, decidi encerrar e dar prosseguimento no projeto sem atrasos.
Objetivo: Conforme a pesquisa quantitativa busquei validar se compram mais online ou presencialmente e qual a plataforma de preferência.
Objetivo: Descobrir qual a motivação ao realizar uma compra online e detalhes do que levam a este processo de compra, qual o meio preferido, site (mobile ou desktop) ou app.
Objetivo: Mapear quais os possíveis problemas mais expressivos e que podem ser evitados ou corrigidos.
Objetivo: Entender melhor o que ajuda a fidelizar o usurário em relação a uma empresa ou marca.
Objetivo: Mapear os produtos mais consumidos e a frequência de compra.
Objetivo: Descobrir se há demanda para os serviços além dos produtos já oferecidos e os motivos de uso destes serviços.
Preferem por ser perto de suas casas.
Normalmente nas mesmas lojas e não pesquisam.
Costumam comprar ração, brinquedos e utilizar os serviços de estética animal.
Quanto a experimentar coisas novas, gostam da ideia, mas não costumam experimentar.
O maior benefício está no atendimento bastante personalizado.
As maiores frustações são falta de variedade de produtos e os preços elevados.
Preferem por ser mais prático devido a falta de tempo ou por não possuírem meios de transporte.
Normalmente nas mesmas lojas, via site, mas costumam pesquisar antes.
Costumam comprar principalmente ração e não utilizam os serviços oferecidos.
Quanto a experimentar coisas novas, gostam da ideia, mas não costumam experimentar.
O maior benefício está na facilidade da compra.
As maiores frustações são a demora na entrega e a dúvidas quanto a determinados produtos que eventualmente não são sanadas pelas descrições.
Isso demonstra que há bastante margem para explorar essa modalidade de serviços por assinatura, pois apesar de afirmarem ser interessante ainda tinham dúvidas sobre a real necessidade.
Acredito que com incentivos os clientes poderiam aderir mais a esta modalidade e consequentemente o faturamento aumentaria, sem grandes modificações na estrutura de vendas já existente.
Esta é uma etapa importante, convergir para converter as pesquisas e análises em algo mais tangível e que me deixaria mais próximo da resposta à pergunta inicial, me guiando para a melhor resolução dos problemas levantados. "Como podemos melhorar a experiência de compra dos clientes da AluraPets?"
Neste momento validei as informações da proto-persona construindo uma persona, de forma mais fiel aos prováveis usuários da AluraPets, incorporando o que observei nas pesquisas e entrevistas realizadas e trazendo as frustações, desejos, motivações e demais aspectos emocionais.
Complementando, elaborei dois cenários, onde no primeiro inseri os problemas até então encontrados e no segundo propus uma melhor experiência, que ocorreria sem problemas.
Por fim, construí um pequeno storyboard, apenas para ilustrar, de forma mais visual e em etapas, as principais falhas encontradas no cenário problemático.
Amanda é muito ocupada e lembra que a ração do seu querido cachorro Snow está acabando. Snow come uma ração de alta qualidade e difícil de encontrar, depois de procurar em pet shops físicos em seu bairro decide pesquisar na internet para facilitar.
Apesar das grandes varejistas do segmento também terem a referida ração ela consegue localizar na AluraPets com um preço um pouco menor e com o incentivo de um cupom de desconto decide efetuar a compra.
Ela se sente apreensiva pois nunca comprou nesta loja antes e ao pesquisar mais sobre a opinião de outros cliente não gosta do resultado, porém resolve arriscar assim mesmo, pois já tinha perdido muito tempo e o valor não era tão alto para ela. Caso tudo corra bem ela terá uma nova opção de empresa para comprar produtos para seu amado pet.
Sua primeira surpresa ocorre já no momento do pagamento pois o cupom de desconto que havia ganho simplesmente não funciona, já cansada ela conclui a compra sem cupom mesmo
Passados alguns dias, Amanda se sente frustrada pois percebe que não consegue acompanhar o pedido, que já estava atrasado. Para piorar a situação, mesmo sem muito tempo e vontade
ao ligar na loja algumas vezes nenhum atendente consegue saber onde está o produto.
Então tenta solicitar um reembolso e percebe que também não será tão simples, pois um funcionário transfere para o outro e nenhum resolve o problema, “Acho que me dei mal” pensa ela.
Com um atraso de uma semana ela finalmente recebe o pacote de compra, porém ao abri-lo percebe que a ração estava com validade bem próxima se sentindo ainda mais frustrada.
Optei por padronizar a base da historia utilizada no cenário anterior, por isso o início se repete...
Ela inicia o checkout sem problemas, utiliza o cupom de desconto que havia ganho e fica feliz por estar economizando.
No dia seguinte ela se lembra da compra e decide verificar o progresso no aplicativo da loja e fica tranquila pois percebe que o produto já foi enviado antes mesmo do que previu e que o prazo é de alguns dias conforme constava no site.
Passados mais alguns dias ela recebe a encomenda, um pouco ates do prazo determinado, o que a deixa bastante satisfeita. Ao desembrulhar a encomenda percebe que está tudo correto com seu produto e que ainda há um pequeno brinde surpresa.
Ela gostou muito da experiência e sente confiante para futuramente realizar novas compras na AluraPets e ainda irá indicar o ótimo custo benefício para seus amigos.
Prosseguindo com o projeto, chegou o momento de convergir, aqui o primeiro passo foi criar um mapa da jornada de compra, utilizando o cenário problemático, destacando os pontos positivos e negativos e os aspectos emocionais deste processo com base nas informações da persona.
Meu foco estava em visualizar as falhas apontadas, focando nas soluções que poderiam ser utilizadas para minimizar as dores ou resolver os problemas.
Já tendo os dados coletados pelas pesquisas iniciais e sintetizados para os pontos a serem melhorados, iniciei a construção de um fluxo de compra base, que seria utilizado tanto visualmente quanto no aspecto de arquitetura da informação, para balizar o desenvolvimento posterior.a
Agora que havia construído uma base suficientemente estruturada de informações, parti para a definição do que iria desenvolver de soluções visuais. Optei por explorar ao máximo todas os meios e desenvolver tanto para desktop quanto para mobile, sendo que no segundo caso decidi abordar tanto uma versão do site voltada para os dispositivos móveis quanto um aplicativo específico.
Esta decisão se fundamenta com a pesquisa TIC Domicílios 2021 realizada pelo Comitê Gestor da Internet no Brasil (CGI.br), que afirma que o acesso à Internet exclusivamente pelo celular chegou a 67% dos usuários em 2021, atingindo um contingente de 51 milhões de pessoas.
Esboços
Crazy Eights
Decidi estruturar um Style Guide para nortear o projeto, trazendo mais consistência visual para os múltiplos suportes que iria prototipar, incluindo alguns componentes pensando em um cenário de futura expansão colaborativa, que poderia resultar em um Design System.
Outro ponto relevante, todas as cores que defini para a interface buscam um contraste elevado de no mínimo AA, conforme indicado pelas diretrizes WCAG.
Para aos grids, na versão desktop utilizei o padrão usual do bootstrap, com 12 colunas e o clássico com 4 colunas para as versões mobile e para o aplicativo. Já quanto aos espaçamentos, optei pelo de 8 pontos, por facilitar a implementação pensando na responsividade.
Como os elementos podem variar conforme os diferentes dispositivos e telas não defini todos os espaços de forma rígida, sendo que este processo serve apenas como um guia orientador.
Quanto a estruturação do projeto, decidi focar em três principais soluções. Primeiramente em uma área do pedidos, com possibilidade de rastreamento, sanando a principal reclamação apontada no material de briefing inicial.
Outro ponto que abordei foi um projeto de carrinho e checkout que contemplassem o uso correto de cupons e permitissem um fácil entendimento e aplicação das opções de frete.
Por fim, através de um insight que surgiu durante as entrevistas, desenvolvi uma área de compras recorrentes, incentivando a adesão com descontos e opções de fretes mais baratos, além da facilidade de uso. Apesar de já ser utilizado por outras empresas do segmento me parece ser uma opção interessante para aumentar as vendas sem alterar significativamente a estrutura já existente.
Para a construção dos wireframes optei por construir em média/alta fidelidade pois complementariam a baixa fidelidade dos esboços e também porque mostram com maior clareza toda a estrutura do produto final.
Como eu já havia construído um fluxo inicial mais genérico anteriormente, decidi utilizar os wireflows, que conforme proposto pela Nielsen Norman Group são uma alternativa mais detalhada aos User Flows (fluxos de usuário). Apesar do User Flow ser bastante detalhado em características e possibilidade ele é muito abstrato na camada visual, pois não exibe nem relaciona os “nós” do fluxograma às telas a que se referem.
Após todas as etapas já expostas, iniciei a criação das telas finais transformando os wireframes em imagens com a maior fidelidade possível, simulando um produto real pronto para ser entregue aos desenvolvedores.
Construí cerca de 40 telas divididas entre as três opções (desktop, mobile e aplicativo) e seguindo o fluxo previamente estruturado pelos wireflows desenvolvidos.
Com o projeto chegando ao fim, chegou o momento de criar protótipos navegáveis, para mostrar todo o desenvolvimento e também para efetuar os possíveis testes de usabilidade, pesar de os mesmos não serem abordados por mim neste projeto.
Você pode conferir o protótipo abaixo ou caso prefira, pode
acessar o protótipo navegável do aplicativo (Figma).
Esse trabalho foi desafiador desde o início, mas tive a oportunidade de colocar em prática todo o conhecimento adquirido durante os mais de vinte cursos que realizei na plataforma da Alura.
Através das diversas etapas acima expostas, construí toda a base necessária para um projeto
Vivenciar pesquisas, entrevistas e metodologias foi desafiador, mas ao mesmo tempo extremamente enriquecedor. Utilizar os diversos tipos de ferramentas e técnicas, que são essenciais e usualmente utilizadas pelos designers de experiência do usuário em geral, me fizeram crescer pessoal e profissionalmente, especialmente utilizando a empatia como elemento fundamental.
Continuando este case, seguiria para testes de protótipos com usuários, executando novas iterações, melhorias e pesquisas, pois não foram abordados durante o desenvolvimento deste projeto.
Por fim, buscaria novas possibilidades de melhorar a experiência dos clientes e a fidelização quanto à marca, iniciando novamente todo o processo.
Se houver algum problema, dúvida, sugestão ou feedback, por favor entre em contato comigo para que eu possa ajustar.
