Aplicativo de saúde
UX de produto
Estudos de casoModelo de estudo de caso · Lips by Lara
Lips by LaraBeleza · Site
Serviços
Ferramentas
Tecnologias
Beleza · Site
Lips by Lara
Um site para a prática estética de Lara, reunindo um design visual expressivo, uma personagem animada e um configurador de tratamentos. Os visitantes podem explorar áreas, ver os preços com transparência e montar um plano para discutir com Lara.
Dê ao consultório uma experiência online completa
Lara respondia às mesmas perguntas por mensagens diretas e queria publicar os preços sem uma consulta separada. Desenvolvemos um site para apresentar seu trabalho, tornar acessível uma lista detalhada de tratamentos e dar um lugar permanente às respostas recorrentes.
Nossa contribuição
Estruturamos o conteúdo e o site, projetamos a linguagem visual, criamos a personagem gerada por IA e sua animação e desenvolvemos o site responsivo e o checkout. O trabalho conectou direção de arte, movimento e os mecanismos de escolha dos tratamentos.
Organizamos a lista de tratamentos por área e projetamos a personagem, os cartões e o plano como uma só experiência. Em paralelo, desenvolvemos páginas dedicadas de preços, preparação, cuidados posteriores e perguntas frequentes às quais Lara pode vincular diretamente.
A direção visual
Construímos a direção visual em torno de tipografia serifada expressiva, um fundo rosa suave e detalhes em bordô. Um grande retrato ancora a composição inicial, com espaço generoso e cartões de tratamento posicionados cuidadosamente ao redor da personagem. O configurador faz parte dessa composição desde o início: seus painéis, preços e controles usam a mesma linguagem visual, levando a personalidade do site às partes práticas da experiência.
01 / Personagem e movimento
Crie uma personagem para uma interface em movimento.
Criar a personagem significou desenvolver tanto sua aparência quanto seu movimento. Geramos o modelo e a animação, selecionamos sequências consistentes e construímos um ciclo longo para que um gesto curto não se repetisse a cada poucos segundos.
O movimento também precisava funcionar com a interface. As transições foram construídas em torno de pontos escolhidos no ciclo, e os cartões de tratamento acompanham suas áreas conforme ela se move. Este breve trecho mostra a personagem e os cartões juntos na cena final.
02 / Configurador de tratamentos
Mantenha área, seleção e preço em um só plano.
A lista de preços de Lara continha mais de 40 itens organizados por tipo de tratamento. Reagrupamos por área, para que alguém explorando uma parte do rosto ou do corpo pudesse ver as opções e os preços relevantes juntos.
Mudar a área atualiza a cena e a lista de tratamentos, mantendo as seleções anteriores. Adicionar um tratamento conecta seu cartão, estado selecionado, contagem de itens e total. No quadro inicial, dois tratamentos faciais permanecem selecionados quando um tratamento de pescoço é adicionado; os três aparecem juntos no carrinho.
Conectamos o checkout à própria conta Stripe de Lara e deixamos a próxima etapa explícita: o plano inicia uma conversa, e o pagamento não reserva uma consulta nem substitui a avaliação de Lara.
03 / Conteúdo e orientação
Dê às perguntas recorrentes uma resposta que Lara possa enviar.
Analisamos perguntas publicadas em outros sites de profissionais de estética injetável e usamos um briefing estruturado para reunir as respostas da própria Lara. Esse trabalho se tornou uma seção de perguntas frequentes pesquisável, com 50 perguntas em cinco temas, junto com orientações de preparação e cuidados posteriores.
Cada resposta tem seu próprio link. Lara pode enviar a explicação pertinente em uma mensagem e o visitante pode voltar a ela sem procurar em uma conversa antiga. As páginas de referência usam a mesma linguagem visual da página inicial.
O resultado
Um site completo, da direção visual ao checkout.
O site lançado combina um design visual personalizado, animação de personagem gerada, um configurador de tratamentos conectado, orientações práticas e checkout pelo Stripe, com layouts para computador, tablet e celular.
