Este projeto foi dividido em várias etapas, desde a aplicação de um questionário com Benjamim até testes de usabilidade com usuários potenciais. Algumas dessas etapas ocorreram simultaneamente, outras separadas, porque dependiam de etapas anteriores.
Veja a seguir como foi cada uma dessas etapas.
Para entender melhor quem é a Benjamim Primores Naturais, o que o cliente espera do site e outros aspectos, planejamos uma entrevista, o que não aconteceu por conflito de horários. Pensando em resolver esse pequeno desencontro, enviamos um questionário para coletar as principais informações que precisávamos para o projeto e para conhecer melhor nosso cliente.
Com essa pesquisa e os contatos posteriores que tivemos com a equipe da Benjamim para esclarecer as dúvidas remanescentes, constatamos que os óleos essenciais são seu principal produto no momento; que desejam aprimorar suas técnicas de venda online, pois precisam de um espaço melhor, mais acessível e de fácil visualização, que reúna catálogos de preços com informações de uso e benefícios terapêuticos. Atualmente essas informações estão espalhadas.
Buscamos inspiração em diversos sites, tanto de concorrentes diretos, aqui considerados outros produtores artesanais, como Flor de Menta, Aflora e VegaLótus; quanto de concorrentes indiretos, algumas lojas maiores que também produzem cosméticos, não necessariamente naturais, como Avon, B.O.B, Lush e Sallve; e também lojas que não têm nada a ver com o produto, mas têm uma boa aparência, como a InboxShoes.
Abaixo está um quadro de inspirações que montamos com algumas das páginas e fotos que encontramos em nossa pesquisa .
Uma proposta que trouxemos para a Benjamim foi o redesenho da marca. Antes, a logomarca era formada por quatro benjamins coloridos (verde, amarelo, roxo e rosa) em torno de uma flor lilás.
Buscamos trazer um visual mais atual e minimalista para a logomarca que esteja mais alinhada com a proposta do site. Nossa logomarca proposta pode ser vista abaixo. Neste novo logotipo, optamos por utilizar a tonalidade mais predominante do anterior (roxo) e deixar apenas um Benjamin em evidência.
Para a sua criação, representamos alguns elementos que o cliente gostaria de destacar, como a natureza, o cheiro e a suavidade, a partir de uma nova representação da ave, mais leve e contínua, procuramos criar um look clean e elegante.
Além aa criação do logotipo, também criamos alguns exemplos de aplicação nos produtos, que foram posteriormente utilizados na seção de produtos do site. Veja as embalagens criadas abaixo.
Com base no estilo e cores do novo logotipo, foi possível começar a criar um guia de estilo para o site. Abaixo estão os padrões de cores, tipografia, botões e campos de formulário definidos para este projeto.
Definir como os produtos seriam organizados no site não foi uma tarefa fácil. Para isso, fizemos um card sorting com alguns voluntários. Pedimos que organizassem em grupos os 30 produtos comercializados pela Benjamim e nomeasse esses grupos.
Além disso, vimos o que é mais utilizado no mercado e também levamos em consideração o sistema utilizado atualmente pela Benjamim.
A partir de todas essas fontes de informação, criamos o mapa do site, que serviu de base para as etapas seguintes.
Após definir o mapa do site, começamos a pensar em como seriam as páginas, o que seria apresentado em cada uma delas, montando um wireframe.
Decidimos trabalhar no fluxo de compra de um óleo essencial, por isso criamos o wireframe com página principal, página de óleos essenciais, página de produto, carrinho de compras e todas as telas de pagamento necessárias. Além disso, vimos que seria necessário incluir também uma página de “como usar” para trazer as informações que faltam aos usuários.
Fizemos testes de usabilidade com quatro usuários potenciais. Apesar do pequeno número de testes, conseguimos descobrir bastante melhorias que poderiam ser feitas antes de criarmos o protótipo de alta fidelidade.
Os testes nos trouxeram insights como:
- Incluir “como usar” no menu principal, antes fazia parte de aromaterapia
- Adicionar CEP na sacola, para que o usuário saiba quanto será o valor antes de ir para a área de fechar pedido
- Mudar o botão de “comprar” para “adicionar à sacola” e adicionar o botão “ver detalhes”, percebemos que o usuário fica mais a vontade com essa abordagem
- Trocar o termo “benefícios” por “propriedades”, que é mais adequado no contexto
- Adicionar uma seção “cuidados” na página do produto, especificando os cuidados que devem ser tomados com cada produto
Fazendo as alterações necessárias e aplicando o guia de estilo ao wireframe, chegamos ao resultado final do nosso projeto:
um protótipo de alta fidelidade
Na fase final do projeto, nosso maior desafio foi melhorar a página “Como usar”, porque ela possuía muito texto e precisávamos encontrar uma maneira de disponibilizar esse conteúdo sem ficar cansativo. Optamos por deixar mais clara a divisão das seções e incluir algumas fotos relacionadas aos usos descritos. Assim, deixou de ser uma página só com texto do começo ao fim e passou a ter um visual mais fluido.
