01 — Contexto
EDUC Solutions se presenta como una agencia de transformación digital en Estados Unidos, con ocho disciplinas bajo un mismo equipo, entre ellas sitios y portales, software a medida, plataformas LMS corporativas, contenido, marketing e IA. El sitio es bilingüe, en inglés y español.
El encargo era condensar esa oferta amplia y técnica en una narrativa fácil de recorrer, que transmitiera seniority ante compradores empresariales sin sonar a catálogo, y que terminara en consultas calificadas. Diseñé la experiencia UX/UI y desarrollé el sitio como una aplicación React de una sola página.
02 — Mi rol
Definí la arquitectura de información y el orden de la home, diseñé el header bilingüe, la grilla de capacidades, el cierre de la home y el formulario de calificación, y los implementé. Instrumenté GA4 y revisé mapas de calor en Clarity. El copy y las fotos los aportó el cliente.
03 — Diagnóstico
Ocho disciplinas compiten por la misma primera impresión
Era un sitio nuevo, sin una versión anterior que corregir, así que el riesgo estaba en el propio encargo: que una oferta tan ancha se leyera como un catálogo frío o como una promesa poco creíble. Mi lectura de la causa: ocho disciplinas con el mismo peso obligan al visitante a clasificarse antes de entender qué hace la empresa, y un comprador empresarial probablemente llega con un problema concreto, no con el nombre de un servicio.
Le cuesta al comprador, que compara proveedores y abandona si no ve pronto con quién hablar ni qué pasa después. Y le cuesta a EDUC Solutions, que necesita saber el tipo de proyecto, el presupuesto y el plazo antes de dedicarle una sesión a su equipo senior.
04 — Decisiones
A. Una promesa para líderes y una sola acción de reserva
- Problema
- Un hero con varias acciones del mismo peso reparte la atención de alguien que todavía no sabe si la agencia le sirve.
- Decisión
- El titular y el párrafo hablan a líderes que necesitan claridad y ejecución bajo un solo equipo, y el hero lleva un botón principal, "Reservar una sesion estrategica", que abre la página de contacto; "Ver casos de estudio" queda como secundario, con menos peso visual.
- Por qué esa
- Valoré abrir con las ocho disciplinas en la primera pantalla; preferí una sola promesa porque, con ocho servicios a la vista, el visitante tendría que elegir uno antes de entender la propuesta. El coste: la home no dice qué servicios existen hasta el primer scroll.
- Qué esperaba
- Que quien ya tenía un proyecto encontrara la reserva sin buscarla, y que el resto siguiera hacia la grilla o hacia los casos.
B. Cuatro entradas, el idioma a la vista y un solo botón de color
- Problema
- El público es bilingüe, y un selector de idioma escondido en el pie obliga a empezar a leer en el idioma equivocado.
- Decisión
- Un header fijo con cuatro entradas (Servicios, Portafolio, Recursos y Contacto), el selector EN/ES con su rótulo "Idioma" e "Iniciar proyecto" como único botón turquesa. En móvil, el panel repite entradas, idioma y botón, y añade "Ver casos". Tras el primer scroll, "Iniciar proyecto" flota abajo a la derecha.
- Por qué esa
- Valoré depender solo del idioma del navegador, que el sitio también detecta y recuerda; preferí sumar un selector visible porque, en un público bilingüe, el idioma del navegador no siempre es el que el visitante prefiere leer. El coste: en móvil el header ocupa dos filas, 131 px de los 844 de la pantalla, y el botón flotante tapa parte del texto durante el scroll.
- Qué esperaba
- Que cada visitante leyera el sitio en su idioma desde la primera pantalla y tuviera la acción principal a un toque en cualquier punto de la página.
C. Ocho disciplinas en una grilla con jerarquía; en móvil, un carril
- Problema
- Ocho servicios del mismo tamaño se leen como una lista de precios, y en móvil ocho tarjetas apiladas alargan la home.
- Decisión
- Una grilla de ocho tarjetas en la que dos ocupan más espacio, Experiencias Digitales y Plataformas Corporativas, y el resto se agrupa alrededor; cada tarjeta lleva etiqueta, título y una frase, y abre su página de servicio. En móvil, la misma grilla pasa a un carril horizontal con una tarjeta por vista y flechas.
- Por qué esa
- Valoré ocho tarjetas iguales y, en móvil, una lista larga; preferí jerarquía y carril porque las dos líneas centrales tenían que leerse primero y la home móvil no debía alargarse. El coste: en desktop, la atención se sesga hacia dos disciplinas; en móvil, siete tarjetas quedan detrás de un gesto, sin indicador de posición.
- Qué esperaba
- Que el visitante reconociera de un vistazo las dos líneas centrales y pudiera abrir cualquier disciplina sin buscarla en el menú.
D. Tres salidas de distinto compromiso al cierre de la home
- Problema
- Al final de la home no todos están listos para una reunión, y un único botón de reserva pierde a quien solo quiere escribir.
- Decisión
- Un cierre con tres botones escalonados: "Reservar una consulta de 45 minutos" como principal, "Completar formulario de calificacion" como secundario y "Escribir a nuestro equipo corporativo", que abre el correo, como tercero.
- Por qué esa
- Valoré repetir el botón del hero; preferí escalonar por compromiso porque al final de la home conviven quien quiere una reunión y quien solo quiere escribir. El coste: tres botones compiten por la atención justo en el punto en que el visitante decide.
- Qué esperaba
- Que cada visitante eligiera la salida que se ajustaba a su momento, en vez de irse sin contactar.
E. Calificar por pasos antes de pedir los datos
- Problema
- Para preparar una sesión, el equipo necesita el tipo de proyecto, el presupuesto y el plazo, y un formulario largo en una sola pantalla frena al comprador.
- Decisión
- Un formulario de cuatro pasos con una pregunta por paso: el dominio del proyecto, con seis opciones; el rango de presupuesto; el plazo; y al final nombre y email obligatorios, con empresa y mensaje opcionales. Al lado, el email y el teléfono de la empresa.
- Por qué esa
- Valoré un formulario de una sola pantalla con todos los campos; preferí los pasos porque cada uno es una elección de un toque y los datos personales llegan al final, cuando ya hay compromiso. El coste: más clics antes de enviar.
- Qué esperaba
- Consultas que llegaran calificadas por tipo de proyecto, presupuesto y plazo, sin una llamada previa de descubrimiento.
05 — Sistema
Quedó una home con una acción principal en el hero (Fig. 0), un header bilingüe con un solo botón, que en móvil se repite en el panel y en una pastilla flotante (Fig. 1), una grilla de ocho capacidades que en móvil pasa a carril (Fig. 2), un cierre con tres salidas (Fig. 3) y un formulario de calificación en cuatro pasos (Fig. 4). Cada tarjeta abre su página de servicio, y también diseñé y desarrollé las páginas de servicios, portafolio y recursos.
El alcance cerró en entrega e instrumentación, no en reporting de impacto, así que este caso no reporta cifras.
06 — Qué probaría ahora
Hoy los botones de reserva de la home y de los servicios llevan a la página de contacto, que avisa de que no hay agenda pública (Fig. 0 frente a Fig. 4). Probaría a alinear la promesa con el destino: que el botón diga lo que pasa y abra el paso 1 del formulario.
- Hipótesis
- Si los botones que hoy dicen "Reservar" prometen lo que ocurre de verdad ("Cuéntanos tu proyecto") y abren directamente el paso 1 del formulario, más sesiones que hacen clic terminan el formulario, sin que bajen los clics en esos botones.
- Métrica primaria
- Formularios de calificación enviados por sesión que hace clic en un botón de reserva, medidos en GA4.
- Guarda
- Clics en los botones de reserva por sesión que entra por la home: si caen, la promesa nueva atrae menos que "Reservar".
- Control
- Los botones actuales con "Reservar", que llevan a la página de contacto. Reparto 50/50 hasta el tamaño de muestra calculado sobre la línea base; con tráfico B2B bajo, probablemente varias semanas.