Aplicación de salud
UX de producto
Casos de estudioPlantilla de caso · Lips by Lara
Lips by LaraBelleza · Sitio web
Servicios
Herramientas
Tecnologías utilizadas
Belleza · Sitio web
Lips by Lara
Un sitio para la práctica estética de Lara que reúne diseño visual expresivo, un personaje animado y un configurador de tratamientos. Los visitantes pueden explorar zonas, ver precios abiertamente y preparar un plan para hablarlo con Lara.
Da a la práctica una experiencia en línea completa
Lara respondía las mismas preguntas por mensajes directos y quería mostrar los precios sin necesidad de una consulta aparte. Desarrollamos un sitio web que presentara su práctica, facilitara la consulta de una lista detallada de tratamientos y diera un lugar permanente a esas respuestas recurrentes.
Nuestra contribución
Definimos el contenido y la estructura del sitio, diseñamos el lenguaje visual, creamos el personaje generado con IA y su animación, y desarrollamos el sitio adaptable y el proceso de pago. El trabajo conectó dirección artística, movimiento y la mecánica de elegir tratamientos.
Organizamos los tratamientos por zona y diseñamos el personaje, las tarjetas y el plan como una experiencia unificada. Además, desarrollamos páginas específicas de precios, preparación, cuidados posteriores y preguntas frecuentes que Lara puede enlazar directamente.
La dirección visual
Construimos la dirección visual en torno a una tipografía con serifas expresiva, un fondo rosa suave y acentos burdeos. Un gran retrato centra la composición inicial, con espacio generoso y tarjetas de tratamientos colocadas con cuidado a su alrededor. El configurador forma parte de esa composición desde el principio: sus paneles, precios y controles usan el mismo lenguaje visual y trasladan el carácter del sitio a los aspectos prácticos de la experiencia.
01 / Personaje y movimiento
Crear un personaje para una interfaz en movimiento.
Crear el personaje implicó desarrollar tanto su apariencia como su movimiento. Generamos el modelo y la animación, elegimos secuencias coherentes y construimos un ciclo largo para evitar que un gesto corto se repitiera cada pocos segundos.
El movimiento también debía funcionar con la interfaz. Las transiciones se construyeron alrededor de puntos elegidos del ciclo, y las tarjetas de tratamientos siguen sus zonas mientras ella se mueve. Este breve fragmento muestra al personaje y las tarjetas juntos en la escena terminada.
02 / Configurador de tratamientos
Mantén la zona, la selección y el precio en un mismo plan.
La lista de precios de Lara tenía más de 40 elementos organizados por tipo de tratamiento. La reagrupamos por zona, para que quien explora una parte del rostro o cuerpo vea juntas las opciones y los precios relevantes.
Cambiar de zona actualiza la escena y la lista de tratamientos sin perder selecciones anteriores. Añadir un tratamiento conecta su tarjeta, estado seleccionado, número de elementos y total. En la imagen inicial, dos tratamientos de rostro siguen seleccionados al añadir uno de cuello; los tres aparecen juntos en el carrito.
Conectamos el pago con la cuenta Stripe de Lara y aclaramos el siguiente paso: el plan inicia una conversación; pagar no reserva una cita ni sustituye la valoración de Lara.
03 / Contenido y orientación
Da a las preguntas recurrentes una respuesta que Lara pueda enviar.
Revisamos preguntas publicadas en otros sitios de especialistas en tratamientos inyectables y utilizamos un brief estructurado para reunir las respuestas de Lara. Ese trabajo dio lugar a unas preguntas frecuentes con búsqueda y 50 preguntas distribuidas en cinco temas, junto con indicaciones de preparación y cuidados posteriores.
Cada respuesta tiene su propio enlace. Lara puede enviar la explicación correspondiente en un mensaje y los visitantes pueden volver a ella sin buscar en una conversación antigua. Las páginas de consulta comparten el lenguaje visual de la página de inicio.
El resultado
Un sitio completo, desde la dirección visual hasta el pago.
El sitio publicado combina diseño visual propio, animación de un personaje generado, un configurador de tratamientos conectado, indicaciones prácticas y pago con Stripe, con diseños para escritorio, tableta y teléfono.
Otros casos
Dealer Workspace
Aplicaciones
MV Agusta
Sitios web
Traditional
Sitios web
My State
UX de producto
Banking App
UX de producto
EPILMOOD
Sitios web
Benelli
Sitios web
SayMo
Aplicaciones
Plataforma de automóviles de lujo
Confidencial
Análisis de subastas de automóviles
Confidencial
Ferrari · Plataforma de compraventa de automóviles
Confidencial
