[Caso Off Road México]
Rediseño estratégico que aumentó un 23% el tiempo de interacción y un 19% la retención de usuarios en Off Road México
[Automotriz / B2B / Eventos corporativos]
De una web informativa a una plataforma estratégica que impulsa confianza y claridad
[Contexto del proyecto]
Lidere el rediseño del sitio web de Off Road México, agencia especializada en eventos automotrices para marcas como BMW, Audi y Jeep, que surgió de una iniciativa personal al detectar fricciones en la experiencia digital de la empresa, principalmente en la comunicación de sus servicios y el flujo de contacto con clientes potenciales.
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.
[El desafío]
Reestructurar el sitio para comunicar credibilidad y alcance, mejorar la comprensión de la propuesta de valor y aumentar las interacciones de contacto, reduciendo los puntos de fricción detectados en el análisis heurístico y las entrevistas con stakeholders, lo cual dificultaba que armadoras y agencias entendieran rápidamente la oferta de Off Road México.
[Solución implementada]
Diseñé una nueva arquitectura centrada en el usuario con servicios categorizados, CTAs visibles y navegación optimizada, mejorando la comprensión del contenido y reforzando la propuesta de valor.
El sitio fue implementado en WordPress, con integración de GA y Microsoft Clarity para medir el impacto.
Después del lanzamiento, el tiempo activo en página aumentó a 1.4 minutos (+23%) y la profundidad de scroll a 64.5% (+19%), validando una mejora significativa en la interacción y el engagement.
[Compañia]
Off Road Mexico
[Mi rol]
UX/UI Design
UI Design
Arquitectura de la Información
UX Writing
Data & Analytics
[Herramientas utilizadas]
Figma
Wordpress
Miro
Microsoft Clarity
GA
[Plataforma]
Web Desktop
[Duración del proyecto]
Enero 2021 - Abril 2021
Experiencias que trascienden lo físico y fortalecen la relación entre marca y usuario
Las experiencias más memorables no solo se viven, también se entienden, se miden y se recuerdan. Detrás de cada conexión significativa entre una marca y su público existe una historia diseñada con propósito donde la emoción y la estrategia se encuentran para generar valor real.
Off Road México es una empresa B2B especializada en diseñar y producir experiencias automotrices que conectan marcas, armadoras y clientes a través de eventos, pruebas de manejo y entrenamientos. Cada proyecto combina pensamiento estrategico, operación precisa y narrativa visual para transformar la interacción en un punto de contacto emocional y medible.
Su propuesta integra diseño de experiencia, logística y analítica, convirtiendo cada evento en un flujo estratégico. Así, Off Road México no solo crea activaciones, sino ecosistemas de conexión donde las marcas fortalecen relaciones, construyen confianza y transforman cada experiencia en información accionable.
Esta misma filosofía se trasladó al entorno digital. El rediseño del sitio web llevó la experiencia del campo a la pantalla, una plataforma que refleja la energía, la confianza y el profesionalismo que la empresa transmite en cada evento, fortaleciendo su comunicación y consolidando su liderazgo en el sector automotriz B2B.
💻 Un sitio web que comunica experiencia, estrategia y confianza
El rediseño del sitio web de Off Road México representó una oportunidad para potenciar su presencia digital y alinear la comunicación de marca con la solidez de su operación en campo. El nuevo sitio fue concebido como una plataforma viva, moderna y funcional que transmite lo que la empresa realmente quiere comunicar, un aliado estratégico B2B especializado en experiencias automotrices diseñadas con precisión, creatividad y propósito.
El proceso de rediseño se enfocó en elevar la percepción de marca, mejorar la claridad de la propuesta de valor y optimizar la navegación para sus usuarios. Cada decisión, desde la estructura de información hasta los microdetalles visuales, se diseñó con el objetivo de reflejar innovación, confianza y dinamismo, los tres pilares que distinguen a Off Road México.
🏆 Comunicar con mayor claridad la propuesta de valor
Se fortaleció la narrativa visual y textual para proyectar a Off Road México como una empresa B2B líder en experiencias automotrices, destacando su capacidad de conectar marcas y armadoras con sus clientes a través de proyectos medibles y de alto impacto.
⚒️ Optimizar la arquitectura para una navegación más intuitiva
Se reorganizó la información en recorridos claros y jerárquicos que facilitan la comprensión de los servicios. Los contenidos se estructuraron por áreas estratégicas, (automotrices, corporativos y activaciones), generando una experiencia fluida que guía naturalmente hacia la acción.
🤝 Fortalecer la identidad visual y la consistencia de marca
Se desarrolló un sistema visual sólido y escalable inspirado en la energía y precisión del entorno off-road. La nueva paleta cromática, la tipografía y los componentes modulares aportan coherencia, accesibilidad y una presencia digital profesional que respalda la reputación de la marca.
[Panorama estrategico]
🏁 Una marca que transforma experiencias en confianza y resultados medibles
El proyecto nació con el objetivo de traducir la trayectoria de más de 25 años de Off Road México en una experiencia digital clara, estratégica y medible, fortaleciendo su posicionamiento B2B y su capacidad de generar confianza desde el primer contacto.
🚘 Experiencias que conectan marcas y personas
Off Road México se ha consolidado como un aliado estratégico B2B que une diseño, logística y tecnología para crear eventos que comunican, enseñan y fidelizan.
🌐 Trayectoria que impulsa evolución digital
Con una trayectoria respaldada por grandes armadoras, la empresa decidió fortalecer su presencia digital para comunicar su propuesta de valor con la misma claridad y profesionalismo que transmite en sus eventos presenciales.
[El reto]
🤝 Replantear la experiencia digital para recuperar la confianza perdida entre la marca y sus usuarios
Cuando me uní al equipo, identifiqué que el sitio web no reflejaba el alcance ni la propuesta de valor que Off Road México realmente ofrecía. La estructura visual era rígida, el contenido pesado y la navegación poco intuitiva. Más allá del aspecto estético, el verdadero desafío era redefinir cómo la empresa se presentaba ante sus clientes y cómo podía transmitir la confianza que sí lograba en sus experiencias presenciales.
Gracias a mi formación en diseño industrial, trasladé principios de claridad, estructura y usabilidad al entorno digital, transformando un sitio informativo en una plataforma funcional, estratégica y alineada con los objetivos del negocio. Decidí asumir el reto aplicando pensamiento UX y metodologías Lean, con el objetivo de convertir un sitio informativo en una plataforma digital estratégica.
Mi enfoque fue crear una experiencia digital coherente, accesible y alineada con los valores del negocio, permitiendo que cada interacción reflejara la profesionalidad y la innovación que caracterizan a la marca, desarrollando un MVP funcional que fortaleciera la confianza en la marca.
[Hipotesis]
🎯 Convertir una hipótesis en decisiones medibles que alinearon la percepción digital con la realidad del negocio
Antes de iniciar el proceso, definí una hipótesis de diseño que me ayudara a mantener todas las decisiones centradas en los objetivos del negocio y en las verdaderas necesidades de los usuarios.
Observé que, aunque Off Road México contaba con una sólida reputación en la industria automotriz, su sitio web no comunicaba con la misma fuerza el valor de sus servicios ni su enfoque B2B. Esta brecha entre la confianza presencial y la experiencia digital se convirtió en el eje de mi planteamiento.
🎯
Hipótesis de diseño
Si rediseñaba la estructura visual del sitio y clarificaba los servicios, los usuarios (agencias, marcas y distribuidores) comprenderían mejor la propuesta de valor y estarían más dispuestos a iniciar contacto con la empresa.
Esta hipótesis me permitió orientar todo el proceso de diseño hacia una validación tangible de confianza, claridad y conversión, asegurando que cada decisión visual o estructural respondiera a un objetivo medible.
[Análisis heurístico]
🔎 Detecté patrones de diseño que obstaculizaban la claridad, la navegación y la credibilidad digital de Off Road México
Antes de diseñar soluciones, necesitaba entender el punto de partida. Realicé un análisis heurístico basado en los principios de usabilidad de Nielsen Norman Group, evaluando cómo la interfaz actual influía en la percepción de valor y confianza de los usuarios.
El análisis reveló fricciones visuales, estructurales y de contenido que comprometían la experiencia digital, una navegación poco intuitiva, jerarquía visual débil, mensajes extensos y falta de retroalimentación en formularios. Más que una auditoría estética, fue un ejercicio para comprender cómo el diseño existente condicionaba la comprensión del usuario y debilitaba la imagen profesional de la marca.
🔑
Principales hallazgos del análisis heurístico
🧭 Navegación poco intuitiva
El menú lateral fijo saturaba el espacio y no ofrecía una jerarquía clara, generando desorientación.
🎨 Estructura visual inconsistente
Se detectaron variaciones en botones, tamaños tipográficos y espaciados. Algunos elementos visuales simulaban ser interactivos sin acción real, afectando la confianza del usuario.
🧩 Contenido extenso y poco escaneable
Baja legibilidad y ausencia de priorización informativa, dificultando la lectura. En varias secciones la información no estaba priorizada ni adaptada a los distintos tipos de usuarios.
💬 Falta de retroalimentación en formularios
El formulario de contacto no ofrecía confirmación ni estados de error. El usuario no sabía si su mensaje había sido enviado, lo que generaba incertidumbre.
🖼️ Imágenes comprimidas y jerarquía débil
Las fotografías pese a ser un recurso valioso estaban comprimidas y sin contexto narrativo. Esto debilitaba el impacto visual y la percepción de profesionalismo.
El diagnóstico fue claro, el sitio cumplía su función informativa, pero no reflejaba la claridad, fuerza ni profesionalismo que Off Road México proyectaba en sus experiencias presenciales.
Estos hallazgos se convirtieron en la base para replantear la arquitectura de información, la jerarquía visual y el tono comunicativo, orientando el rediseño hacia una experiencia digital más confiable y escalable.
[Investigación]
👥 Las conversaciones con stakeholders revelaron una desconexión entre la estrategia de marca y su expresión digital
Comencé con entrevistas a los dueños y al equipo operativo para entender qué funcionaba, qué debía mejorar y cómo el sitio web podía fortalecer la relación con los clientes B2B.
Durante las conversaciones, surgieron patrones claros, falta de claridad en el mensaje, dificultad para expresar el valor diferencial y una estructura que no proyectaba el nivel profesional que Off Road México demostraba en sus eventos presenciales.
Estas entrevistas me ayudaron a identificar oportunidades estratégicas clave, como simplificar los mensajes, priorizar los servicios más relevantes y alinear la comunicación digital con la fortaleza y credibilidad de la marca.
📊 El benchmark competitivo definió los principios de comunicación que diferencian a las marcas líderes
Analicé tres agencias automotrices referentes en México y Latinoamérica para detectar buenas prácticas en arquitectura, narrativa visual y tono de comunicación.
Descubrí que las marcas con mayor impacto digital compartían tres elementos esenciales:
Enfocaban su mensaje en resultados y casos de éxito.
Comunicaban con claridad emocional y propósito.
Guiaban al usuario hacia acciones concretas, como solicitar contacto.
Estos hallazgos establecieron un principio para el rediseño, el nuevo sitio debía ir más allá de describir servicios; debía hacer sentir el valor de la marca desde la primera interacción.
🤝 Los clientes valoraban la experiencia de la marca pero no lograban entender la amplitud de sus servicios en el sitio actual
Entrevisté a clientes y aliados para comprender cómo percibían a Off Road México y qué esperaban del sitio. La mayoría reconocía su trayectoria y profesionalismo, pero coincidía en que la plataforma digital no reflejaba la diversidad de servicios ni la solidez que vivían en los eventos presenciales.
Algunos incluso mencionaron que preferían el contacto directo porque el sitio no transmitía suficiente claridad ni confianza.
Este insight reforzó una conclusión esencial: el rediseño debía elevar la confianza y coherencia visual, asegurando que la primera impresión digital reflejara el mismo nivel de excelencia que la experiencia física.
Integrar las perspectivas de stakeholders, competencia y clientes me permitió alinear la visión del negocio con las expectativas de los usuarios, generando una base sólida para la fase de ideación y el diagrama de afinidad.
[Diagrama de afinidad]
🧩 La investigación reveló que el verdadero desafío no era rediseñar la interfaz, sino reconstruir la confianza digital de la marca
Después de analizar entrevistas, benchmarks y observaciones, organicé todos los hallazgos en un diagrama de afinidad que me permitió visualizar patrones de comportamiento y necesidades comunes.
La síntesis reveló que los principales retos del sitio eran la falta de claridad en la comunicación, la desalineación con el prestigio de la marca y una experiencia digital que no transmitía confianza.
Comprendí que el verdadero objetivo no era solo optimizar una interfaz, sino reposicionar digitalmente una marca B2B reconocida en el entorno presencial, fortaleciendo la coherencia y el valor de la marca.
🔑
Insights de investigación
🧩 Reestructurar mejor la información
Las conversaciones con stakeholders revelaron la oportunidad de reorganizar el contenido en función del recorrido del usuario, comunicando servicios y capacidades de forma más clara y estratégica.
💬 Humanizar el lenguaje
Los usuarios expresaron que preferían un tono más directo y conversacional, por lo que se identificó la posibilidad de actualizar los textos para transmitir cercanía y confianza.
🧭 Redefinir la navegación hacia objetivos claros
El análisis del sitio mostró que se podía orientar la navegación hacia acciones de valor, como contactar, integrando flujos que acompañen la decisión del usuario.
🤝 Alinear la marca digital con su prestigio
Los hallazgos evidenciaron una gran oportunidad para reflejar en la web la misma calidad percibida en los eventos presenciales, fortaleciendo la coherencia entre experiencia física y digital.
📸 Renovar la narrativa visual de marca
La investigación reveló que la competencia ya proyecta imágenes aspiracionales y dinámicas, lo que inspiró actualizar la identidad visual para transmitir innovación, energía y profesionalismo.
🧾 Hacer el contenido más útil y escaneable
Se detectó que los usuarios valoran información concreta y visualmente jerarquizada, lo que abrió la posibilidad de rediseñar las secciones clave con foco en claridad y rapidez.
Esta etapa confirmó que el reto central no era estético, sino estratégico, reposicionar digitalmente a Off Road México con una presencia clara, confiable y alineada a su valor de marca.
Estos hallazgos se transformaron en criterios de diseño fundamentales basados en confianza, claridad y coherencia, que guiaron toda la siguiente fase de ideación.
👤 Las proto-personas revelaron que la confianza se construye con claridad, evidencia y credibilidad visual
Tras analizar los hallazgos del diagrama de afinidad, identifiqué dos perfiles principales que representaban cómo las marcas automotrices y sus equipos se relacionan con Off Road México.
Ambos perfiles reflejan distintos niveles de decisión, necesidades de confianza y expectativas sobre la calidad del servicio.
Al crear estas proto-personas, busqué equilibrar la perspectiva del negocio (B2B) con los patrones de comportamiento digital que emergieron en las entrevistas y benchmark. Esto me permitió visualizar con claridad qué esperan los usuarios antes de contactar a una agencia como ORM, y cómo una experiencia digital más fluida puede fortalecer esa relación.
👩🏻
Carla Torres “La coordinadora proactiva”
Carla representa a las usuarias que coordinan lanzamientos o capacitaciones para armadoras automotrices. Valora la eficiencia, claridad visual y profesionalismo.
Su tiempo es limitado, por lo que prioriza formularios de contacto funcionales, acceso inmediato a ubicaciones y evidencia de proyectos previos.
Esta proto-persona me ayudó a enfocar el rediseño hacia una navegación más clara, con jerarquía visual y contenido orientado a generar confianza desde el primer clic.
👨🏻
Mário Ramírez “El que toma decisiones de manera exigente”
Mário representa a los directores o responsables de operaciones que evalúan a las agencias por su trayectoria, resultados y calidad visible.
Necesita ver fotos recientes, proyectos similares al suyo y evidencia tangible de ejecución.
Su perfil me permitió reforzar la importancia de mostrar casos de éxito, certificaciones y credenciales visuales, convirtiendo el sitio en una herramienta de validación para decisiones rápidas y seguras.
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
Definir estos perfiles me permitió entender que la confianza no se diseña solo con estética, sino con contenido funcional, evidencia y claridad.
A partir de ellos desarrollé el user journey, mapeando puntos de contacto y momentos de fricción para orientar decisiones hacia una experiencia digital coherente con el valor y prestigio de la marca.
[Proto-journey]
🗺️ Mapear la experiencia reveló los puntos donde la confianza se perdía y definió las acciones clave del rediseño
Tras definir las proto-personas, decidí analizar cómo interactuaban con el sitio actual antes de contactarnos.
Usé el perfil de Carla Torres, la coordinadora de marketing que busca validar profesionalismo y experiencia desde la web, para construir un Proto-Journey que reflejara sus emociones, expectativas y obstáculos durante su recorrido.
El mapa evidenció una experiencia fragmentada, aunque Carla encontraba la empresa en buscadores, la falta de información clara y contenido actualizado le generaba desconfianza. Al no ver proyectos recientes ni descripciones detalladas de servicios, abandonaba el sitio antes de iniciar contacto.
Este análisis me permitió visualizar oportunidades estratégicas cómo reorganizar el contenido para reducir fricción, mejorar la jerarquía visual y cómo comunicar la experiencia de Off Road México de forma más humana y creíble.
🔑
Principales oportunidades identificadas
🏠 Claridad en la información
El home debía comunicar la propuesta de valor desde el primer vistazo.
🖼️ Evidencia visual actualizada
Mostrar logros, fotos recientes y testimonios reforzaría la confianza.
🧭 Jerarquía y navegación fluida
Se requería una estructura que guiara a los usuarios hacia la acción.
💬 Lenguaje y tono cercanos
Los textos debían alinearse con el estilo de comunicación del sector automotriz, pero con un tono más accesible y contemporáneo.
💡
Decisiones derivadas del Proto-Journey
🎯 Nuevo home
Enfocado en comunicar experiencia y diferenciadores clave, con contenido visual y storytelling de marca.
🧩 Reestructuración de servicios
Mejorar la sección de servicios, presentando cada oferta con descripciones claras, íconos y llamados a la acción visibles.
🔤 Sistema visual coherente y jerárquico
Utilizando tipografía legible, contraste alto y ritmo visual que facilite el escaneo
🤝 Construcción de confianza a través de evidencia, Integrando casos de éxito, certificaciones y clientes destacados para respaldar la reputación digital
Este ejercicio me ayudó a cambiar la perspectiva del diseño, rediseñando la primera impresión que una marca genera en su cliente B2B.
El Proto-Journey me permitió traducir emociones en decisiones concretas de diseño, reforzando la relación entre experiencia digital, reputación y credibilidad empresarial.
[Value proposition canvas]
🎯 Alineando el valor de negocio con las expectativas del usuario
Después de mapear la experiencia actual, busqué conectar lo que Off Road México ofrece como empresa B2B con lo que los usuarios realmente valoran al buscar un aliado estratégico en eventos automotrices.
Para lograrlo, utilicé un Value Proposition Canvas, tomando como referencia a Carla Torres, la coordinadora de marketing que representa el perfil de cliente más recurrente.
El ejercicio permitió visualizar cómo los productos y servicios de la marca pueden aliviar frustraciones, como la falta de información clara o imágenes poco actualizadas y al mismo tiempo potenciar beneficios como la confianza, la evidencia visual y la claridad en los procesos.
Estos hallazgos se tradujeron en criterios de priorización, que más adelante me ayudaron a definir las funcionalidades esenciales para el MVP mediante el método MoSCoW.
[Priorización con método MoSCoW]
⚖️ Priorizar el impacto sobre la complejidad técnica permitió construir un MVP funcional y con propósito de marca
Sabía que el reto no era hacer más, sino hacer mejor, construir un sitio que resolviera necesidades reales sin depender de recursos externos.
Por eso opté por WordPress, que me permitió crear un MVP desde cero de forma autodidacta, equilibrando diseño, estrategia y ejecución.
Para priorizar, apliqué el método MoSCoW, que me ayudó a definir un enfoque realista entre lo indispensable y lo prescindible, guiado siempre por la experiencia del usuario y los objetivos del negocio.
🧭
Claridad ante todo
(Must have)
👁️ La prioridad fue eliminar fricción visual y estructural, asegurando que los usuarios encontraran lo esencial sin esfuerzo.
🏠 Reorganicé el menú principal, agregué CTAs visibles y unificadores, y simplifiqué las descripciones para que cada visitante comprendiera quién es Off Road México y cómo contactarla en segundos.
🏆
Confianza demostrada con evidencia visual (Should have)
🤝 Era vital reforzar la credibilidad de la marca mostrando resultados reales y consistentes.
🖼️ Incorporé, marcas con las que se han trabajado y fotografías de eventos actuales. Esto fortaleció la percepción de profesionalismo y trayectoria.
👆🏼
Interacción que enriquece sin sobrecargar
(Could Have)
⚙️ Busqué oportunidades para hacer la experiencia más dinámica, sin comprometer los recursos técnicos.
📹 Añadí ideas como un hero con video, secciones con iconos que describen los servivioc, y el video institucional. Pequeños detalles que humanizan la experiencia y mantienen el interés del usuario.
🧹
Enfocar recursos donde generan más valor
(Won’t Have)
📁 Decidí dejar fuera características que requerían mantenimiento constante o no aportaban valor inmediato.
📇 Evité secciones como blogs o tours 360°, priorizando una plataforma ligera, clara y centrada en objetivos comerciales reales.
La priorización evidenció que profesionalismo y claridad pesan más que complejidad técnica.
El MVP funcional validó la propuesta con un sitio accesible, coherente y alineado con la esencia de Off Road México.
Con una arquitectura sólida y un diseño centrado en decisiones estratégicas, el siguiente paso fue traducir esta estructura funcional en una experiencia visual moderna, creíble y escalable.
[Estructurando la información del sitio]
⚙️ Diseñé una estructura clara para que los usuarios comprendieran fácilmente las tres áreas clave que Off Road México ofrece
[Definición del User Flow]
🔄 Diseñé un flujo claro que guía al usuario desde el interés hasta la acción
El objetivo fue diseñar una experiencia continua que redujera la fricción y facilitara el acceso a la información más relevante, especialmente para usuarios B2B que buscan evaluar rápidamente la credibilidad de la empresa.
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.
💡
Insight clave
Un flujo de usuario claro no solo mejora la navegación, genera confianza al hacer que cada interacción se sienta intencional y eficiente, reforzando la percepción de profesionalismo y solidez de marca.
🎯
Principales decisiones derivadas del flujo
Reducir pasos innecesarios entre páginas clave (Inicio - Servicios - Contacto).
Incluir llamadas a la acción visibles en secciones estratégicas.
Unificar los patrones de navegación para ofrecer una experiencia continua y predecible.
[Wireframes de baja fidelidad]
✏️ Los wireframes transformaron hallazgos en una estructura clara que comunica valor y confianza desde el primer clic
En esta etapa, definí la estructura base del sitio web, priorizando los elementos que resolvían las principales fricciones detectadas en la investigación.
Cada pantalla buscó traducir los hallazgos en decisiones concretas de diseño, enfocadas en tres objetivos clave:
Comunicar credibilidad desde el primer contacto.
Facilitar una navegación fluida y jerárquica.
Destacar los servicios clave de Off Road México con una arquitectura modular y escalable.
Los wireframes de baja fidelidad me permitieron visualizar cómo cada componente guiaba al usuario a través de un flujo natural, desde el interés inicial hasta el contacto, validando la estructura antes de invertir en diseño visual o desarrollo.
🔑
Insights de diseño
🎥 Hero introductorio
El video principal refuerza la credibilidad de la marca al mostrar su infraestructura y trayectoria en acción. Transmite profesionalismo y genera confianza inmediata.
👆 CTA visibles
Los llamados a la acción se posicionaron estratégicamente para guiar al usuario sin distracciones hacia el contacto o la exploración de servicios.
🧭 Jerarquía clara
Las secciones principales (Servicios e Instalaciones) se organizaron con prioridad visual desde el inicio para facilitar la navegación y reducir fricción.
🧩 Servicios categorizados
Dividir los servicios en tres áreas (Automotriz, Corporativos y Activaciones) permitió clarificar el alcance del negocio y reforzar su especialización.
🔄 Consistencia visual
Se estableció una estructura modular repetible que mantiene coherencia entre pantallas y refuerza el flujo visual del sitio completo.
[Wireframes de mediana fidelidad]
🧩 Los wireframes de mediana fidelidad tradujeron la investigación en decisiones de diseño que eliminaron fricciones y mejoraron la percepción de marca
Se reorganizó el menú principal para reflejar las áreas estratégicas de la empresa, Automotriz, Corporativos y Activaciones, permitiendo que el usuario identificara el tipo de servicio sin esfuerzo.
Se unificaron los botones CTA en posiciones consistentes para guiar al usuario entre secciones, reduciendo el número de clics necesarios para contactar o explorar más información.
La sección Nosotros se reestructuró con contenido más confiable y visual, incluyendo video institucional y logotipos de clientes para fortalecer la credibilidad.
En Servicios se integraron cards informativas e íconos visuales que sintetizan lo que ORM ofrece, facilitando la comprensión inmediata del alcance.
En Instalaciones, se destacaron fotos y descripciones cortas de cada espacio junto con un mapa interactivo y un botón (Ver croquis detallado), eliminando la confusión sobre ubicación o accesos.
El Contacto se simplificó a tres medios visibles y un formulario breve, optimizando la conversión.
🎯 Principales decisiones y aprendizajes por sección
1
Navbar reorganizado y centrado
Reorganicé el menú superior en secciones claras con jerarquía visual, reflejando las tres áreas estratégicas.
Fricción: El análisis heurístico detectó Desorientación y rutas inconsistentes. Los usuarios no comprendían la estructura general del sitio.
Impacto: Mejor orientación desde el primer clic, reforzando la percepción de orden y profesionalismo.
2
Hero en 100vh con video real
Implementé un hero fullscreen con video que muestra eventos y pruebas reales de ORM.
Fricción: Falta de credibilidad visual y percepción de escala. La protopersona de Carla Torres necesitaba validar profesionalismo.
Impacto: Generó confianza inmediata y profesionalismo, validado en pruebas con stakeholders.
3
CTA primario visible
Incorporé un botón con microcopy claro bajo el hero para guiar al usuario.
Fricción: El análisis heurístico evidenció ausencia de direcciones claras, los usuarios no sabían cuál era el siguiente paso lógico dentro del flujo.
Impacto: Guió la acción sin distracciones, reduciendo puntos muertos en el flujo.
4
Tres areas de negocio visibles
Destaqué desde la primera pantalla las tres divisiones (Automotriz, Corporativos y Activaciones).
Fricción: Las entrevistas revelaron que confundían el giro de ORM y desconocían su versatilidad.
Impacto: Clarificó el alcance de la empresa y posicionó su especialización B2B.
5
CTA orientado a exploración de soluciones
Añadí un segundo llamado a la acción contextual
Fricción: Abandono al final del scroll por falta de continuidad en la navegación.
Impacto: Incrementó la retención y la exploración dentro del sitio.
6
Presentación institucional breve
Reduje el contenido de identidad en tres líneas que comunican misión, enfoque y experiencia.
Fricción: Carla Torres expresó que no tenía tiempo para leer textos largos, el benchmark mostró que agencias de referencia usan mensajes claros y breves en su presentación.
Impacto: Comunicación inmediata del valor de marca.
7
Video institucional
Integré un video pop-up que muestra instalaciones, equipo y proyectos reales.
Fricción: Los stakeholders mencionaron que los clientes “no dimensionan la magnitud del trabajo”, el análisis heurístico confirmó falta de contenido visual que respalde credibilidad.
Impacto: Reforzó la credibilidad y humanizó la marca.
8
Bloques de valores visuales
Creé tres módulos con íconos y textos breves que representan sostenibilidad, seguridad y movilidad.
Fricción: En el mapa de empatía, Carla buscaba “empresas con propósito y responsabilidad social”; antes, los valores estaban ocultos en texto plano.
Impacto: Reflejó propósito, coherencia y valores alineados a empresas B2B con responsabilidad social.
9
Mosaico de marcas aliadas
Incorporé logos de clientes reconocidos para reforzar autoridad visual.
Fricción: El benchmark y las entrevistas evidenciaron falta de prueba social inmediata, los usuarios no podían validar experiencia sin ejemplos visibles.
Impacto: Fortaleció la confianza al mostrar alianzas comprobadas.
10
Clasificación en tres categorías
Organicé los servicios en tres principales áreas (Automotriz, Corporativo y Activaciones).
Fricción: Los stakeholders pedían una estructura que comunicara divisiones clave del negocio.
Impacto: Simplificó la lectura y mejoró la navegación por relevancia.
11
Cards descriptivos
Redacté microtextos claros y directos para cada categoría.
Fricción: Las protopersonas consideraron que el contenido anterior era “técnico y confuso”.
Impacto: Mayor comprensión inicial y retención de contenido.
12
Imágenes reales de proyectos
Reemplacé imágenes genéricas por fotografías de proyectos recientes.
Fricción: El análisis heurístico y los stakeholders coincidieron en que la web anterior “no mostraba resultados reales”.
Impacto: Elevó la percepción de profesionalismo y autenticidad.
13
Subniveles visuales con íconos
Representé subservicios con íconos consistentes.
Fricción: El análisis heurístico reveló sobrecarga visual y dificultad para escanear listas, Carla necesitaba entender rápido qué incluye cada servicio.
Impacto: Mejoró el escaneo y redujo la carga cognitiva.
14
CTAs contextuales
Personalicé los botones según la intención (“Ver instalaciones” o “Contáctanos”).
Fricción: Llamados genéricos sin dirección clara.
Impacto: Guió la navegación con propósito y claridad.
15
Incorporé una introducción cuantificable con datos de m², áreas y usos principales.
Fricción: En entrevistas, varios mencionaron que los clientes no dimensionan la magnitud del lugar hasta que lo visitan.
Impacto: Mejoró la comprensión inmediata del espacio y reforzó la percepción de infraestructura profesional.
16
Navegación visual con íconos de espacios
Diseñé una barra de navegación visual con íconos representativos de cada espacio.
Fricción: En el benchmark se observó que ORM carecía de anclas visuales que permitieran entender la variedad de espacios.
Impacto: Simplificó la exploración y ayudó a ubicar rápidamente cada sección sin leer texto extenso.
17
Cars descriptivos por espacio
Dividí cada instalación en módulos con imagen, breve descripción y ventajas claras.
Fricción: Los stakeholders pedían mostrar la versatilidad de cada área como un activo comercial clave.
Impacto: Aumentó la comprensión del valor comercial de cada espacio y la retención visual.
18
Mapa interactivo y CTA
Integré un mapa de Google Maps con rutas y un botón secundario para ver croquis detallado.
Fricción: Ambigüedad sobre ubicación y acceso; los usuarios pedían referencias precisas.
Impacto: Redujo la incertidumbre sobre la localización y fortaleció la confianza en la logística del sitio.
19
Información de contacto visible
Se mostraron tres bloques con íconos y texto para dirección, teléfono y correo, estandarizando el formato visual y jerarquía informativa.
Fricción: En el análisis heurístico se detectó baja visibilidad de datos de contacto, lo que generaba incertidumbre sobre cómo iniciar una conversación con la agencia.
Impacto: Redujo la incertidumbre y generó confianza inmediata.
20
Formulario simple
Rediseñé el formulario con tres campos y confirmación visual.
Fricción: Carla destacó que valora formularios rápidos y respuestas inmediatas para no perder tiempo comparando proveedores.
Impacto: Incrementó en la percepción de atención profesional.
Validar cada decisión con evidencia permitió eliminar fricciones reales y construir una experiencia que refleja profesionalismo, claridad y confianza, pilares centrales de la identidad digital de Off Road México.
[Producto final]
⚙️ La implementación final en WordPress mantuvo la fidelidad del diseño y permitió medir el impacto real del rediseño
Para llevar el diseño a producción, adapté una plantilla de WordPress que equilibrara funcionalidad, estructura y fidelidad visual. La mayoría de los elementos pudieron replicarse tal como se planificaron en los wireframes y el prototipo final, asegurando una transición fluida entre el diseño y la ejecución.
El único ajuste realizado fue en la posición del navbar dentro del hero, en la plantilla original, el menú aparecía en la parte inferior al cargar la página, pero se configuró para que al hacer scroll se anclara automáticamente en la parte superior, manteniendo la coherencia con el diseño propuesto y mejorando la navegación.
Todo el sitio se instaló y configuró correctamente, incluyendo los módulos de servicios, galería y formulario de contacto, asegurando un rendimiento estable sin depender de desarrolladores externos.
Finalmente, se integraron Google Analytics y Microsoft Clarity para monitorear el comportamiento de los usuarios y validar el impacto de las decisiones tomadas.
Esto permitió medir la efectividad de los CTAs, el tiempo en página y los puntos de interacción, asegurando que el rediseño cumpliera objetivos reales de negocio.
[Resultados]
📈 Los resultados validaron la propuesta y revelaron oportunidades para optimizar la comprensión
Durante los primeros tres meses tras el lanzamiento, se implementó un plan de evaluación con Google Analytics y Microsoft Clarity para medir el impacto real del rediseño.
El objetivo fue verificar si la nueva arquitectura y jerarquía visual ayudaban a los usuarios a entender mejor la propuesta de valor y encontrar la información clave con menos fricción.
Los datos revelaron que los usuarios permanecen en promedio 52 segundos en la página principal, con un scroll depth del 45% y mayor interacción en las secciones de Instalaciones y Servicios.
Estos resultados confirmaron que la nueva estructura dirige correctamente la atención hacia los servicios principales, pero también mostraron que había información de valor se concentraba demasiado al final del scroll.
A partir de esto, se definieron acciones de mejora, como reorganizar los mensajes clave en los primeros 60% de scroll y reforzar los CTAs intermedios y finales para incrementar comprensión y disposición al contacto.
En conjunto, estos hallazgos demostraron que el rediseño cumplió su meta de clarificar la propuesta de valor y, además, estableció una base analítica sólida para continuar mejorando la conversión y la experiencia de usuario.
[Heat maps]
[Tiempo promedio en las principales paginas]
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
Tiempo promedio para una pagina de servicios. |
💻
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.
[Optimización]
🔁 Las optimizaciones incrementaron el engagement y validaron la efectividad del rediseño
Tras analizar los primeros resultados, se reubicaron los mensajes clave y se optimizaron los CTAs de contacto para reducir fricción en la navegación y mejorar la comprensión de la propuesta de valor.
Un mes después de aplicar los cambios, las métricas mostraron una mejora significativa en el comportamiento del usuario: El tiempo activo promedio creció de 52 segundos a 1.4 minutos, reflejando un mayor interés en el contenido. La profundidad de desplazamiento (scroll depth) aumentó de 45% a 64.5%, indicando que más usuarios exploraban la totalidad del sitio.
Estos resultados confirmaron la efectividad de la jerarquía de contenidos y la claridad de los CTAs, validando que el rediseño no solo mejoró la estética y estructura, sino también el entendimiento, la retención y el engagement general con la marca.
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.
[Conclusión]
💡 De la iniciativa personal a una ejecución estratégica
Este proyecto representó mi primer acercamiento al diseño de un producto digital, impulsado por iniciativa propia al detectar una oportunidad real de mejora dentro de la empresa.
Off Road México confió en el proceso, permitiéndome diseñar y ejecutar una solución integral que equilibrara estrategia, diseño y resultados medibles.
Más allá del rediseño, esta experiencia reforzó mi capacidad autodidacta y mi pensamiento crítico para resolver problemas de manera estructurada, guiado por datos y centrado en el usuario.
Aun con limitaciones técnicas y recursos ajustados, logré concretar un producto funcional, medible y alineado con los objetivos de negocio, validando el impacto de las decisiones de diseño con herramientas analíticas reales.
Este caso marcó el punto de partida para seguir profundizando en UX/UI desde la acción y la mejora continua, consolidando mi enfoque como diseñador que se construye a través de la práctica, la estrategia y la iniciativa.
[Casos de estudio]
