Cliente · Salud
Neumozone
¿Tu servicio es complejo y la gente no entiende lo que ofreces?
Un sitio hecho desde cero que respira: pulmones en 3D, sus sedes en una maqueta de Michoacán y un WhatsApp para cada área, para que pacientes y familias encuentren ayuda en segundos.
El reto
Neumozone lleva la neumología y el hospital a casa en Morelia y Uruapan, pero su sitio anterior no lo contaba bien: datos de contacto distintos en cada página, enlaces rotos y un formulario que no se mostraba. Necesitaba un sitio que diera confianza al primer vistazo y llevara a cada paciente con la persona correcta.
Lo que hicimos
-
Creamos una dirección de arte propia, «Por el derecho a respirar»: el logo redibujado en vector, una paleta medida del logo y un ritmo de respiración que mueve todo el sitio.
-
Construimos unos pulmones en 3D que respiran y se mueven con el ratón, hechos con Tripo y Blender, y una maqueta 3D de Michoacán con relieve real para sus dos sedes.
-
Escribimos desde cero 47 fichas en palabras claras: 13 enfermedades, 12 estudios, 10 servicios y 12 equipos médicos.
-
Conectamos cada área con su propio WhatsApp: cada ficha manda al paciente con la persona correcta y con el mensaje ya escrito.
-
Cuidamos Google y la velocidad: las fichas conservan sus direcciones, las viejas redirigen solas y el 3D se adapta a cada equipo.
Lo que quedó funcionando
- Sitio nuevo activo en neumozone.com
- 47 fichas médicas nuevas
- Pulmones 3D y maqueta de sedes, también en celular
- Un WhatsApp para cada área, con el mensaje listo
Servicios
La idea creativa
Un sitio que respira.
Neumozone lleva la neumología y el hospital a casa en Morelia y Uruapan. Para que eso se sintiera desde el primer segundo, todo su sitio se mueve al ritmo de una respiración tranquila.
Este pulmón lo dibujamos aquí en código para explicarlo: respira al mismo ritmo que el sitio, un pulso de luz baja por los bronquios al inhalar y los alvéolos se encienden al final. En neumozone.com los pulmones son 3D de verdad.
Antes y hoy
Del sitio anterior a uno hecho desde cero.
Desliza para comparar. No reutilizamos ni el diseño ni el código: solo los datos del negocio, ya revisados.
La portada, escena por escena
Así se recorre neumozone.com.
Cada sección de la portada tiene su propio movimiento y su propio color, pero todas llevan al mismo lugar: que el paciente hable con la persona correcta.
- 01
Respira: pulmones en 3D que te reciben
Lo primero que ves son unos pulmones en 3D que respiran y se mueven con tu ratón. El título y los botones aparecen al instante; el 3D llega después, con un anillo que dice cuánto falta (solo si tarda).
- Modelo hecho con Tripo y Blender
- Se mueve con tu ratón
- El texto nunca espera al 3D
- 02
El viaje del aire
Al bajar, los pulmones se quedan detrás y la promesa de Neumozone se enciende palabra por palabra: del primer síntoma al diagnóstico, del tratamiento a la rehabilitación, en la clínica o en casa.
- Texto que se enciende al bajar
- Pulmones fijos de fondo
- 03
Diagnóstico con precisión
Una curva de espirometría (ilustrativa) se dibuja sola y presenta los 12 estudios. Cada estudio tiene su página: qué mide, cuánto dura, cómo prepararte y su WhatsApp.
- 12 estudios
- Preparación paso a paso
- 04
El hospital, en tu hogar
Los servicios a domicilio, uno por uno y en palabras claras: neumólogo a domicilio, enfermería especializada, médico general 24 h, telemedicina, rehabilitación pulmonar y oxígeno con equipo hospitalario.
- Cada área con su color
- Atención en casa explicada
- 05
Equipos en venta y renta
Doce equipos con su propia ficha: oxígeno, CPAP, BiPAP, ventiladores y terapia respiratoria. Cada uno se cotiza por WhatsApp con el mensaje ya escrito.
- 12 fichas de equipo
- Cotización directa
- 06
Conoce tu respiración
Trece enfermedades explicadas para pacientes y familias: síntomas, causas, cuándo acudir y preguntas frecuentes. En cada ficha, un pulmón señala la zona que se afecta.
- 13 fichas de salud
- Mapa del pulmón
- 07
Dos sedes, un mismo aire
Una maqueta 3D de Michoacán con relieve real y foto satelital. Dice si cada sede está abierta en este momento, te lleva con Google Maps o Waze y calcula cuál te queda más cerca sin enviar tu ubicación a ningún lado.
- Relieve real de la NASA
- Abierto o cerrado en vivo
- Guardar contacto
- 08
Un WhatsApp para cada área
Consultas, estudios, rehabilitación, Uruapan o servicio al cliente: el paciente elige el área, ve cómo quedará la conversación y el mensaje ya va escrito. Con el QR sigue en su celular. El sitio no guarda nada de lo que escribe.
- 5 áreas, cada una con su número
- Mensaje listo
- QR para el celular
Lo que no se ve
Rápido aunque tenga 3D.
El efecto se nota. Lo que lo hace funcionar en cualquier celular no se nota, y así debe ser.
-
El 3D se adapta a cada equipo
Una computadora potente ve la escena completa; un celular, una versión más ligera; con ahorro de datos o red lenta, una foto fija. Nadie se queda esperando.
-
Primero se lee, luego se ve
El texto y los botones salen al instante. El 3D baja en paralelo y aparece cuando está listo. Las páginas se arman como HTML: abren rápido.
-
Google no perdió nada
Cada ficha conserva su dirección de siempre y las páginas que ya no existen llevan solas a su equivalente. Cada sede, estudio y enfermedad le explica a Google qué es.
-
Cada ficha sabe a quién llamar
Una espirometría va con Estudios, un concentrador con Servicio al cliente y el asma con Consultas, con el mensaje escrito según la página.
-
Las sedes, siempre al día
Teléfonos, direcciones y horarios viven en un solo lugar. De ahí salen la barra de arriba, el mapa, el pie, la tarjeta de contacto y los datos para Google.
-
47 fichas escritas desde cero
13 enfermedades, 12 estudios, 10 servicios y 12 equipos, en palabras claras y con una sola forma de nombrar las cosas.
El proceso
Cómo lo hicimos, paso a paso.
- 01
Revisamos
El sitio anterior, página por página: datos de contacto distintos entre páginas, enlaces rotos y un formulario que no se mostraba.
- 02
Dirección de arte
«Por el derecho a respirar»: modo claro, el logo redibujado en vector, la paleta medida del logo y un color por área.
- 03
Imágenes con IA
Escenas, ambientes y equipos sin marcas, hechos con IA y sin rostros. Las personas reales aparecen solo en fotos reales.
- 04
3D
Pulmones con Tripo y Blender. Michoacán con relieve de la NASA y foto satelital de la Agencia Espacial Europea.
- 05
Construcción
Astro para páginas rápidas, Three.js para el 3D (WebGPU, con respaldo para equipos que no lo tienen) y GSAP para el movimiento.
- 06
Cuidado de Google
Las direcciones viejas se redirigen a su página nueva y cada página lleva sus datos para buscadores.
En el celular, una barra fija para llamar, escribir por WhatsApp o saber cómo llegar.
El siguiente paso
¿Tu proyecto es el siguiente?
Arma tu proyecto en un minuto: contestas tocando tarjetas y te llevas tu plan. O escríbenos por WhatsApp.