Orra Ring
Orra é um anel inteligente que eu inventei para planejar um lançamento inteiro: para quem é, o que a página precisa responder, como a história em 3D se move e como cada clique vira um sinal no CRM que continua a conversa depois da visita.
Resumo
Página de lançamento de um anel de sono, planejada do começo ao fim: público, jornada, história 3D no scroll, um quiz de 2 perguntas e o CRM por trás.
- Meu papel
- Tudo: conceito, planejamento de UX, texto, design visual e de movimento, o anel 3D em three.js, front-end e o plano de eventos do CRM.
- O problema
- Páginas de wearables costumam listar sensores e gráficos. Quem quer dormir melhor pergunta coisas mais simples: vou sentir no dedo, isso ajuda mesmo, o que faço primeiro. A página precisava responder isso em segundos e ainda dar um motivo para a pessoa voltar antes do lançamento.
- O que fiz
- Uma promessa, “Rest, measured”, contada em oito seções que seguem as perguntas do visitante na ordem. O anel 3D conduz a história enquanto você rola: material, sensores, bateria, acabamento. No lugar de uma lista de espera comum, um quiz de 2 perguntas monta um plano pessoal, então se inscrever já parece ganhar algo na hora.
- Uma decisão que defendo
- Troquei o formulário de lista de espera por um quiz. A lista só pede; o quiz entrega um plano primeiro e pede o e-mail depois, e as duas respostas viram segmentos que o CRM usa desde o primeiro e-mail. Também coloquei a escolha de acabamento no hero, acima do anel, porque escolher uma cor é o jeito mais barato de fazer um produto parecer seu.
- Resultado
- Uma página conceito no ar com anel 3D procedural, história ligada ao scroll, seletor de acabamento, passos de onboarding e o quiz, mais uma camada de eventos pronta para HubSpot, Braze ou um CRM gamificado. Funciona no celular, respeita movimento reduzido e tem alternativa limpa para aparelhos fracos.
Como trabalhei
Da promessa ao CRM, na ordem em que trabalhei.
- PosicionamentoUm produto, uma promessa: “Rest, measured.” Um anel que dá um empurrão claro por dia, em vez de mais um painel.
- PúblicoDuas proto-personas baseadas em hipóteses: a profissional cansada que quer dormir melhor sem dever de casa, e o corredor que quer saber quando forçar e quando descansar.
- Perguntas viram seçõesListei o que o visitante pergunta antes de comprar e dei a cada pergunta uma seção, na ordem em que ela aparece.
- WireframesLayouts low-fi de desktop e mobile para fechar a hierarquia antes do 3D: onde fica o anel, onde fica o texto, onde o CTA se repete.
- Roteiro de movimentoUma linha do tempo do scroll dizendo o que o anel faz em cada seção, para o movimento explicar o produto em vez de enfeitar.
- Gancho de retençãoUm quiz de 2 perguntas que entrega um plano e depois pede o e-mail. As duas respostas viram segmentos no CRM.
- Plano de CRMNomes de eventos, campos do lead, etapas do ciclo de vida e os e-mails que cada segmento recebe depois da inscrição.
- Build e acabamentothree.js, GSAP e Lenis num arquivo só. Limites de performance, versão com movimento reduzido e alternativa quando não há WebGL.
A página
O hero abre com a promessa e o seletor de acabamento. A seção de história fica fixa e o anel muda de pose a cada argumento.
Para quem é
Duas proto-personas baseadas em hipóteses, cada uma definindo o que a página precisa provar. Num lançamento real, seriam validadas com pesquisa.
Uma pergunta por seção
A ordem da página segue a ordem das dúvidas do visitante, de “o que é isso?” até “faço isso agora?”.
Wireframes e movimento
Primeiro a hierarquia em caixas cinza, depois um roteiro de movimento que dá uma função a cada trecho do scroll.
Ver página inteira ↗
Gancho de retenção
Primeiro dar, depois pedir: o quiz entrega um plano antes de aparecer o campo de e-mail.
Design tokens
Um palco escuro para o produto, uma cor quente para ações e uma fria para dados.
Plano de CRM
A visita é a primeira mensagem. Os eventos montam o lead, e as respostas do quiz decidem quais e-mails ele recebe.
Próximo projeto: Tinker