Proyecto Medspa by Rayray

Todo empezó con una vacante. Una agencia estadounidense de marketing especializada en med spas buscaba a alguien remoto, de medio tiempo, para construir sitios web con inteligencia artificial. Su área de webs era nueva y necesitaban pruebas de portafolio: sitios hechos rápido, pensados para cada negocio, que no tuvieran cara de plantilla. Pensamos que la postulación más convincente era mandarles uno. Así que nos propusimos hacer el mejor sitio de med spa que pudiéramos y publicarlo, para que lo recorrieran desde el teléfono en vez de verlo en una captura.

Al principio trabajamos dos candidatos en paralelo, Rayray y un segundo med spa, para llevar dos propuestas distintas. Después de varias rondas pausamos el otro y le metimos toda la energía a uno solo; preferimos un sitio bien terminado a dos a medias. Se quedó The Medspa by Rayray, un estudio de Irving, Texas, con clientela construida desde 2014. Como iba a servir de caso de estudio y de postulación al mismo tiempo, tenía que estar en línea. Y tenía que verse a la altura de las marcas grandes del sector, con cada pantalla pensada para que alguien terminara pidiendo cita.

La base salió en una tarde. Lo demás fueron rondas cortas de revisión con pedidos muy puntuales sobre la letra, las fotos, los botones y el movimiento. La idea de postularnos con algo terminado venía de nuestro primer portafolio↗, donde vimos que describir capacidades convence poco y que una pieza que cualquiera abre desde su teléfono convence bastante más.

Sobre el alcance hay que ser claros. El sitio no fue un encargo del negocio, no tiene analítica y no hay visitas ni reservas que reportar.

La postulación fue un enlace a un sitio publicado, que cualquiera podía abrir y recorrer.

Fuente: The Medspa by Rayray · Informe completo, §2 El origen: por qué existe este proyecto · The Medspa by Rayray · Informe completo, §14 Resultado final y estado · Entrevista con el equipo de Damorus Projects, 2026: hecho en una tarde como prueba para una agencia que vende a med spas

The Medspa by Rayray lo atiende personalmente una profesional y ofrece seis familias de tratamiento. Van de lo inyectable (Botox, Dysport, rellenos de ácido hialurónico, labios con técnicas como "Russian lips" e hilos PDO) a lo regenerativo, como el PRP facial y el PRP capilar, que usan la propia sangre del paciente, pasando por peelings químicos, faciales de lujo y microblading de cejas. Donde más comunica es en Instagram y Facebook, publicando resultados. La reputación se la ha ganado de boca en boca y con el antes y después.

La web era una plantilla gratuita de Wix. Con una plantilla así, un med spa queda con la misma cara que una peluquería, una inmobiliaria o una cafetería, y eso juega en contra en un negocio donde alguien le entrega su cara a otra persona. Tampoco había un recorrido que llevara de la curiosidad a la cita, y cuando alguien se convencía, la reserva no siempre estaba a mano.

Y faltaba contenido. Los tratamientos aparecían como etiquetas sueltas y en ninguna parte se explicaba qué es un PRP, cuánto dura el efecto del Botox o cómo cicatriza un microblading. Sin explicaciones es difícil generar confianza, y Google y los asistentes de IA tampoco tienen nada que leer, indexar o citar, así que el negocio quedaba fuera del posicionamiento en buscadores (SEO). Maquillar la plantilla no iba a resolver nada de eso. Había que construir otro sitio, con un recorrido que llevara de la duda a la cita y sin perder la identidad del negocio.

La plantilla no explicaba ningún tratamiento ni llevaba a nadie hasta la cita.

Fuente: The Medspa by Rayray · Informe completo, §3 El cliente y el punto de partida

El sitio que más estudiamos fue drsubbio.com ↗, y por algo muy puntual: dónde pone los botones. Ahí la reserva está a mano en todo momento, con llamados a la acción ordenados por importancia que acompañan a la persona de principio a fin sin ponerse insistentes. De ese análisis salió media tesis del proyecto.

Después miramos Glanz Aesthetics, SkinSpirit y Peachy, y de ahí sacamos cosas sueltas: el tono editorial, el manejo de fotos de piel real, el ritmo de secciones que se alternan y una tipografía sobria. Este ejercicio lo hacemos antes de escribir código en cualquier proyecto, siempre con marcas grandes del mismo sector. Lo que se toma es la estructura y la lógica con la que llevan a alguien a pedir cita. El color, las fotos, la historia y los textos siguen siendo del negocio.

De todo eso salieron tres decisiones de estructura. Los botones se reparten en varias capas según el dispositivo, con la lógica que vimos en drsubbio.com (más abajo está el detalle). El contenido de cada servicio va en formato de artículo, sin tarjetas ni tablas, porque las marcas a las que mejor les va en este sector explican mucho y lo explican bien. Y los titulares son cortos, con el texto de debajo haciendo el trabajo de explicar y sin subtítulos de adorno; esa última regla hubo que defenderla en cada ronda de revisión.

De drsubbio.com heredamos dónde van los botones. Las fotos y la historia siguen siendo de Rayray.

Fuente: The Medspa by Rayray · Informe completo, §4 La investigación: no diseñar desde cero · Entrevista con el equipo de Damorus Projects, 2026: referentes premium del sector

Una tarjeta que dice "PRP capilar" no le explica nada a quien nunca ha oído hablar del tratamiento. Por eso la primera apuesta del proyecto fue el contenido: cada familia de tratamientos tiene una subpágina con un artículo largo que la explica. A Google le va mejor con contenido profundo y bien ordenado, y un artículo sobre qué es el PRP capilar puede posicionar donde una tarjeta de tres palabras no lo haría. Los asistentes de IA, por su parte, citan páginas que explican las cosas (a eso le decimos GEO), y un sitio con respuestas escritas tiene con qué aparecer cuando alguien les pregunta por med spas en Irving.

Para el negocio pesa todavía más otra cosa. La clienta que ya sabe qué es un neuromodulador, cuánto dura y qué esperar llega a la consulta con menos miedo y más decidida.

En total el sitio tiene seis vistas: el inicio, cuatro artículos (inyectables; faciales y piel, con PRP facial, peelings y facial de lujo; microblading; y restauración capilar con PRP) y una página final para encontrar el spa. Como cada familia responde a búsquedas distintas, tiene su propia dirección, con titular, foto y texto propios, y puede ser la primera página del sitio que alguien abre. Cada artículo termina con un botón, para quien llegó leyendo hasta abajo.

Buscamos reseñas con nombre que pudiéramos citar y no encontramos ninguna, así que el sitio no tiene reseñas; la prueba social está donde ya había evidencia, en las publicaciones de resultados del negocio. Con las fotos seguimos el mismo criterio. Nada de banco de imágenes: tomamos diez de su propio Wix y las volvimos a descargar en un tamaño optimizado para la web. Los datos estructurados, de tipo salud y belleza, también salen de su ficha real e incluyen dirección, teléfono, correo, horarios, área de servicio (Irving, Las Colinas, Coppell, Valley Ranch, Dallas y Grapevine) y enlaces a sus redes. Solo se usó lo que se podía verificar.

Quien ya leyó cómo funciona su tratamiento llega a la consulta con menos miedo.

Fuente: The Medspa by Rayray · Informe completo, §5 Apuesta 1: el contenido como vendedor (SEO/GEO) · The Medspa by Rayray · Informe completo, §6 Arquitectura de información · The Medspa by Rayray · Informe completo, §4 y §9 Datos reales, fotos propias y SEO técnico

La segunda apuesta fue para un momento muy concreto: alguien por fin se decide y no encuentra cómo pedir la cita. Es una decisión emocional, y cada segundo buscando un botón le quita ganas. Lo resolvimos con tres mecanismos que se turnan según el dispositivo y la parte de la página, de modo que siempre haya a la vista una forma de reservar sin que el sitio se ponga insistente.

El primero es la barra de arriba. Sobre la foto de portada es transparente, para no taparla, y cuando uno baja y la foto queda atrás toma fondo y sombra; el logo, el teléfono y el botón de resultados se leen bien en los dos casos. En el computador hay además dos botones fijos abajo a la derecha, uno para reservar y otro para pedir consulta, que entran desde el borde como una persiana cuando carga la página. En el teléfono esos botones estorbarían, así que se esconden y en su lugar aparece una barra inferior con llamar, reservar y ver resultados, al alcance del pulgar y con la disposición que la gente ya conoce de las aplicaciones.

El equipo pidió un cambio en el banner principal: quitar el botón de reservar y poner "View results", que lleva al Instagram. La apuesta es que alguien que acaba de llegar se anima más a mirar resultados que a pedir una cita de entrada.

Debajo de la portada, el sitio pregunta por dónde te gustaría empezar y ofrece seis filas, cada una con número, nombre en grande, una línea de descripción y una miniatura. Así la persona va directo a lo que le interesa sin tener que leerlo todo. El equipo pidió de forma expresa que las miniaturas no aparecieran solo al pasar el mouse, y tenía razón: la foto es lo que invita a tocar. Más abajo, una invitación a una consulta gratuita pide primero algo pequeño, venir a conversar.

Lo que el sitio no tiene es un sistema de reservas. El formulario de la página final, al enviarse, arma un correo con los datos ya escritos y lo abre en la aplicación de correo de quien lo llenó, dirigido al negocio, que hoy atiende por correo y por teléfono. El boletín del pie de página funciona igual. Tampoco hay calendario en línea ni pasarela de pagos. Si el proyecto siguiera, lo siguiente sería integrar la herramienta de agenda del negocio.

En ninguna pantalla del sitio falta una forma de reservar.

Fuente: The Medspa by Rayray · Informe completo, §5 Apuesta 2: la reserva omnipresente · The Medspa by Rayray · Informe completo, §8 Psicología de conversión aplicada · The Medspa by Rayray · Informe completo, §9 El formulario real y §12 Honestidad

La frase de la portada es "Beauty, redefined", y el diseño va por ese lado: una estética de revista en negro, blanco y tonos nude, con un lujo discreto. Dejamos por fuera los morados típicos de spa, los degradados y los brillos, y nos quedamos con pocos colores a propósito, porque la contención se asocia con lujo y el exceso de colores se ve improvisado. La paleta se apoya en cuatro: un negro casi puro, un papel color hueso, un nude cálido como único acento y un moca para detalles de texto. Aparte está el blanco puro, para las secciones que necesitan aire.

El blanco y el negro dan la idea de limpieza clínica y de lujo, y el nude pone lo humano, el color de la piel. Un med spa es medicina y belleza a la vez, y la paleta intenta decir las dos cosas. El negro sobre hueso, además, se lee con muy poco esfuerzo, algo necesario con artículos tan largos. Las secciones alternan claras y oscuras, y las oscuras recuerdan las páginas a toda tinta de una revista cara. La banda rosa piel aparece una sola vez, en el antes y después de cejas, donde ese color es justamente el tema.

Con la letra nos equivocamos al principio. La primera versión usaba Bodoni Moda en los titulares, preciosa en teoría, pero en pantalla y a gran tamaño sus trazos finísimos la volvían casi ilegible, y el titular de la portada se leía mal. La cambiamos por DM Serif Display, con su itálica para resaltar palabras, y pusimos Jost en el cuerpo. El aire editorial se mantuvo y ahora se lee sin esfuerzo.

Dos detalles más. Las animaciones usan una curva de aceleración propia, porque la que viene por defecto delata una plantilla. Y las formas cambian a propósito entre secciones: fotos a sangre, miniaturas redondeadas, figuras verticales y un mapa con marco negro de 4 píxeles.

Cambiamos Bodoni Moda por DM Serif Display porque el titular de la portada casi no se leía.

Fuente: The Medspa by Rayray · Informe completo, §5 El concepto visual: Beauty, redefined · The Medspa by Rayray · Informe completo, §7 Diseño visual: la ciencia detrás de lo que se ve

El primero ya quedó contado: la letra de los titulares no se leía y hubo que cambiarla por otra que aguanta mejor en pantalla. El segundo era más difícil de ver. La frase de portada se escribe sola, letra por letra, y mientras lo hacía la página entera saltaba hacia abajo; hasta la palabra "Beauty" se movía. Pasaba porque el efecto iba insertando texto nuevo y el titular ganaba altura con cada letra. Lo arreglamos dibujando desde el principio todos los caracteres, invisibles, para que el titular ocupe desde ya su tamaño final de dos líneas, y revelándolos uno por uno con el cursor detrás. Desde entonces, en cualquier efecto de texto reservamos el espacio antes de animar.

Del tercero es del que más aprendimos. Las filas del índice debían entrar desde la izquierda, en escalera, y aparecían desde abajo; se reportó dos veces. El código tenía la regla correcta, pero la regla que devolvía cada elemento a su sitio pesaba lo mismo que las reglas de dirección escritas después, y por el orden de la hoja de estilos ganaban estas últimas y los elementos se quedaban congelados. Una regla de cierre más específica, que gana siempre, lo resolvió. Lo que no esperábamos es que el mismo error estuviera apagando en silencio otras animaciones del sitio, que revivieron todas con el arreglo. Para completar, en algunas revisiones se seguía viendo la versión vieja porque el navegador la tenía en memoria.

Los tres siguientes salieron en el celular. La banda de transformaciones se veía apretada contra la izquierda, porque su cinta de fotos había heredado una cuadrícula de seis columnas; la convertimos en un bloque con una pista del doble de ancho (cuatro veces en el teléfono) que corre en bucle con sus 16 fotos. El botón de resultados se salía de la navegación en pantallas estrechas y ahí lo ocultamos, ya que esa acción está en la barra inferior y en el menú. El pie de página se veía mal y nos costó varias vueltas; quedó con el crédito de Damorus a la izquierda, como texto simple, y las redes al centro.

Los tres últimos tuvieron que ver con probar y publicar. En el emulador móvil la portada se encogía a 235 píxeles de alto porque una regla anulaba la altura mínima, así que le dimos una altura propia para celulares y quitamos la regla que la pisaba. Al publicar, las imágenes con rutas relativas no cargaban en la dirección limpia, la que no lleva barra al final, y hubo que convertirlas en rutas absolutas en el paso de despliegue. Y el navegador de pruebas "mentía". Como la ruta se sirve por reescritura, a veces mostraba un error o la portada aunque la página existiera. Desde ahí verificamos con peticiones directas al servidor, revisando título e imágenes, y con un parámetro que se salta la memoria del navegador.

Al arreglar las filas del índice revivieron otras animaciones que el mismo error tenía apagadas.

Fuente: The Medspa by Rayray · Informe completo, §11 Problemas y soluciones (1 a 9) · The Medspa by Rayray · Informe completo, §10 Diario de construcción y rondas de revisión

De Rayray salieron varias reglas que hoy usamos en todo lo que construimos, casi todas sobre detalles que quien visita nunca ve. Un titular que cuesta leer se cambia, por elegante que sea. Los efectos de texto reservan su espacio antes de animar, para no empujar el contenido. En los sistemas de aparición vigilamos cuánto pesa cada regla de estilo y ponemos una regla de cierre que siempre gane. Y en los sitios de varias páginas las animaciones se reconstruyen en cada cambio de ruta, algo que también nos tocó aprender en Pastime Lanes↗.

Otras tienen que ver con publicar. Lo que está en vivo se verifica con peticiones directas al servidor, saltando la memoria guardada, porque el navegador de pruebas puede mentir. Y al publicar en direcciones limpias, las rutas de las imágenes se convierten en absolutas.

Las dos últimas son de estrategia. En cualquier negocio de servicios, el contenido en formato de artículo es la estrategia central de posicionamiento. Y en los que venden por cita, como clínicas, estudios, consultorios o academias, la reserva va en tres capas: barra superior, botones fijos en el computador y barra inferior en el celular.

Queda decir lo que el sitio no tiene. No hay reservas en línea: se pide cita con el formulario que arma un correo o por teléfono. Tampoco hay reseñas escritas, porque no encontramos citas verificables. Y sin analítica instalada no hay tráfico ni conversiones que reportar. Lo usamos como ejemplo de lo que cabe en nuestro plan Plata, desde $1.000.000 COP$500 USD€500 EUR: un sitio hecho para el negocio, rápido y preparado para buscadores. Si tu negocio vende por cita, los detalles están en precios↗.

Cada una de estas reglas salió de un problema que tuvimos que resolver en este sitio.

Fuente: The Medspa by Rayray · Informe completo, §15 Aprendizajes y cómo alimentó el sistema Damorus · The Medspa by Rayray · Informe completo, §12 Honestidad: qué no se hizo y por qué · Damorus Projects, planes y precios (2026): plan Plata