Visão Geral
O Projeto
Este projeto foi desenvolvido no desafio final da 41ª edição do curso Gama Experience, da instituição Gama Academy e contou com a participação de quatro product designers e sete desenvolvedores. De acordo com a banca examinadora, o projeto foi reconhecido como a terceira melhor solução desenvolvida. Apesar de desenvolvido em ambiente escolar, o projeto contou com uma stakeholder real.
O Problema
Cerca de 90% das pessoas que trabalham com artesanato não possuem loja virtual (Sebrae). Kelly, artesã e stakeholder do projeto, se encontra entre esta maioria e gostaria de potencializar suas vendas. Atualmente, suas vendas são feitas via Intagram e seus clientes encontram dificuldades no momento da compra.
A Solução
Criação de e-commerce e catálogo organizado para a marca, promovendo melhor visibilidade dos produtos e gestão do tempo nas vendas, além de tornar a experiência dos usuários mais agradável, ágil e segura para a compra.
Meu Papel
Participei da elaboração de pesquisa com usuários e minha maior contribuição foi na parte de delivery (solução e melhoria). Fui responsável pela criação da jornada do usuário, criação de wireframes, prototipação em alta fidelidade e elaboração e condução de teste de usabilidade.
O Time
Product designers: Cláudio Lopes, Euller Fernandes, Jayne Nunes e Marília Pimenta. Desenvolvedores: Anderson Sousa, Luiz Felipe Mendes, Danilo Sales, Juliana Andrade, Lucas Francisco, Rafael Nascimento e Talita de Lana.
Metodologia
Foi utilizada a metodologia do Design Thinking com o objetivo de encontrar a melhor solução para o problema, seguindo as seguintes etapas:
No processo de Design Thinking é possível criar um produto fundamentado nas necessidades do usuário, por esse motivo, essa metodologia foi adotada. A seguir, será mostrado os resultados obtidos em cada uma das etapas realizadas.
Pesquisa
Para investigação do problema foi realizada uma desk research, sintetizada em uma matriz CSD, e um questionário com usuários que já realizaram uma compra pelo Instagram para entender quais são suas maiores dores e necessidades. Na pesquisa, 30 pessoas responderam o questionário. E os principais insights encontrados foram:
Também foi realizado um benchmarking com sites que possuem premissas semelhantes, de modo a verificar quais são as funcionalidades existentes. Os dados obtidos contribuíram com ideias que permitiram entender o que a plataforma pode trazer de vantagem significativa para os usuários.
Definição
Persona
Com base na pesquisa, foi elaborada uma persona, etapa fundamental para maior entendimento das necessidades do usuário e o contexto que ele se encontra. Projetar para uma persona definida ajuda a tomar decisões de design mais assertivas, visto que é uma forma de maior empatia e conexão com o usuário.
Jornada do Usuário
A jornada do usuário construída ilustra as etapas que envolvem o relacionamento entre Gabriella e o produto ofertado pela stakeholder, reconstruindo todos os passos antes, durante e depois da compra. É uma forma mapear as oportunidades existentes e propor uma solução mais assertiva.
Ideação
Prioridade de Funcionalidades
As funcionalidades foram estabelecidas de acordo com os insights obtidos por meio da pesquisa com usuários, a stakeholder e o benchmarking, mapeando as prioridades e esquematizadas no gráfico a seguir:
Matriz MSCW
Essa ferramenta foi escolhida para hierarquizar as prioridades elencadas no quadro anterior. O termo MSCW é um acrônimo em inglês derivado da primeira letra de cada uma das quatro categorias: must have (tem que ter); should have (deve ter); could have (poderia ter); won’t have (não deve ter).
Arquitetura da Informação
Uma vez estabelecida a importância das funcionalidades, foi definida a arquitetura do site, representada pelo mapa a seguir:
Fluxograma
Com o mapa do site estruturado, foi definido o fluxo ideal do usuário, considerando o processo completo de compra, partindo do momento que o usuário entra no site até o recebimento da encomenda. Este fluxo foi divido em dois momentos, o realizado dentro do site e o realizado fora dele.
Moodboard
Foi feito o uso de um mural composto por elementos gráficos, imagens e cores de modo a captar a essência do projeto e que servem de base para definir uma identidade visual.
Prototipação
Wireframe
O wireframe foi criado com o objetivo de auxiliar a criação das telas finais e validar as funcionalidades com os desenvolvedores. Com o wireframe pronto, foi realizada uma reunião com todos os membros do time, onde foi possível discutir todas as funcionalidades pensadas e verificar a possibilidade de execução.
Style Guide
Baseado no moodboard, o style guide passa a ideia de leveza, ternura e artesanato, que definiu tanto a escolha das cores, como da principal fonte, a Montserrat.
Tom de Voz
A linguagem verbal foi adequada ao tipo de produto a ser vendido e aos usuários, visando facilitar ao máximo a comunicação. Por se tratar de acessórios femininos, em geral com muitos detalhes, cores e brilhos, além das observações da persona construída, foram estabelecido as seguintes diretrizes:
- Personalidade: amigável, extrovertida
- Linguagem: clara, simples
- Tom: alegre, “fofo”
- Propósito: acolhedor, enaltecedor
Protótipo
Uma vez validado o wireframe junto aos desenvolvedores, foi construído um protótipo inicial do site em alta fidelidade no Figma, o qual foi em seguida disponibilizado para o teste de usabilidade.
Protótipo Navegável - Versão Inicial
Teste de Usabilidade
Nessa fase o objetivo foi identificar a relação do usuário com o protótipo, verificando se o fluxo realmente está claro, se existe dúvida em alguma parte e por fim, como foi a experiência como um todo.
Plataforma Maze
Foi utilizada a plataforma Maze para realização do teste de usabilidade, que era composto por uma série de tarefas a serem cumpridas. Um link foi gerado e enviado para o público selecionado acessar a partir de seu desktop ou notebook. O teste ficou disponível por um período de 24 horas e posteriormente os dados foram coletados, porém, por se tratar de um teste quantitativo, os dados obtidos foram insuficientes e foi necessário a adição de um teste qualitativo.
Veja os resultados do teste no Maze aqui!
Entrevista
Os testes de usabilidade pelo Maze deixaram algumas questões que necessitavam de um maior aprofundamento para sua compreensão. Sendo assim, foi realizada a aplicação de uma pesquisa por meio de entrevistas. Após elaboração de roteiro com instruções claras e detalhadas sobre as tarefas e serem desempenhadas, foram recrutadas três pessoas, com base na persona desenvolvida anteriormente, para averiguar por meio do desempenho delas a ocorrência de falhas, bem como a necessidade de melhorias. O teste foi composto por três objetivos:
- Comprar um laço;
- Fazer uma avaliação do laço comprado;
- Comprar um acessório personalizado.
Após realizado, foi possível concluir que:
- A compra do laço foi cumprida com êxito. Os usuários encontraram todas as informações e consideraram a experiência satisfatória;
- Na avaliação, os usuários tiveram muitas dificuldades de executar, pois não acharam o campo para colocar as informações;
- A compra do acessório personalizado acarretou dúvidas, como sobre quais itens poderiam ser personalizados; e o entendimento de que só seria personalizável o que estava nas imagens.
Melhorias
Solução Final
Após conclusão do teste de usabilidade, foi possível identificar as seguintes melhorias:
- Ampliar a imagem do produto ao clicar em cima;
- Repensar o caminho dos banners da pagina home;
- Garantir que as imagens correspondam a descrição;
- Padronizar as imagens;
- Repensar a questão dos comentários no geral;
- No carrinho, trocar “subtotal” por “preço”;
- Acrescentar um botão de continuar comprando, que direcione para loja novamente;
- Rever fontes e tamanho de fontes;
- Revisar o texto em “personalização”;
- Deixar claro quais produtos podem ser personalizados;
- Repensar a área de pedido em personalizados.
Sendo assim, o protótipo foi ajustado e pode ser conferido no link abaixo.
Protótipo Navegável - Versão Final
Aprendizados
- A comunicação assertiva entre designers e desenvolvedores foi essencial para o desenvolvimento de um bom projeto;
- A gestão do tempo e organização das tarefas foi fundamental para entrega do projeto dentro do prazo estipulado;
- As pesquisas qualitativas ajudaram a confirmar pontos levantados nas pesquisas quantitativas, além de trazer insigths relevantes;
- O style guide bem definido e detalhado facilitou a entrega para os desenvolvedores.
- O que parece fácil e intuitivo pode ser, na verdade, difícil e/ou confuso aos olhos do usuário;
- É essencial decidir conscientemente qual resolução de tela será utilizada como principal, para evitar problemas futuros na diagramação do site.