Estudo de caso UX/UI: Estruturando uma página de artesanato
Iniciamos aqui uma tarefa de estruturar uma página para uma cliente que vende artesanato sob encomenda. No mundo de hoje, de correria e fast food, como saber se ainda dão valor ao artesanato? E se dão valor, por onde encontram? Feirinhas de bairros já quase não existem, a tecnologia está aí e o acesso a sites e redes sociais se tornou apenas mais do mesmo. Como ser notável? O que a artesã precisa para conquistar tal confiança?
Organizando o problema
A artesã quer ajudar as pessoas que desejam fazer confraternizações e tem dificuldade para encontrar uma decoração personalizada para o ponto principal, a mesa de bolo.
Conversando com ela e analisando seu histórico de encomendas chegamos ao seu público alvo principal: mulheres de todas as idades. Utilizando os adereços personalizados em biscuit elas podem decorar a festa de aniversário ou casamento com uma vela, topo de bolo entre outras opções.
Personas
Personas são personagens fictícios criados para representar os diferentes tipos de usuários que poderiam utilizar um site, uma marca ou produto de um modo similar.
Com nossos potenciais usuários traçados, utilizei do método protopersona para conhecer melhor nosso público alvo.
Pixar Storytelling
Após definir as personas, conseguimos aprofundar melhor nosso alvo e encaixar nosso produto em seu dia a dia utilizando o pixar storytelling:
Era uma vez a Helena. Todos os anos ela tentava surpreender os filhos na festa de aniversário decorando o espaço com personagens e gastando muito com decoração alugada. Um certo dia ela foi a uma festa de aniversário muito bem decorada e levou um pequeno souvenir de biscuit como lembrança do aniversariante. Por causa disso ela passou a conhecer artesanato em biscuit e decidiu optar por essa decoração no aniversário dos filhos, pois percebeu que além de personalizar da maneira que queria, os seus filhos poderiam levar para casa, decorando o cantinho preferido no quarto. Por causa disso ela começou a pesquisar profissionais que poderiam atender as expectativas de qualidade e preço. Até que finalmente encontrou um site com um belo portfólio que transmitiu qualidade, desejo e segurança para ela poder fazer as encomendas de decoração para as festas de aniversário dos filhos.
Pesquisa
Agora já temos a quem atingir, mas precisamos descobrir o que eles preferem e como fazem para resolver seus problemas hoje. Iniciei uma pesquisa direcionada e coletei os seguintes dados abaixo:
- 54% Admira quem faz artesanato.
- 80% Encomendaria uma peça de artesanato personalizada.
- 55% Buscaria recomendações de amigos.
- 65% Analisa além de preço, a qualidade do produto.
Os dados nos mostram que a grande maioria preferem peças personalizadas e as recomendações de amigos ganharam das buscas da internet, então, podemos dizer que as pessoas tem dificuldade de encontrar profissional confiável para produzir um artesanato que pode representar fortemente um momento único para a pessoa (ex: topo de bolo de casamento), logo, é notável que um campo com depoimentos no site agregaria confiança ao cliente.
A partir disso foi necessário criar uma jornada para esclarecer melhor o caminho que o usuário percorre e as necessidades e oportunidades de negócios que podemos explorar desde o planejamento até depois do evento.
Jornada do Usuário
Suposições e ideias
Inicialmente levantei algumas propostas de como ela poderia atingir seu público, transmitir confiança e valorizar o seu trabalho:
- Redes sociais
- Aplicativo móvel
- Landing page
Redes sociais são temporais, nem tudo é visto e a organização das fotos são confusas, agregar confiança seria complicado.
Aplicativo móvel tem um investimento muito alto e implicaria em uma ação inicial por parte do cliente: baixar o app.
A proposta sugerida e aceita pela artesã como uma ideia de maior impacto e menor esforço foi a de criar uma landing page para a captura de orçamentos e organização do seu portfólio. Acessível para smartphone, desktop e podendo futuramente ser evoluída de acordo com a necessidade e feedback dos clientes.
Desenhando a solução
Através de toda a análise sobre nosso usuário final, podemos agora estruturar nossa solução e focar em resolver os pontos onde encontramos suas dores e visualizamos oportunidades de negócios.
Partindo do princípio do Mobile First, comecei a esboçar o que poderia dizer de Rabiscoframe.
Rabiscoframe
Wireframe
Como a planta baixa de uma construção civil, o wireframe é o esqueleto do nosso produto, é onde posicionamos os elementos de acordo com briefing para evidenciar, explorar e validar melhor as necessidades do usuário junto ao nosso cliente.
Nesta proposta procurei fazer um Head Hero para transmitir uma mensagem de valor e agregar confiança ao cliente, pois ele terá que confiar no trabalho da artesã para produzir sua peça. Em conjunto com um botão Call to Action de solicitação de orçamento.
Em seguida teremos os benefícios de utilizar o biscuit como forma de decoração. Mais uma vez aqui engajando nosso usuário.
Uma vez o cliente engajado ele continuará por rolar a página e encontrará o portfólio de trabalhos da artesã.
No portfólio a ideia é exibir as imagens em cards, separados por categorias e com um scroll horizontal fazendo a passagem automática pelos menus posicionados acima para orientar o usuário de qual seção a imagem pertence.
Chegou a hora de exibir os depoimentos de clientes, tão importante quanto o portfólio, os depoimentos irão consolidar a confiança com o usuário que logo abaixo verá um simples formulário para solicitar orçamento.
Style Guide e protótipo de alta fidelidade
Wireframe aprovado, partiremos para a concepção do nosso protótipo de alta fidelidade.
Porém a um detalhe a ressaltar antes de começar esta importante fase do nosso projeto: Grids
A sequência do Grid de 8px foi definida aqui para manter uma consistência e melhor relação na matemática de grids para as várias telas que encontramos no mercado, você pode ver mais sobre isso no artigo do Vinicius Costa:
Grids definidos, vamos à marca:
Paleta de cores
Uma harmonia aqui é fundamental, é por onde nosso usuário ira sentir nosso produto, além de um bom fluxo de navegação as cores ajudam a disseminar as tarefas com exatidão e clarear as ações possíveis em cada tela para o usuário, tudo isso passa a ser parte da consistência visual definida pelo UI Designer.
Tipografia
Optei em utilizar fonte com serifa nos headings da página para transmitir tradição, qualidade e confiança ao usuário, mesclando ao Roboto nos parágrafos curtos de textos para uma leitura limpa e rápida.
Botões
Para uma melhor anatomia do botão os seus paddings horizontais serão o dobro das verticais e as fontes caixa alta com pequeno espaçamento entre os caracteres.
Formulários e Menus
Utilizaremos este para captura de orçamentos e outros dados no site.
O Label posicionado do lado de fora guia o usuário mesmo após o preenchimento do campo.
O place holder ajuda a otimizar o tempo de raciocínio do usuário sugerindo o que preencher.
Os ícones além de sua coloração para sucesso/erro, seguem uma premissa básica para os quase 10% de daltônicos da população masculina: ícones ajudam a identificar se realmente preencheram o campo corretamente.
Nos menus, a cor primária remete ao campo selecionado e a secundária aguarda o toque do usuário para continuar na navegação dos itens.
Enfim, nosso protótipo de Alta fidelidade
Com a base estruturada através do Style Guide, Grid de 8px e Atomic Design, concluí a proposta do produto
Processo contínuo
Para medir o sucesso do produto utilizaremos métricas como:
- Realizar testes A/B
- Análise de mapa de calor
- Testes de usabilidade com usuários
outros pontos que também merecem uma análise continua:
- Acessos (e por onde eles chegam)
- Cadastros de clientes
- Pedidos de orçamentos
- Quantidade de pessoas que compraram
- Retorno de compras da mesma pessoa (engajamento)
- Quantidade de itens na lista de desejo (intenção de compra)
- Depoimentos e avaliações (satisfação na compra)
Conclusão
Com um estudo centrado no usuário, este é o meu primeiro projeto de UI com foco em UX. Entendendo de perto as reais dores e necessidades do usuário, a sua jornada e o que ele enfrenta, desenvolvi um produto digital do zero com propósito de conduzi-lo a concluir sua tarefa com sucesso.
Este case faz parte do curso de UI com foco em UX do Leandro Rezende, que só tenho a agradecer por proporcionar um conteúdo tão rico e esclarecedor.
Aprendi as verdadeiras etapas para tirar do papel um produto digital, consegui aplicar métodos que facilitam e embasam as etapas nos processos de design, e assim criar um produto consistente e esclarecedor com base em fundamentos, pesquisas e o melhor: propondo e agindo em cima da dor e dificuldade do usuário.
