[Caso 01]
Rediseño estratégico de sitio web para agencia de marketing automotriz aumentando al 61% el tiempo en sitio.
[Automotriz / B2B / Eventos corporativos]
El rediseño aumentó en 61% el tiempo de permanencia en la página
Y elevó la profundidad de lectura al 64,5%
[Resumen del proyecto]
Lideré el rediseño del sitio institucional de Off Road México, agencia especializada en eventos automotrices para marcas como BMW, Audi y Jeep. El objetivo fue modernizar y optimizar la experiencia digital, elevando la percepción de la marca, mejorando la comunicación de sus servicios y generando confianza en clientes potenciales, bajo la metodología Lean UX.
[Problema identificado]
El sitio anterior presentaba oportunidades de mejora: una comunicación poco clara de los servicios, navegación limitada y una propuesta de valor difusa. Esto dificultaba que armadoras y agencias entendieran rápidamente la oferta de Off Road México. Se requería una solución digital más clara, intuitiva y enfocada en conversión, que facilitara el contacto y proyectara innovación desde el primer segundo.
[Solución implementada]
Se rediseñó el sitio con una arquitectura más clara, mensajes directos de valor y CTAs visibles. Se optimizó la experiencia de navegación, mejorando la comprensión de los servicios y facilitando la conversión a través de formularios medibles con GA4 y Microsoft Clarity.
[Area de enfoque]
Automotriz
B2B
Eventos corporativos
[Mi rol]
UX Research
UI Design
Arquitectura de la Información
Prototyping
Data & Analytics
[Herramientas utilizadas]
Figma
Miro
Wordpress
[Plataforma]
Web Desktop
[Duración del proyecto]
Enero 2021 - Abril 2021
💡
Al unirme a la empresa detecté que su sitio web no comunicaba con claridad la propuesta de valor ni los servicios. Decidí asumir el reto de rediseñarlo y, gracias a mi formación en diseño industrial, adapté metodologías de creación de productos al entorno digital. Esto me permitió transformar un problema en una solución viable, desarrollando un MVP funcional que fortaleciera la confianza en la marca.
[Hipotesis]
🎯
Hipótesis de diseño
Si rediseñamos la estructura visual del sitio y clarificamos los servicios, entonces los usuarios (agencias, marcas, distribuidores) comprenderán mejor la propuesta de valor y estarán más dispuestos a iniciar contacto.
[Investigación de usuario]
Exploración inicial de usuarios y negocio
👥
Stakeholders
Reuniones con dueños y equipo operativo para identificar necesidades del negocio.
🔍
Heurístico
Análisis del sitio original con base en principios de usabilidad de Nielsen.
📊
Benchmark
Comparación con agencias automotrices similares para identificar buenas prácticas.
🤝
Clientes
Primeros contactos para comprender expectativas y puntos de dolor.
💡
Para iniciar entrevisté a los stakeholders y así entender necesidades y expectativas, realicé un benchmark con tres competidores directos y un análisis heurístico del sitio con base en Nielsen. Con estos hallazgos elaboré un diagrama de afinidad que me permitió detectar patrones y priorizar las áreas clave de mejora.
[Análisis heurístico del sitio actual]
💡
Con el análisis identifique barreras críticas de usabilidad: diseño sobrecargado y desactualizado, formularios sin feedback ni validación, botones inconsistentes y elementos falsos clickeables, contenido poco legible, logos desordenados y un menú lateral invasivo. Estos hallazgos me permitieron detectar posibles soluciones para mejorar la navegación, la legibilidad y la consistencia visual del sitio.
[Diagrama de afinidad]
🔑
Insights de investigación
Confianza y marca
La web no genera credibilidad inmediata; los usuarios no perciben profesionalismo ni innovación al primer contacto.
Imágenes y textos desactualizados transmiten desconfianza y no reflejan el prestigio de la marca.
Funcionalidad y usabilidad
Formularios confusos y campos mal etiquetados generan fricción en el contacto.
Botones y enlaces carecen de jerarquía visual clara, dificultando completar acciones básicas.
Contenido y claridad
Secciones como “Servicios” y “Clientes” son poco detalladas, lo que dificulta entender la propuesta de valor.
Términos demasiado generales no comunican los beneficios reales de la empresa.
Jerarquía visual y navegación
El home carece de jerarquía clara, generando confusión sobre el propósito del sitio.
La navegación es limitada, lo que impide encontrar información clave en pocos clics.
💡
A partir de la investigación, confirmé que los usuarios necesitaban claridad inmediata en los servicios y una jerarquía de contenido más organizada para comprender el propósito del sitio. También identifiqué la importancia de destacar clientes e instalaciones para transmitir confianza y prestigio, además de optimizar los puntos de contacto para facilitar la comunicación. Estos hallazgos me llevaron a definir dos proto–personas que representaban las necesidades clave de los usuarios y guiaron las siguientes decisiones de diseño.
Carla Torres
"La coordinadora proactiva"
Comportamiento
Coordina lanzamientos de producto y eventos con agencias externas y stakeholders internos
Dispone de tiempo limitado para investigar proveedores
Utiliza formularios web para contacto inmediato
Se basa en recomendaciones que tengan claridad y confianza para tomar decisiones
Datos demográficos
Edad: 34 años
Lugar de residencia: Ciudad de México
Genero: Mujer
Habilidad tecnológica: Alta
Cargo: Gerente de marketing
Necesidades
Trabaja con agencias que generen confianza y profesionalismo
Acceso inmediato a formularios de contacto y ubicaciones en google maps
Garantizar logística y calidad ante su equipo
Validar alineación con la marca y expectativas
Mário Ramirez
"El que toma desiciones de manera exigente"
Comportamiento
Toma decisiones con rapidez cuando tiene evidencia concreta
Busca fotos reales y casos de éxito antes de concretar la idea
Contacta vía correo o teléfono para aclarar dudas urgentes
Prefiere ver webs en móvil que en desktop
Datos demográficos
Edad: 48 años
Lugar de residencia : Monterrey
Genero: Hombre
Habilidad tecnológica: Medio
Cargo: Director de operaciones
Necesidades
Obtener información de calidad en servicios ofrecidos por proveedores
Ver fotos recientes que respalden calidad del proveedor
Corroborar que se puede ejecutar un evento similar al deseado
Acceder a un sitio web navegable y optimizado para celular
💡
Al profundizar en las proto-personas, entendí con mayor claridad qué esperan los usuarios de una empresa como ORM y cómo la experiencia en el sitio web puede influir directamente en sus decisiones. Para analizar cómo interactuaban con la web actual, decidí enfocarme en Carla, la proto-persona que representa mejor al perfil de cliente que suele contactar a la empresa. A partir de su perfil, desarrollé un proto-journey para mapear su experiencia actual y detectar puntos críticos.
[Mapa de empatia]
🔑
Insights del mapa de empatia
Necesidad de confianza inmediata
Los usuarios requieren claridad desde el primer contacto (textos claros, imágenes actualizadas, casos de éxito).
Facilidad de contacto
Buscan formularios visibles, opciones rápidas de comunicación y ubicación clara en Google Maps.
Evidencia visual
Fotos recientes e información validada son clave para tomar decisiones rápidas.
Uso responsive
Gran parte de la navegación ocurre en desktop pero dependen del celular, por lo que el sitio debía ser responsive y ágil.
💡
Estos insights guiaron las prioridades del rediseño: mejorar la claridad de la propuesta de valor, actualizar imágenes y casos de éxito, optimizar los puntos de contacto y asegurar una experiencia responsive.
Para profundizar en cómo estas necesidades impactaban la experiencia del usuario, elaboré un proto-journey que mostró los momentos de frustración y las oportunidades de mejora dentro del recorrido actual.
[Proto-journey]
[Value proposition canvas]
💡
Este análisis me permitió ver con claridad que el problema no era solo visual, sino estratégico: la web no estaba comunicando confianza ni facilitando el contacto. A partir de aquí, pude redefinir la arquitectura de información, proponer una navegación más clara y destacar evidencias visuales que transmitieran credibilidad.
[Priorización con método MoSCoW]
💡
Al tomar la iniciativa de rediseñar el sitio, sabía que el MVP debía desarrollarse con recursos mínimos. Contábamos con un dominio y hosting activos, pero sin conocimientos avanzados de programación. Esto me llevó a investigar soluciones viables y opté por WordPress, que me permitió construir el sitio sin código complejo y aprovechar los recursos existentes.
De forma autodidacta aprendí WordPress desde cero y, aplicando el método MoSCoW, prioricé funcionalidades equilibrando lo indispensable con lo deseable. Esta estrategia alineó los hallazgos de investigación con un MVP funcional, enfocado en resolver problemas reales de los usuarios.
[Estructurando la información del sitio]
💡
Para comunicar esta versatilidad, reorganicé la oferta en tres grandes áreas: automotriz, corporativos y activaciones. Esta nueva clasificación permitió que los usuarios entendieran mejor el alcance de la empresa. Posteriormente, diseñé un mapa del sitio y un user flow que reflejaban esta estructura, asegurando un recorrido lógico y claro para los visitantes.
[Definición del User Flow]
💡
El user flow me ayudó a visualizar los recorridos principales que seguirían los usuarios desde el inicio hasta completar un contacto, identificando puntos de fricción y oportunidades de simplificación.
Gracias a esta definición previa, aseguré que cada decisión de diseño estuviera respaldada por una jerarquía clara de contenidos y un recorrido fluido, alineado con las expectativas del usuario.
[Wireframes de baja fidelidad]
🔑
Insights de diseño
Un hero con video introductorio genera confianza y transmite profesionalismo desde el primer contacto.
CTA visibles y consistentes son esenciales para guiar al usuario hacia la acción principal (contacto).
Las secciones de servicios e instalaciones deben estar jerarquizadas desde el inicio para reforzar su relevancia en la navegación.
Dividir los servicios en categorías claras facilita su comprensión y mejora la percepción del alcance de la empresa.
💡
Como primer paso para el diseño de interfaz, elaboré wireframes de baja fidelidad para explorar rápidamente diferentes opciones de layout y organización de contenido. Utilicé la técnica de crazy 8’s, lo que me permitió generar múltiples ideas en poco tiempo y seleccionar las más viables.
Estos wireframes me ayudaron a validar la estructura del mapa del sitio en un recorrido visual simple y coherente, asegurando que la jerarquía de información respondiera a las necesidades de los usuarios antes de avanzar a versiones de mayor fidelidad.
[Wireframes de mediana fidelidad]
💡
Con estos wireframes de mediana fidelidad refiné la estructura inicial definida en papel, organizando jerarquías de contenido, CTA y secciones clave. En lugar de avanzar a una versión de alta fidelidad, enfoqué mis esfuerzos en estructurar el contenido y las llamadas a la acción, lo que me permitió visualizar cómo se distribuiría la información y cómo se comunicarían los mensajes principales desde el diseño. Este enfoque me ayudó a validar la usabilidad general, detectar posibles ajustes y asegurar que la jerarquía y el flujo de navegación funcionaran como una herramienta efectiva para anticipar el uso real del sitio y optimizarlo antes de su ejecución final.
[Producto final]
💡
Este proyecto me permitió confirmar la importancia de iterar y validar cada decisión de diseño antes de la implementación. Pasar de wireframes en papel a un prototipo funcional me ayudó a visualizar cómo la estructura y el contenido podían transformar la percepción de la marca y generar confianza desde el primer contacto. Aprendí a equilibrar los objetivos del negocio con las necesidades reales de los usuarios, y a adaptar la solución según las limitaciones técnicas sin perder el valor de la experiencia.
Insights del producto final
La confianza del usuario se construye desde los primeros segundos con hero, CTA y evidencia visual clara.
La organización del contenido por categorías ayudó a comunicar mejor el alcance real de la empresa.
Algunos elementos fueron adaptados respecto a los wireframes iniciales para responder mejor a las necesidades reales, como la ubicación de los CTA
Iterar wireframes de baja a media fidelidad permitió optimizar la jerarquía de información antes del desarrollo real.
En una segunda validación con las turísticas de Nielsen se logró llegar a una mejora del 82% con respecto al 57% que genero el anterior diseño.
La validación temprana evitó retrabajos y aseguró que el diseño respondiera a necesidades reales.
[Resultados]
Meta de evaluación
El rediseño del sitio de Off Road México tuvo como meta optimizar la experiencia de navegación y aumentar la generación de leads a través de formularios.
Para evaluar el impacto, se definieron KPIs medidos con Google Analytics 4 (GA4), Microsoft Clarity.
Medir comprensión de la propuesta de valor.
SMART: Durante los primeros 3 meses después del lanzamiento, se deberan recopilar datos de interacción en las páginas principales para establecer una línea base de tiempo promedio, scroll depth y clics en secciones clave.
Resultados
En los primeros 3 meses medimos que el tiempo promedio en la pagina fue de 52s, el scroll depth promedio alcanzó 45.45%, y los usuarios hicieron clic principalmente en la sección de instalaciones y servicios. Esto nos dio una línea base de comprensión de la propuesta de valor y hacia donde se dirige el usuario.
🕒
Tiempo promedio
Tiempo: 52s
Los usuarios dedican menos de 1 min, aun insuficiente para leer la propuesta completa. |
💻
Scroll depth
45% llegan al final
La mitad abandona antes del final.
🖱️
Interacción
Clics concentrados en instalaciones y servicios.
Los usuarios se interesan en los bloques superiores.
Estos hallazgos validaron parcialmente la hipótesis inicial, mostrando que los usuarios comprendían parte de la propuesta de valor pero no profundizaban en toda la información.
[Heat maps]
[Tiempo promedio en las principales paginas]
Acciones de mejora
Se optimizará la jerarquía de contenidos destacando los mensajes clave en la parte superior, se reubicará la información esencial antes del 60% del scroll y se reforzarán los CTAs intermedios y finales, con el objetivo de mejorar la comprensión, retención y disposición al contacto.
[Optimización]
Impacto de las optimizaciones
Después de reubicar elementos clave, optimizar el CTA de contacto y eliminar fricciones en la navegación, el comportamiento de los usuarios mostró una mejora significativa al mes de los cambios medido con Microsoft Clarity.
🕒
Tiempo promedio
El tiempo activo en página creció a 1,4 minutos, superando el registro inicial de menos de un minuto y reflejando mayor interés en la propuesta de valor.
💻
Scroll depth
La profundidad de desplazamiento promedio aumentó a 64,51%, indicando que más usuarios leen y exploran el contenido completo.
Estos resultados confirman que los ajustes en la jerarquía de contenidos y la optimización de CTAs mejoraron la comprensión y el engagement de los usuarios con la web.
[Casos de estudio]
