Caso de estudio · UX de conversión
Flujo de contacto accesible
Un flujo de contacto y calificación de leads diseñado para que el siguiente paso sea obvio para clientes, manteniendo el formulario accesible, ligero, claro sobre privacidad y fiable cuando JavaScript o el proveedor externo no están disponibles.
Prueba del proyecto
Mi rol
- Diseñé el flujo de contacto como experiencia de producto con campos claros, alternativas, texto de privacidad y validación localizada.
- Equilibré claridad de conversión con accesibilidad para teclado, lector de pantalla y contextos sin JavaScript.
- Mantuve el flujo suficientemente ligero para un portfolio estático sin perder confianza ni fiabilidad operativa.
Restricciones
- El proveedor del formulario puede no estar disponible en entornos locales, restringidos o sin configuración.
- El flujo debía servir a recruiters, clientes freelance y colaboradores técnicos sin convertirse en un cuestionario largo.
- La página necesitaba claridad de privacidad sin añadir tracking pesado ni scripts intrusivos de conversión.
Decisiones clave
- Mantuve visible el fallback por email para que el usuario siempre tenga una forma fiable de iniciar conversación.
- Usé etiquetas explícitas, mensajes de validación y guía de contexto del proyecto en lugar de instrucciones solo en placeholders.
- Localicé el flujo para que confianza y recuperación de errores sigan claras en inglés, español y árabe.
Contexto
Un flujo de contacto en un portfolio es una superficie de producto. Debe ayudar a una persona real a decidir si inicia una conversación, explicar qué información es útil y ofrecer una alternativa cuando el envío embebido no funciona.
El objetivo fue crear un flujo ligero que soporte mensajes de recruiters, consultas freelance y solicitudes de colaboración técnica sin convertir la página en una aplicación compleja.
Problema
Muchos formularios de portfolio optimizan la simplicidad visual pero olvidan estados de fallo reales. El usuario puede no saber qué escribir, la tecnología asistiva puede recibir etiquetas pobres y los servicios externos pueden no estar disponibles en entornos restringidos.
El flujo también debía evitar lenguaje agresivo de conversión. Expectativas claras, notas de privacidad y un email directo importan más que capturar leads a cualquier costo.
- El formulario necesitaba etiquetas explícitas, mensajes de validación y navegación por teclado predecible.
- La página necesitaba email directo si el proveedor de formularios no estaba disponible.
- El texto debía explicar qué contexto del proyecto conviene incluir.
- La implementación tenía que seguir siendo ligera para un sitio Astro estático.
Enfoque
El flujo se estructuró alrededor de fiabilidad progresiva. El formulario principal sigue siendo HTML semántico, mientras que instrucciones, etiquetas, validación y rutas de email permanecen visibles y rastreables.
En lugar de ocultar instrucciones dentro de JavaScript, la página explica desde el inicio el input útil: tipo de proyecto, restricciones, tiempos y preferencia de contacto.
- Usé campos etiquetados y texto de ayuda conciso para que el formulario funcione sin contexto visual.
- Mantuve enlaces de email visibles cuando el envío no puede configurarse con seguridad.
- Localicé etiquetas y mensajes de error para que las rutas no inglesas sean completas.
- Reduje el camino de conversión: entender encaje, enviar detalles o usar email.
Accesibilidad y confianza
El diseño del formulario trata la accesibilidad como parte de la confianza. El usuario debe poder navegar con teclado, entender campos obligatorios, recuperarse de errores y elegir una alternativa sin adivinar.
El texto de privacidad es deliberadamente claro. Explica qué ocurre al enviar un mensaje y desaconseja incluir información personal sensible en una consulta de proyecto.
- Las etiquetas y validaciones usan lenguaje directo, no solo placeholders.
- Las opciones de contacto son enlaces reales, no únicamente iconos decorativos.
- Los estados de error y éxito se escriben como feedback accionable.
- El flujo evita scripts de analítica innecesarios en la ruta de contacto.
Rendimiento y SEO
Las páginas de contacto suelen quedar fuera del SEO, pero son importantes para conversión y confianza. Esta implementación mantiene información de contacto, encaje de servicios, privacidad y rutas alternativas disponibles en el documento inicial.
La página evita dependencias pesadas de cliente y mantiene layout estable para que usuarios móviles lleguen al formulario o email sin popups, saltos de contenido ni controles ocultos.
- Usé marcado semántico de formulario y enlaces de correo rastreables.
- Mantuve la página legible sin renderizado dependiente de JavaScript.
- Localicé etiquetas y textos de apoyo para preservar confianza entre idiomas.
- Evité desplazamientos de layout alrededor de estados de formulario y tarjetas de contacto.
Resultados
- Un recorrido de contacto más claro para recruiters, clientes y colaboradores técnicos.
- Estructura de formulario accesible con etiquetas, validación y rutas alternativas localizadas.
- Menor riesgo operativo cuando un proveedor externo de formularios no está disponible.
- Mejores señales de confianza mediante texto explícito de privacidad, respuesta y contexto de proyecto.
Próximos pasos
- Medir calidad de consultas solo con señales seguras, respetuosas de privacidad y consentimiento.
- Agregar presets opcionales de tipo de proyecto si el comportamiento futuro muestra patrones repetidos.
- Seguir probando el flujo con teclado y preferencias de movimiento reducido.