useVenus: a vitrine que eu fiz para a minha esposa
No post sobre JAMStack eu contei como montei a arquitetura do site da minha esposa. Agora quero mostrar o outro lado: o que o site faz e por que cada funcionalidade existe.
De onde veio a ideia
A Thainá, minha esposa, vende produtos de beleza pelo Instagram e pelo WhatsApp, principalmente d'O Boticário. Ela posta o que tem em estoque e as promoções, e a cliente chama no privado. A partir daí, a conversa quase sempre segue o mesmo roteiro: qual o preço, tem pronta entrega, quais as formas de pagamento, precisa encomendar.
O pedido dela foi simples: um lugar para mostrar os produtos que ela tem. Foi assim que nasceu a Use Vênus.
Se você quer saber como o site é construído (Prismic, build estático e deploy automático), está tudo no post O que é JAMStack?. Aqui eu vou falar de produto.
Uma vitrine, não uma loja
A primeira decisão foi o que o site não seria. Ele não é um e-commerce. A cliente não cria conta, não informa cartão e não paga nada pelo site.
Isso foi de propósito. A venda da Thainá funciona porque a cliente conversa com ela. Ela tira dúvidas, indica um presente, combina a entrega. Se o site tentasse substituir essa conversa, ele resolveria um problema que ela não tem e criaria outros, como pagamento, cadastro e dados pessoais para proteger.
Então o papel do site é outro: responder antes as perguntas que se repetem e levar a cliente para o WhatsApp já sabendo o que quer.
A opinião é o produto
O Boticário já tem site e catálogo. Se a Use Vênus fosse só mais uma lista de produtos com preço, não teria motivo para alguém entrar nela.
O que a Thainá tem de diferente é a opinião. Por isso a frase que abre a página inicial é dela: "Eu não vendo tudo. Vendo o que eu uso, testo na minha pele e indicaria para a minha melhor amiga."
Cada produto tem um bloco de opinião, escrito em primeira pessoa, com:
- uma nota de 1 a 5;
- para que ocasião ele é ideal;
- os destaques, o que ela mais gosta nele;
- uma dica de uso, quando ela quiser dar uma.
Os perfumes ainda ganham a pirâmide olfativa: as notas de saída, de coração e de fundo, explicadas como "primeiros minutos", "as primeiras horas" e "o que fica no fim do dia". Um trecho da opinião também aparece no card do produto no catálogo, então a cliente lê a voz da Thainá antes mesmo de abrir a página.
Preço, estoque e promoção à vista
Boa parte daquele roteiro de perguntas se resolve mostrando as informações certas no lugar certo.
- Preço: quando o produto está em promoção, o preço antigo aparece riscado ao lado do novo, com a porcentagem de desconto.
- Estoque: a página do produto mostra quantas unidades ela tem. Quando sobram duas ou menos, o aviso muda para "Últimas 2 unidades em estoque", e o card do catálogo ganha uma etiqueta.
- Promoções: a página inicial tem uma seção só com os produtos em promoção, e o catálogo tem o filtro "Só promoções" e a ordenação por maior desconto.
O catálogo também filtra por categoria e ordena por preço. Na página de cada produto, uma seção de relacionados mostra primeiro os produtos da mesma categoria.
A sacola que vira mensagem
Aqui está a funcionalidade de que eu mais gosto.
No post de JAMStack eu disse que a cliente não precisava de carrinho de compras. Continua valendo, mas o site tem uma sacola. A diferença é que ela não leva a um pagamento. Ela vira uma mensagem.
A cliente adiciona os produtos, ajusta as quantidades e clica em "Finalizar pelo WhatsApp". O site abre uma conversa com a Thainá e a mensagem já vem escrita, mais ou menos assim:
> Oi, Thainá! Vim pelo site da Use Vênus e gostaria de pedir:
> • 1x Lily Eau de Parfum (75 ml) — R$ 299,90
> Total: R$ 299,90
> Pode me confirmar a disponibilidade?
Alguns detalhes fizeram diferença:
- Nada de cadastro. A sacola fica salva no próprio navegador. Dá para fechar o site e voltar depois sem perder o que escolheu.
- A sacola respeita o estoque. Não dá para pedir cinco unidades de um produto que tem três.
- A última palavra é da Thainá. A mensagem termina pedindo para confirmar a disponibilidade, e a sacola mostra um "Total estimado". Pagamento e entrega continuam sendo combinados na conversa.
- Atalho para um produto só. Na página do produto, também dá para pedir só aquele item direto pelo WhatsApp, sem passar pela sacola.
Para a Thainá, a vantagem é que o pedido chega organizado. [completar: o que mudou no dia a dia dela depois disso? Ex.: menos perguntas repetidas, pedidos mais completos.]
Pensado para quem vai editar
O site tem duas usuárias: a cliente e a Thainá. E a Thainá não é desenvolvedora.
Por isso, no Prismic, todos os campos estão em português e explicam o que esperam. Alguns exemplos:
- Promoção é só um campo. "Preço promocional (R$, deixe vazio se não estiver em promoção)". Preencheu, o produto entra na seção de promoções com o desconto calculado. Apagou, ele sai.
- Estoque é um número. É dele que saem o aviso de últimas unidades e o limite da sacola.
- "Meu favorito (marque só um)". O produto marcado ganha destaque na página inicial, com a opinião dela.
- Categorias são dela. Ela pode criar uma nova e escolher a ordem em que aparecem nos filtros, sem me pedir nada.
- A foto é opcional. Sem foto, o site mostra uma ilustração do produto, com o formato (perfume, loção, batom...) e a cor que ela escolher. Assim, um produto pode entrar no catálogo antes de ela ter tempo de fotografar.
Os textos da página "Sobre mim" também ficam no Prismic: a bio, os números e o "Como eu trabalho".
Quando ela publica, o site é gerado de novo e atualizado sozinho. Como isso funciona por baixo está no post de JAMStack.
Um link para cada produto
Cada produto tem a sua própria página, com um endereço fixo, no formato `/produtos/nome-do-produto`.
Isso parece detalhe, mas muda o jeito de divulgar. Em vez de mandar a foto de um produto e responder as mesmas perguntas, a Thainá pode mandar o link, e a página já tem preço, estoque e a opinião dela.
O título e a descrição de cada página são montados a partir do nome do produto e da opinião da Thainá. É esse texto que aparece quando o link é compartilhado e o que o Google pode usar no resultado da busca.
O que ficou de fora
Algumas coisas ficaram de fora de propósito:
- Pagamento e conta de cliente. Pelos motivos que expliquei lá em cima.
- Estoque em tempo real. O estoque mostrado é o que ela cadastrou na última publicação. Se um produto acabou e ela ainda não atualizou, quem resolve é a conversa, e é por isso que a mensagem pede a confirmação da disponibilidade.
[completar: próximos passos que você tem em mente para o site, se houver.]
O que eu aprendi
[completar: a sua conclusão. Uma sugestão de ponto de partida, se fizer sentido para você: o projeto ficou bom quando eu parei de pensar em "loja" e passei a pensar em como a Thainá já vendia. O site não substitui a conversa, ele chega antes dela.]
Se quiser ver como ficou, o site está no ar em usevenusstore.com.br.
Referências
- O que é JAMStack?: a arquitetura por trás da Use Vênus (Prismic, build estático e deploy automático).
- Use Vênus: o site no ar.