Wandary · Estudio de desarrollo para pymes
Una web que lleva de la duda a la primera conversación
Rediseño de wandary.com: de 19 páginas de contenido construidas una a una a un sistema de diseño con una sola regla de espaciado, color como señalética y un único camino hacia el contacto.
- Product Design
- Sistema de diseño
- Accesibilidad
- Front-end
00. Hero · wandary.com/ en portátil + /contacto/ en móvil · mockup 1920×1080 JPG
- Mi rol
- Product Designer. Diseño de UX/UI, sistema de diseño e implementación front-end.
- Equipo
- Diego Manuel Béjar (tecnología y producto, copy y API) y yo. Dos personas, 115 commits.
- Duración
- 4 semanas de rediseño (19 ago – 15 sep 2026) sobre una base publicada en 3 días.
- Plataforma
- Web responsive, modo claro y oscuro. Sitio estático sobre S3 + CloudFront.
- Stack
- Next.js 16, React 19, CSS Modules y tokens volcados desde Figma.
- Alcance
- 19 páginas, 44 componentes, 7 temas de color, formulario y panel de administración.
01 — El desafío
Mucho que contar y ningún camino claro para contactar
Wandary vende desarrollo a medida con presupuesto cerrado a pymes y startups. Su cliente no compra tecnología: decide si confía en dos personas antes de escribirles. La primera versión de la web se publicó en tres días y cumplía con el contenido, pero cada página estaba maquetada a mano.
El resultado era una web que argumentaba mucho y guiaba poco: cuatro textos distintos para el mismo botón de contacto, tres veces los mismos tres canales en la página de contacto y un color que cambiaba de página a página sin un porqué.
+46 %
de solicitudes de contacto por visita en las cuatro semanas posteriores al relanzamiento, medido en GA4.
El objetivo de negocio
- Que quien llega sepa en diez segundos si Wandary es para él.
- Un solo camino hacia el contacto, reconocible en cualquier página.
- Un sistema que dos personas puedan mantener sin diseñador a tiempo completo.
02 — Restricciones y alcance
Lo que no se podía mover
El rediseño se hizo sobre una web ya publicada, que se despliega a producción con cada push. No había margen para una versión paralela.
Técnicas
- Sitio 100 % estático. Sin servidor: el formulario y el panel hablan con una API que vive en otro repositorio.
- Sin imágenes raster. Todo el arte es SVG. Nada de next/image ni pipeline de imágenes.
- Los tokens no se editan a mano. Se vuelcan desde los JSON de Figma: 21 variables por modo.
- Firefox sin scroll timelines. Toda animación ligada al scroll tenía que funcionar también quieta.
De negocio y legales
- Dos personas y cuatro semanas. Diseño e implementación en la misma mano.
- Copy ya escrito. El texto vive en módulos de contenido y no se toca desde los componentes.
- Nada de terceros sin consentimiento. Fuentes autoalojadas y analítica con Consent Mode.
- El lima es la marca. El verde del botón y del logotipo no se negociaba.
03 — Proceso y decisiones clave
Quien llega a contactar ya ha decidido
En seis entrevistas cortas con clientes de Wandary apareció el mismo patrón: nadie leía la página de contacto. Llegaban con la decisión tomada y solo buscaban cómo escribir sin fricción. Veníamos de tratar /contacto/ como una página más, con argumentos. El insight cambió el rumbo: la web argumenta en el recorrido y la página de contacto solo empuja.
De ahí salieron tres cambios que ordenan todo lo demás: una sola etiqueta para el botón («Contactar»), dos puertas en la home que preguntan «¿Tu negocio ya funciona?» o «¿Estás empezando?», y una página de contacto con tres vías del mismo rango y nada más.
Trade-offs
Tarjeta de servicio: el enlace es la llamada, no la tarjeta
- Descartado: toda la tarjeta pulsable, con elevación al pasar el ratón.
- Por qué: una tarjeta de servicio se lee; un enlace anidado obligaba a disfrazar anclas y rompía el nombre accesible.
- Coste asumido: la diana baja a dos palabras. En las puertas, que se pulsan, la diana sigue siendo la tarjeta entera.
Sin transiciones entre páginas
- Descartado: un fundido corto al navegar.
- Por qué: añade espera a cada clic, duplica la entrada del hero, depende de una API experimental de Next 16 y choca con la transición del modo oscuro.
- Coste asumido: la navegación se siente menos «de app». Es una web: se lee, no se instala.
Select nativo en vez de un desplegable a medida
- Descartado: una lista hecha con JavaScript.
- Por qué: el nativo trae teclado, lector de pantalla y la lista del sistema en móvil. Se viste con appearance: base-select.
- Coste asumido: el estilo propio solo se ve en Chrome y Edge. Safari y Firefox abren la lista del sistema.
Una sola medida de espaciado
- Descartado: una escala de espaciado por componente.
- Por qué: 18 px en móvil y 24 px en escritorio entre todas las cajas. Si un hueco no cabe en la escala, el que está mal es el diseño.
- Coste asumido: tres excepciones documentadas y en prueba, no una lista abierta.
Evolución: de lógica a interfaz
- 17–20 ago · Base de contenido. Diego publica la primera versión: 19 páginas, copy en módulos, despliegue automático.
- 21–22 ago · Tokens. Volcado de Figma y espaciado fluido con clamp() entre 420 y 980 px.
- 22–25 ago · Cajas y tipografía. Modelo de cajas dentro de cajas, tarjetas, ilustraciones y escala tipográfica.
- 26–29 ago · Navegación y color. Menú principal, un tema por sección y revisión de contraste de cada pareja.
- 30 ago – 15 sep · Contacto, entrada y modo oscuro. Rediseño de /contacto/, cartela de la home, movimiento y tema oscuro.
04 — Solución final
Cada decisión, sobre la pantalla
Tres pantallas concentran el recorrido: la home, que filtra; la página de contacto, que empuja; y el formulario, que no puede fallar.
07. Home · wandary.com/ · captura escritorio 1440×900 PNG 2x
Jerarquía visual
Un titular en tres renglones, un solo h1
Cada trozo se alinea a un lado distinto para dar ritmo, pero el HTML sigue siendo una frase: el lector de pantalla no nota el juego visual.
Ley de Hick
Dos puertas, no cinco servicios
«¿Tu negocio ya funciona?» y «¿Estás empezando?». Dos opciones que se autoclasifican en vez de un menú de servicios para elegir en frío.
Ley de Fitts
La diana es la tarjeta entera
El enlace es solo la llamada, pero un ::after lo estira a toda la puerta. El foco se dibuja en la tarjeta con :has(:focus-visible).
Consistencia (Nielsen #4)
Un botón, una palabra: «Contactar»
Eran cuatro etiquetas para el mismo destino. Ahora el botón se reconoce sin leerlo y siempre es lima.
08. /contacto/ · captura móvil 390×844 PNG 3x · encuadrada en 1920×1080
Visibilidad sobre el pliegue
Sin ilustración en móvil
Apilado, el dibujo empujaba las puertas hasta los 800 px. Sin él, la primera vía empieza a 432 px en un 390×844.
Similitud (Gestalt)
Tres vías del mismo rango
Mismo tamaño, mismo color y logotipos de WhatsApp y LinkedIn en la tinta del sitio. La página no empuja hacia el canal que nos conviene.
Carga cognitiva
Títulos por cómo prefieres hablar
«Ahora mismo», «De tú a tú», «Con calma». Caben en un renglón a 278 px, medido en navegador, y las tres tarjetas quedan niveladas.
09. Diálogo del formulario · /contacto/ · captura escritorio 1280×800 PNG 2x
Control y libertad (Nielsen #3)
Un <dialog> nativo
Foco atrapado, cierre con Escape o clic fuera y el foco vuelve a la puerta que lo abrió. Sin librería.
Proximidad (Gestalt)
Dos columnas por parejas
Nombre y correo, teléfono y necesidad; el mensaje a todo el ancho. Campos de 45 px (antes 66): el diálogo mide 614 px y no hace scroll ni en 1280×800 ni en 390×844.
WCAG 1.4.11
El foco es una sola línea
En reposo el borde va a 3,5:1; enfocado, a tinta plena. Se quitó el doble contorno que se leía como dos rayas.
Prevención de errores (Nielsen #5)
El señuelo antispam es una casilla
Un campo de texto oculto lo rellenaba el autocompletado: el envío se descartaba y la web decía «Recibido». Como casilla, no lo toca nadie.
10. Recorrido de color · home → /servicios/desarrollo-a-medida/ · tríptico 1920×1080 PNG
Reconocer antes que recordar
El color es la señalética
Cada página reescribe tres variables. La tarjeta de la home, el hero y el cierre del servicio se reconocen como la misma cosa.
WCAG 1.4.3
Superficies grandes en tono apagado
Hero y cierre van en el -light del tema: la tinta negra no baja de 10:1 en ninguno de los seis temas de contexto.
Consistencia interna
Mismo sitio, mismas letras
El enunciado bajo cada hero comparte talla y familia en todas las páginas: titular en monoespaciada, párrafo en la talla base.
05 — Resultados y aprendizajes
Menos caminos, más conversaciones
Resultados de las cuatro semanas posteriores al relanzamiento frente a las cuatro anteriores, en GA4 con Consent Mode.
+46 %
solicitudes de contacto por visita (clic en «Contactar» o envío del formulario).
−35 %
abandono del formulario entre abrir el diálogo y enviarlo.
432 px
donde empieza la primera vía de contacto en un móvil 390×844. Antes, unos 800 px.
10:1
contraste mínimo de la tinta negra sobre el hero y la banda de cierre en los seis temas de contexto.
Lo que cambió en la conversación
- Los contactos llegan clasificados: siete de cada diez nombran el servicio o el MVP en el primer mensaje.
- El formulario pasa a ser el canal de quien no usa WhatsApp: 38 % de los contactos, frente al 21 % anterior.
- Añadir una página, un proyecto o un tema ya no pide diseño: se crea el módulo de contenido y el sistema pinta el resto.
Retrospectiva
- Medir, no estimar. Los títulos de las puertas «cabían a ojo» y partían en dos renglones. Cada medida del sitio se comprobó en navegador, de 320 a 1600 px.
- Documentar la decisión, no solo el componente. El registro de decisiones del repo pasó de guía técnica a memoria de diseño: casi 4.000 líneas que explican el porqué de cada excepción.
- La deuda también se escribe. El verde de /metodologia/ sigue por debajo de AA en modo claro (4,10:1) y seis tokens aún no vienen de Figma. Están listados, no olvidados.
- Lo siguiente. Con siete proyectos en el laboratorio la rejilla deja una tarjeta suelta: ahí toca otra forma, no otra regla.
Un sistema que dos personas pueden sostener
La web de Wandary dejó de ser un conjunto de páginas hechas a mano para convertirse en un sistema: una medida de espaciado, un trío de color por sección y un único camino hacia el contacto. Diseñado y construido en el mismo código, y medido en el navegador antes de darlo por bueno.