Criando a UI de um e-commerce de notas de livros
Usando viéses cognitivos para criação de uma user interface para o aproveitamento de notas de livros
Esse case é a conclusão de dois estudos anteriores. Em um a minha hipótese inicial foi refutada, acreditava que a digitalização do mercado de livros causava um consumismo desenfreado, causando problemas relacionados a espaço para leitores, o qual pode ser vista aqui.
Posteriormente, identifiquei que uma oportunidade de negócio era o aproveitamento de artigos e notas de livros que já são tomadas normalmente, no entanto ficam parados, sendo utilizado quando o usuário deseja reler sobre o assunto, o case pode ser visto aqui.
Com base nisso, idealizei o Bucket Book, uma plataforma aberta a qualquer um que queira comercializar ou organizar suas notas de livros.
Criar um e-commerce é sempre um desafio, visto que esse tipo de plataforma utiliza muitos viéses cognitivos.
Como já foi atestado por Marcus E. Raichie e Debra A. Gusnard, o cérebro pode representar apenas 2% do peso do corpo no entanto consome 20% da energia gasta durante o dia.
Por meio desse fato, faz-se necessário usar os padrões que o usuário já conhece para que não haja uma sobrecarga cognitiva, afinal:
“Pensar é difícil”
Para a criação dessa User interface, foram utilizados 14 viéses cognitivos:
- Aversão ao risco — Coisas que já possuem certo histórico de avaliação parece mais confiáveis para serem escolhidos;
- Efeito Posse — Estamos mais dispostos a valorizar coisas que sentimos ser nossas;
- Rima como efeito de razão — Nossa mente se anima com declarações em rima;
- Viés da fala fácil — Palavras simples são confiáveis e valiosas;
- Efeito Grátis — Nós valorizamos mais algo que é grátis do que o que é muito barato;
- Efeito IKEA — A co-criação leva a um julgamento de valor mais elevado;
- Preço Redondo — Valores inteiros tendem a parecer mais confiáveis do que os terminados em 9;
- Efeito Contraste — O contraste gera maior lembrança;
- Superioridade de imagem — Nos lembramos muito mais de imagens do que de palavras;
- Efeito Posição serial — A ordem dos fatores altera o produto. As informações no topo e no final de uma lista serão mais lembrados;
- Efeito blocamento — Informações similares organizadas em grupos são melhores processadas;
- Viés curiosidade — A sensação de estar perdendo alguma informação nos leva a buscar a versão completa de algumas histórias;
- Efeito Zeigarnik — Nos sentimos tensos até que tarefas incompletas sejam concluídas;
- Paralisia de análise — Nossa capacidade de processar informações e tomar decisões diminui a cada decisão tomada;
- Loops de feedback — Buscamos por informações que apoiam nossas ações.
A metodologia empregada foi o duplo diamante. Nesse case, depois das definições feitas, se partiu para o desenvolvimento das telas, divergindo novamente de tudo que foi estabelecido para desenvolver um produto e convergir em uma solução.
Para criação desse produto, foi feito:
- Moodboard;
- Wireframes;
- Style guide;
- Alta fidelidade;
- Fluxograma.
Para isso foi utilizado como ferramenta o Figma.
Moodboard
Para a construção do meu moodboard, escolhi produtos que são cases de sucesso bem consolidados.
Determinei que os produtos a serem usados como referência são as ferramentas que já tem uma alta taxa de conversão dentro da jornada mapeada.
Como referência visual utilizei o trabalho de um PD com bacharelado em design.
- Amazon — Como os usuários entrevistados usam esse site para comprar os seus livros, faz sentido se inspirar nele;
- Medium — A ferramenta foi escolhida pois muitos usuários acabam por escrever artigos e tomar notas por meio da ferramenta.
O Moodboard pode ser visto abaixo:
Criação de wireframes
Para ter uma noção inicial de como seria o projeto, fiz wireframes em baixa fidelidade para entender como seria a base do projeto.
Com a estrutura base definida, consigo começar a trabalhar e fazer um refinamento, levantando ele para alta fidelidade.
Criação do style guide
Foi necessário criar um Style guide para se ter uma maior organização e celeridade no processo.
Nele se encontram:
- Logos;
- Cores;
- Estados de input;
- Stickers de viéses cognitivos utilizados;
- Tipografia;
- Ícones;
- Banco de imagem;
- Mindmap;
- Componentes.
Os componentes foram feitos no decorrer da confecção do projeto em alta fidelidade, com suas respectivas variantes.
Além de organizar o arquivo e me possibilitar trazer os itens nos assets, essa página pode ser útil para o desenvolvedor. O fato de ter todas as informações unificadas pode ajudar na criação de um CSS.
Criação do produto em alta fidelidade
No processo de criação do produto em alta fidelidade, optei por utilizar as referências do moodboard junto aos viéses cognitivos.
Tela 1 — Log-in
Nessa tela, foram utilizados dois tipos de viéses no copy:
- Efeito Posse — “Bem vindo ao seu Bucket Book”;
- Rima como efeito de razão — “Compartilhe sua leitura, compartilhe cultura”.
Foi utilizado também o log-in social, dessa forma aproveito as informações de redes sociais já utilizadas pelo usuário.
Tela 2 — Home
Nesta tela se tem três tipos de carrosséis:
- Notas recomendadas;
- Notas gratuitas;
- Livros para troca.
As informações relativas a livro vem de uma API externa. A estrutura de cada card, tem as informações a seguir:
- Capa;
- Nome;
- Edição;
- Autor;
- Resumo (124 primeiros caracteres).
Foram utilizados 10 viéses diferentes. A quantidade empregada foi grande devido ao fato de ser a tela que tende a ser a principal por gerar conversão.
Nesse frame, pode-se ver:
- Efeito Posse — “Olá, Bia, que tal encontrar sua próxima leitura?”;
- Viés da fala fácil;
- Efeito blocamento — Carrosséis separados por temas;
- Efeito posição serial — Utilizado nos temas dos carrosséis e nos itens dentro deles;
- Superioridade da imagem — A primeira informação dos cards é sempre a foto da capa do livro;
- Preço redondo — O preço de um item é sempre múltiplo de R$ 0,50;
- Efeito grátis — Carrossel com notas gratuitas, no centro da tela para respeitar a posição serial;
- Paralisia de análise — Possibilidade de compra rápida com um clique;
- Loops de Feedback — Notas de avaliações dadas pelos leitores;
- Viés da curiosidade — O card de cada livro tem um número de caracteres limitado. Todas as informações do livro só aparecem ao se clicar no card.
Ao se clicar em um dos itens dos carrosséis, é aberto um modal com todas as informações, sem uma limitação do número de caracteres do resumo.
Foi aplicado um efeito de background blur para que o usuário priorize as informações no modal.
A escolha dos livros em destaque na home se da por meio dos feedbacks dos leitores e das compras feitas pelo usuário dono daquela conta, possuindo um botão de “ver todos” no canto superior direito de cada carrossel.
Tela 3 — Carrinho de compras
Foi aproveitado a lateral direita para colocar um carrinho de compras fixo para itens adicionados, reduzindo assim a paralisia da análise.
Viéses utilizados:
- Efeito contraste — O botão de Comprar no carrinho tem um destaque maior dado por conta de um brilho um pouco maior do que o de cada card.
- Aversão ao risco — O gateway de pagamento deve ser um consolidado no mercado, o escolhido foi o Mercado Pago.
Tela 4 — Encontrar local de doação
O produto possui um campo de input para que seja digitado um ponto de referência, retornando o sebo/instituição de caridade mais próxima de acordo com o google maps.
Não foi utilizado nenhum viés nessa página, o motivo é que ela não gera monetização diretamente.
O intuito dessa feature é apenas manter o usuário por mais tempo na plataforma. A princípio o usuário doa os itens que não quer mais para o mesmo local por dificuldade de encontrar pontos de doação.
A função dessa tela é a de manter o usuário por mais tempo no produto, o que pode eventualmente gerar uma conversão.
Ao localizar o sebo/instituição de caridade mais próximo, é retornado:
- Foto;
- Nome;
- Nota do google com número de avaliações ao lado;
- Endereço;
- Se o local é um sebo ou instituição de caridade;
- Telefone;
- Caminho traçado no mapa.
Essas informações podem ser compartilhadas para um celular.
Tela 5 — Notas do usuário
Nessa tela pode-se encontrar as notas que estão sendo feitas, compradas e concluídas, necessariamente nessa ordem.
Há também a feature de fazer upload de algo já escrito junto a possibilidade de escrever diretamente na plataforma por meio de um template.
Como uma das formas de monetização é ter uma porcentagem do item vendido, optei por facilitar ao máximo a escrita das notas dos usuários.
Foram utilizados 4 viéses diferentes:
- Efeito posição serial — O fato de ler ou não as notas compradas é uma decisão do usuário, mas é desejado que ele avalie o item comprado. Dessa forma, optei por colocar ela no primeiro campo;
- Efeito posse — A área é relativa a compras e itens escritos pelo usuário;
- Efeito blocamento — Grupos são separados por notas não concluídas, notas compradas e notas concluídas;
- Efeito Zeigarnik — Barra de progresso nas notas compradas.
Tela 6 — Escrita de nova nota
Tela onde os usuários escrevem suas notas, primeiramente vinculando o livro e edição.
Dentro do fluxo, o usuário digita o nome do livro que se está sendo feito as notas, seleciona o item, escreve o texto e seleciona uma capa(único item opcional).
Foi utilizado um grid similar ao do Medium e o viés que a plataforma utiliza, o Efeito IKEA.
Posteriormente, clicando em publicar, aparece um modal com a opção de selecionar o valor do item e dando a opção de guardar unicamente para o usuário.
Foi aplicado uma sombra juntamente a um background blur para que o usuário priorize as informações no modal.
Nesse modal se garante o viés de preço redondo, o usuário pode inserir o valor manualmente, no entanto será aproximado para o valor mais próximo para cima e o usuário pode ajustar por meio das setas.
Tela 7 — Visualização de notas
Ao se acessar a área das notas do usuário e clicando em visualizar na nota desejada, aparece a tela a seguir.
Na medida em que o usuário vai lendo o artigo, a barra de progresso vai sendo atualizada.
foram utilizados 2 viéses:
- Efeito Posse;
- Efeito Zeigarnik — Barra de progresso.
Caso o usuário queira ver mais matérias do escritor em questão, basta clicar no avatar dele.
Nessa parte de fluxo, pode-se ver as notas que o usuário já escreveu e que podem ser compradas, junto com as notas que já foram compradas.
Foram utilizados 4 viéses:
- Efeito posição serial;
- Efeito blocamento;
- Efeito Posse;
- Efeito Zeigarnik.
Tela 8 — Itens salvos
No decorrer do fluxo, vendo um item que o usuário queira comprar posteriormente, ele pode salvar o item.
Para adicionar algo a partir dessa página, basta procurar se já está nela. Digita-se o nome do livro na barra de pesquisa da página, se já não estiver salva, basta clicar no botão adicionar.
Nesse modal, pode-se adicionar o livro ou notas e a depender da decisão tomada o fluxo muda.
Para notas, é necessário vincular o autor:
Neste modal se tem duas ações, cancelar e a de proucurar a nota que deve ser adicionada
E para livros, é adicionado o modal é de confirmação.
Tela 9 — Área de troca de livros
Não foram utilizados viéses cognitivos, visto que essa área não gera conversão para a plataforma, tendo a função apenas de manter o usuário na plataforma.
A plataforma não se responsabiliza pelas trocas.
Nessa página são adicionados os livros de interesse, seja eles para compra ou disponibilizados para trocas.
A troca deve ser negociado via chat, entre os usuários.
Fluxograma
Para garantir que não há nenhum furo no fluxo e ajudar o desenvolvedor a criar as rotas corretamente e correlacionar os itens de maneira correta, optei por fazer um fluxograma.
Conclusão
Esse case é a síntese de todos os estudos que fiz sobre o assunto. Mesmo que a hipótese inicial tenha sido invalidada, ela foi uma parte importante do processo, sem ela muitos dos insights obtidos demorariam para serem obtidos.
Com as informações coletadas pude atuar no segundo diamante, por meio dos sites mais utilizados pelo usuário e por meio de psicologia aplicada ao design, aumentando assim a possibilidade de conversão.
Caso queira entrar em contato comigo me mande uma mensagem pelo LinkedIn.
