Hippocrates Wellness

Diseñar una experiencia de bienestar más inmersiva. Donde se encuentran storytelling, IA generativa y código a medida.

Hippocrates Wellness, fundado en 1956 en West Palm Beach, Florida, recibe a huéspedes de todo el mundo en un campus de 55 acres. Rediseñamos y ampliamos su experiencia digital, y construimos la landing de su programa principal como una secuencia cinematográfica que se mueve con el scroll.

Sector
Bienestar, salud y hospitalidad
Ubicación
West Palm Beach, Florida, USA
Año
2026
Servicios
DiseñoDesarrolloDirección creativaDiseño UX/UIExperiencia web inmersivaProducción de vídeo con IA (Google Veo)Interacción con scrollWordPress & ElementorArquitectura CMS
1secuencia de vídeo guiada por el scroll, generada con Google Veo y sincronizada con código propio
8journeys publicadas desde una sola plantilla dinámica
3meses del brief al lanzamiento aprobado, de junio a agosto de 2026
El reto

Que la complejidad parezca sencilla.

Hippocrates ofrece programas residenciales, journeys especializadas, experiencias en el campus, formación e iniciativas de comunidad, para públicos muy distintos. El primer reto era que ese ecosistema fuera más fácil de entender y de recorrer.

El segundo era el Life Transformation Program, el programa principal del centro. Una página informativa estándar no podía transmitir lo que se vive en el programa. Queríamos una página que atrapara desde el primer segundo, con movimiento, imágenes e interacción como herramientas narrativas, sin perder claridad.

Enfoque

Tres objetivos, una experiencia.

Información clara, storytelling emocional y profundidad técnica tenían que convivir en las mismas páginas.

  1. 01Simplificar la informaciónUna estructura que permite a cada visita encontrar el programa, la estancia o la conversación que busca.
  2. 02Crear una narrativa inmersivaMovimiento e imágenes que cuentan el programa antes que el texto.
  3. 03Construir un sistema flexiblePlantillas y contenidos estructurados que el equipo puede seguir ampliando.
Experiencia destacada

Una experiencia que se despliega con el scroll. The Life Transformation Program.

Para el programa principal del centro diseñamos una landing construida alrededor de una secuencia cinematográfica controlada por el scroll. El agua es la metáfora: cambio, profundidad, transformación.

La secuencia empieza en la superficie y lleva poco a poco a quien mira bajo el agua. Imágenes generadas con IA, vídeo y JavaScript propio convierten un scroll normal en la forma de contar la historia.

hippocrateswellness.org/the-life-transformation-program
Grabación de pantalla de la landing publicadaImágenes generadas con Google Veo. Dirección, diseño y código de .beeasy
Concepto creativo · Drop into Water

Una metáfora visual de la transformación.

Una escena en calma, una gota que toca el agua, anillos que se expanden y un cambio de punto de vista bajo la superficie. El vídeo no es un fondo: su movimiento forma parte de cómo habla la página.

  1. 01Superficie en calmaUn estanque oscuro enmarcado por hojas. Cae una gota.
  2. 02ImpactoLa gota toca el agua: el primer movimiento de la historia.
  3. 03Los anillos se expandenOndas concéntricas abren espacio al título.
  4. 04Aparece el títuloEl nombre del programa emerge con las ondas.
  5. 05La promesa“One foundation. Many ways to begin again.”
  6. 06Bajo la superficieEl punto de vista se hunde bajo el agua y empieza el programa.
Producción de vídeo con IA · Google Veo

Imágenes generadas con IA. Narrativa dirigida por personas.

Usamos Google Veo para generar las imágenes, dentro de una dirección creativa definida para el proyecto. El objetivo no era solo un clip bonito, sino una secuencia cuyo movimiento pudiera guiarse con el scroll.

  1. 01Dirección creativa.beeasyLa metáfora, la secuencia narrativa y el tipo de movimiento que necesitábamos.
  2. 02Creación de vídeo asistida por IAGoogle VeoVídeo generado con Google Veo, siguiendo esa dirección.
  3. 03Adaptación interactiva.beeasyEl material preparado para vivir dentro de una experiencia web controlada por el scroll.
  4. La IA contribuyó a las imágenes. La dirección creativa, el diseño de la experiencia y la implementación son de .beeasy.
Desarrollo a medida

Cuando el scroll se vuelve parte de la historia. El avance de la página guía el del vídeo.

Construimos una solución propia que une el vídeo al scroll. La secuencia no se reproduce con su propio tiempo: avanza a medida que la visita recorre la página, y el scroll marca el ritmo de la historia.

01Posición del scroll02Progreso de la interacción03Línea de tiempo del vídeo04Estado visual
Demo de scroll · 0%
Demo hecha con fotogramas reales de la landing: haz scroll en esta sección o toca un punto. Los porcentajes explican el principio, no son los valores del proyecto.
  1. 01Entrada del scrollEl movimiento de la visita es la entrada.
  2. 02Progresión del scrollEl avance de la página fija el estado de la experiencia.
  3. 03Sincronización del vídeoLa posición del vídeo sigue ese estado.
  4. 04Continuidad visualLa imagen se mantiene continua mientras se explora.
  5. 05Transición al contenidoLa secuencia da paso al contenido de la landing.
La landing completa

Una experiencia completa, no solo un efecto visual.

Tras la apertura, la landing explica el programa residencial de 21 días, las journeys, los principios Hippocrates, alojamientos, protocolos y expertos, y lleva a una consulta.

  1. 01The FoundationEl programa residencial de 21 días.
  2. 02Choose Your JourneyEl programa principal y las journeys construidas sobre él.
  3. 03Five FoundationsRight Food, Right Mind, Right Practice, Right People, Right Place.
  4. 04Guided JourneyUnas pocas preguntas para entender necesidades y cómo seguir.
  5. 05AccommodationsGarden, Sanctuary y Eden.
  6. 06ProtocolsProtocolos para dar forma a tu propio programa.
  7. 07ExpertsEl equipo que guía el programa.
  8. 08Historias de huéspedesLa vida después de la estancia, contada por los huéspedes.
  9. 09Primer paso“Your journey begins with a single step.”
Qué hicimos

Un proyecto, paso a paso

Diseño

La web en su conjunto

Un ecosistema digital. Muchas formas de explorar.

1.1InicioEl campus de noche, una promesa clara y dos entradas: quedarse o ver la película. La consulta gratuita siempre a un toque.
1.2El enfoque, en palabras simplesQuién es Hippocrates, dónde está y cómo funciona el programa, en tres principios breves: release burden, restore flow, renew resilience.
1.3Eventos y visitasCharlas, movimiento y veladas de comunidad en el campus, casi todas abiertas al público, con la visita al campus a un clic.
1.4Alumni, siempre de vueltaUn espacio para quienes ya estuvieron: repetir estancia, un evento, una visita con alguien nuevo, formación continua.
1.5Que el siguiente paso sea naturalDescubrir, explorar, elegir, conectar. No todos saben qué programa encaja, así que la web siempre ofrece una conversación: la barra de consulta, “Talk to our team” y un formulario guiado, Plan Your Journey, que pregunta por necesidades, plazos, huéspedes y contacto.
Desarrollo

Desarrollo

Del diseño a una experiencia lista para producción.

2.1Componentes asistidos por IA, editables por el equipoLa IA también apoyó la producción de componentes para WordPress y Elementor, dentro de un proceso controlado por nosotros. El objetivo: trabajo a medida que el equipo interno pueda seguir editando cada día.
2.2Responsive y controles antes del lanzamientoAdaptación responsive de cada plantilla, CSS y JavaScript propios donde hacía falta y una revisión completa del staging antes de publicar.
Funcionalidad claveArquitectura CMSSistema de plantillas

Una base flexible detrás de la experiencia. Contenido dinámico con WordPress, Elementor y ACF.

Cada journey tenía su contenido, pero la misma lógica. Configuramos las Journeys como Custom Post Type con Advanced Custom Fields y las conectamos a plantillas dinámicas de Elementor.

Las secciones aparecen solo cuando hay contenido, así que un programa nuevo no necesita una página hecha a mano. La landing cinematográfica es a medida; el resto de la web funciona con componentes que el equipo edita.

  1. 01WordPressModelo de contenidoLas journeys viven en su propio tipo de contenido.Custom Post Type
  2. 02ACFCampos propiosCampos dedicados guardan lo que cada journey necesita.FormatoDuraciónExpertos
  3. 03ElementorPlantilla compartidaUn layout dinámico lee los campos.Etiquetas dinámicasComponentes
  4. 04hippocrateswellness.orgLa páginaLas secciones aparecen solo si tienen contenido.Secciones condicionalesResponsive
AUna base, ocho journeys
Primero el programa principal, después las journeys construidas sobre él. Cada card lee la misma estructura.
BLos mismos campos, por programa
Formato, incluido en, duración: una estructura que cada programa rellena con sus datos.
Cronología

Tres meses, del brief al lanzamiento

  1. Jun 2026Brief, arquitectura y dirección creativaRediseño y ampliación de la web WordPress existente: inicio, programas, journeys, @Home, corporate, alumni, ambassadors, eventos.
  2. Jul 2026Diseño y desarrolloPlantillas, componentes propios y trabajo responsive con el equipo del cliente, y el concepto Drop into Water.
  3. Ago 2026CMS y plantillas dinámicasJourneys con Custom Post Types y ACF con secciones condicionales. Plantillas de archivo y artículo del blog añadidas a petición.
  4. 25 ago 2026Aprobada para el lanzamientoStaging aprobado y paso planificado a producción con copia completa: páginas, plantillas Elementor, menús, Journeys y ajustes ACF.
Resultados

Más allá del diseño web. Hacia experiencias digitales.

  1. 01Una landing inmersiva para el Life Transformation Program, con imágenes generadas con Google Veo y guiadas por el scroll.
  2. 02Una experiencia web rediseñada, del inicio a las páginas de comunidad.
  3. 03Ocho journeys gestionadas con una sola plantilla dinámica, con secciones condicionales.
  4. 04Componentes Elementor reutilizables que el equipo interno puede editar.
Míralo en vivohippocrateswellness.orgvisitar la web
Siguiente proyectoProject Wellness EquipmentUn catálogo de equipamiento profesional, y un recorrido de presupuesto construido sobre su forma de vender.leer el caso
Empieza un proyecto

Cuéntanos adónde quieres llegar.

Te ayudamos a encontrar el enfoque adecuado. Empieza con una pregunta.

¿Qué necesitas? Elige las que quieras, o ninguna.
{{ p.name }}{{ p.name }}

{{ p.hA }} {{ p.hB }}

{{ p.lede }}

{{ U.industry }}
{{ p.industry }}
{{ U.location }}
{{ p.location }}
{{ U.year }}
{{ p.year }}
{{ U.client }}
{{ p.url }}
{{ U.services }}
{{ t.name }}{{ x.s }}
[IMAGE] {{ hero.cap }}
[IMAGE] {{ hero.cap }}[IMAGE] Mobile
{{ f.n }}{{ f.l }}
{{ U.chalEb }}

{{ p.chalH }}

{{ c.t }}
{{ U.apprEb }}

{{ appr.h }}

{{ appr.p }}

  1. {{ pr.n }}{{ pr.t }}{{ pr.p }}
{{ U.cinEb }}

{{ cin.h }} {{ cin.sub }}

{{ cp.t }}

{{ cin.url }}
{{ cin.recCap }}{{ cin.recNote }}
{{ cin.sbEb }}

{{ cin.sbH }}

{{ cin.sbP }}

  1. {{ fr.n }}{{ fr.t }}{{ fr.p }}
{{ cin.veoEb }}

{{ cin.veoH }}

{{ cin.veoP }}

  1. {{ vs.n }}{{ vs.t }}{{ vs.who }}{{ vs.p }}
  2. {{ cin.veoNote }}
{{ cin.syEb }}

{{ cin.syH }} {{ cin.sySub }}

{{ cin.syP }}

{{ ch.n }}{{ ch.t }}
{{ U.scrubLive }} · {{ cin.pctTxt }}
{{ cin.syNote }}
  1. {{ cc.n }}{{ cc.t }}{{ cc.p }}
{{ cin.lnEb }}

{{ cin.lnH }}

{{ cin.lnP }}

  1. {{ ls.n }}{{ ls.t }}{{ ls.p }}
{{ U.baEb }}

{{ ba.h }}

{{ ba.p }}

{{ U.before }}{{ ba.beforeWhen }}
{{ bi.cap }}
{{ U.after }}{{ ba.afterWhen }}
{{ ai.cap }}
{{ U.didEb }}

{{ U.didH }}

{{ c.terrName }}

{{ c.title }}

{{ c.intro }}

{{ st.num }}{{ st.t }}{{ st.p }}
[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.c.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}{{ c.n }}{{ c.h }}Aa{{ p.typeName }}ABCDEFGHIJKLM abcdefghijklm 0123456789
{{ U.featEb }}{{ tg.t }}

{{ ft.h }} {{ ft.sub }}

{{ fp.t }}

  1. {{ fl.n }}{{ fl.site }}{{ fl.t }}{{ fl.p }}{{ fd.f }}
{{ sh.k }}{{ sh.label }}
{{ sh.note }}
{{ U.tlEb }}

{{ tlH }}

  1. {{ ph.when }}{{ ph.t }}{{ ph.p }}
    2.
{{ U.resEb }}

{{ resH }}

  1. {{ r.num }}{{ r.r }}
    2.
{{ U.quoteEb }}
{{ quote.text }}
[C]{{ quote.who }}{{ quote.role }}
{{ U.liveEb }}{{ p.url }}{{ U.visit }}
{{ U.ongEb }}

{{ ong.h }}

{{ ong.p }}

{{ og.terr }}{{ og.status }}{{ og.t }}{{ og.p }}
{{ U.nextEb }}{{ next.name }}{{ next.hA }} {{ next.hB }}{{ U.readCase }} [IMAGE] {{ next.cap }}
{{ U.moreEb }}{{ U.allWork }}
{{ tx.eb_start }}

{{ tx.start_h }}

{{ tx.start_lede }}

{{ tx.need_q }} {{ tx.need_hint }}
{{ cta }} {{ tx.or_write }} hello@beeasydesign.com