Anywhere Healing: sitio de bienestar de alto rendimiento con Astro

La contradicción a resolver

Anywhere Healing vende productos para el insomnio y el estrés. Su sitio anterior tardaba cuatro segundos en ser usable.

Eso no es un dato de rendimiento, es un problema de credibilidad. Alguien que llega estresado y se queda mirando un indicador de carga ya recibió un mensaje sobre la marca antes de leer una palabra. La interfaz tenía que ser la primera parte del producto, no un obstáculo delante de él.

La decisión técnica

Construí el sitio en Astro, y la razón es concreta, no una preferencia de framework.

Astro no envía JavaScript por defecto y genera HTML estático durante el build. Para un sitio que es esencialmente contenido más un proceso de pago, la mayor parte de la página no necesita código en tiempo de ejecución. Las piezas interactivas se cargan solo donde se usan. El resultado es una página legible casi al instante, no después de que arranque un framework.

Desplegado en Netlify, así que las páginas se sirven desde un CDN cercano a quien visita. La calma que vende la marca es, en parte, simplemente la ausencia de espera.

Decisiones de interfaz

Una paleta tomada de la cromoterapia. Verdes suaves y azules apagados, elegidos porque son de lo que trata el producto, no porque estén de moda.

El espacio en blanco como ritmo. Un espaciado generoso entre secciones le da a la vista dónde descansar. En un sitio dirigido a personas con problemas de sueño, la densidad es la textura equivocada.

Imágenes dimensionadas a su hueco. Cada recurso exportado al tamaño real en que se muestra y en formato moderno. La fotografía rica y una página ligera no están reñidas si la exportación se hace bien.

El pago fue la parte difícil

El catálogo tiene dos tipos de producto muy distintos. Los artículos pequeños de bienestar son compra por impulso. El Rejuvena Pod es un dispositivo caro y meditado, y su precio era el principal obstáculo para la conversión.

Vender ambos con un solo flujo habría perjudicado a uno de los dos. Así que construí dos:

Compra directa para los artículos pequeños. Directo al pago, sin pasos intermedios.

Compra en cuotas para el Pod. Se elige entre pago completo o un plan estructurado, y la interfaz calcula cada cuota en vivo mientras se cambian las condiciones. Ver la cifra mensual en lugar del total cambia la decisión, y por eso el cálculo tenía que ser inmediato y no revelarse al final.

Ambos caminos pasan por el mismo túnel de procesamiento cifrado, así que la separación existe en la interfaz sin duplicar la superficie de seguridad.

Stack

• Astro para generación estática sin JavaScript de base
• HTML y CSS escritos a mano, sin framework de utilidades, porque el sistema de diseño era lo bastante pequeño para no necesitarlo
• Netlify para el despliegue y la entrega por CDN
• Lógica de cuotas a medida en JavaScript sin dependencias, cargada solo en el pago

Resultado

Un sitio cuya velocidad forma parte de lo que vende, y un proceso de pago que hizo comprable el producto caro cambiando cómo se presenta el precio, no cuál es.

¿Tu sitio contradice tu producto?

Las marcas de bienestar, finanzas y salud venden una sensación que un sitio lento y recargado desmiente de inmediato. Eso tiene solución, y normalmente es técnica.