[Case 01]
Time spent on the page increased by 61% after the redesign
Automotive / B2B / Corporate events
The redesign increased the time spent on the page by 61%
And increased the scroll depth to 64.5%
[Overview]
I led the redesign of the institutional website for Off Road Mexico, an agency specializing in automotive events for brands such as BMW, Audi, and Jeep. The goal was to modernize and optimize the digital experience, raising brand awareness, improving communication of its services, and building trust among potential customers, using the Lean UX methodology.
[Problem Statement]
The previous site had opportunities for improvement: unclear communication of services, limited navigation, and a vague value proposition. This made it difficult for dealers and agencies to quickly understand Off Road Mexico's offering. A clearer, more intuitive, conversion focused digital solution was needed to facilitate contact and project innovation from the very first second.
[Implemented Solution]
The site was redesigned with a clearer architecture, direct value messages, and visible CTAs. The browsing experience was optimized, improving understanding of services and facilitating conversion through forms measurable with GA4 and Microsoft Clarity.
[Industry]
Automotive
B2B
Corporate events
[My rol]
UX Research
Analytics
Arquitectura de la Información
UI Design
Prototyping
[Plataforms]
Responsive Web
WordPress
Figma
[Timeline]
January 2021 - April 2021
💡
When I joined the company, I noticed that its website did not clearly communicate its value proposition or services. I decided to take on the challenge of redesigning it and, using my background in industrial design, I adapted product creation methodologies to the digital environment. This allowed me to transform a problem into a viable solution, developing a functional MVP that strengthened trust in the brand.
[Hypothesis]
🎯
Design hypothesis
If we redesign the visual structure of the site and clarify the services, then users (agencies, brands, distributors) will better understand the value proposition and be more willing to initiate contact.
[User research]
Initial exploration of users and business
👥
Stakeholders
Meetings with owners and operational team to identify business needs.
🔍
Heuristic
Analysis of the original site based on Nielsen usability principles.
📊
Benchmark
Comparison with similar automotive agencies to identify best practices.
🤝
Customers
Initial contacts to understand expectations and pain points.
💡
To begin, I interviewed stakeholders to understand their needs and expectations, conducted a benchmark with three direct competitors, and performed a heuristic analysis of the site based on Nielsen. With these findings, I created an affinity diagram that allowed me to detect patterns and prioritize key areas for improvement.
[Heuristic analysis of the current site]
💡
Through analysis, I identified critical usability barriers: cluttered and outdated design, forms without feedback or validation, inconsistent buttons and false clickable elements, poorly legible content, messy logos, and an invasive side menu. These findings allowed me to identify possible solutions to improve the site's navigation, readability, and visual consistency.
[Diagrama de afinidad]
🔑
Research insights
Trust and brand
The website does not generate immediate credibility; users do not perceive professionalism or innovation upon first contact.
Outdated images and text convey mistrust and do not reflect the brand's prestige.
Functionality and usability
Confusing forms and poorly labeled fields create friction in the contact process.
Buttons and links lack clear visual hierarchy, making it difficult to complete basic actions.
Content and clarity
Sections such as "Services" and "Clients" lack detail, making it difficult to understand the value proposition.
Overly general terms do not communicate the real benefits of the company.
Visual hierarchy and navigation
The homepage lacks a clear hierarchy, creating confusion about the purpose of the site.
Navigation is limited, making it difficult to find key information in just a few clicks.
💡
Based on the research, I confirmed that users needed immediate clarity on services and a more organized content hierarchy to understand the purpose of the site. I also identified the importance of highlighting clients and facilities to convey trust and prestige, as well as optimizing touchpoints to facilitate communication. These findings led me to define two proto-personas that represented key user needs and guided subsequent design decisions.
Carla Torres
"The proactive coordinator"
Behavior
Coordinates product launches and events with external agencies and internal stakeholders
She have limited time to research suppliers.
Use web forms for immediate contact
It is based on clear and reliable recommendations for decision-making.
Demographic
Age: 34 years old
Place of residence: Mexico City
Gender: Female
Technological skill: High
Position: Marketing Manager
Needs
Work with agencies that inspire trust and professionalism.
Immediate access to contact forms and locations on Google Maps
Ensure logistics and quality for your team
Validate alignment with brand and expectations
Mário Ramirez
"The one who makes decisions in a demanding manner"
Behavior
Make decisions quickly when he have concrete evidence.
Look for real photos and success stories before finalizing the idea.
Contact us by email or phone to clarify urgent questions.
Prefers to view websites on mobile rather than desktop
Demographic
Age: 48 years old
Place of residence: Monterrey
Gender: Male
Technological skill: Medium
Position: Director of Operations
Needs
Obtain quality information on services offered by providers
View recent photos that support the supplier's quality
Verify that an event similar to the desired one can be executed.
Access a navigable, mobile-optimized website
💡
By delving deeper into the proto-persons, I gained a clearer understanding of what users expect from a company like ORM and how the website experience can directly influence their decisions. To analyze how they interacted with the current website, I decided to focus on Carla, the proto-person who best represents the customer profile that typically contacts the company. Based on her profile, I developed a proto-journey to map her current experience and identify critical points.
[Empathy map]
🔑
Insights from the empathy map
Need for immediate trust
Users require clarity from the very first contact (clear texts, up-to-date images, success stories).
Ease of contact
They look for visible forms, quick communication options, and clear location on Google Maps.
Visual evidence
Recent photos and validated information are key to making quick decisions.
Uso responsive
Much of the browsing takes place on desktop computers, but users depend on their cell phones, so the site had to be responsive and agile.
💡
These insights guided the redesign priorities: improving the clarity of the value proposition, updating images and success stories, optimizing touchpoints, and ensuring a responsive experience. To gain a deeper understanding of how these needs impacted the user experience, I developed a proto-journey that highlighted moments of frustration and opportunities for improvement within the current journey.
[Proto-journey]
[Value proposition canvas]
💡
This analysis allowed me to see clearly that the problem was not only visual, but strategic: the website was not communicating trust or facilitating contact. From there, I was able to redefine the information architecture, propose clearer navigation, and highlight visual evidence that conveyed credibility.
[Prioritization using the MoSCoW method]
💡
When I took the initiative to redesign the site, I knew that the MVP had to be developed with minimal resources. We had an active domain and hosting, but no advanced programming knowledge. This led me to research viable solutions, and I opted for WordPress, which allowed me to build the site without complex code and leverage existing resources. I learned WordPress from scratch on my own and, applying the MoSCoW method, prioritized features by balancing the essential with the desirable. This strategy aligned research findings with a functional MVP focused on solving real user problems.
[Structuring the site information arquitecture]
💡
To communicate this versatility, I reorganized the offering into three main areas: automotive, corporate, and activations. This new classification allowed users to better understand the scope of the company. I then designed a site map and user flow that reflected this structure, ensuring a logical and clear journey for visitors.
[Definition of User Flow]
💡
The user flow helped me visualize the main paths users would follow from start to finish, identifying points of friction and opportunities for simplification.
Thanks to this preliminary definition, I ensured that every design decision was backed by a clear content hierarchy and a smooth user journey, aligned with user expectations.
[Low-fidelity wireframes]
🔑
Design insights
A hero with an introductory video builds trust and conveys professionalism from the very first contact.
Visible and consistent CTAs are essential for guiding the user toward the main action (contact).
The services and facilities sections should be prioritized from the outset to reinforce their relevance in navigation.
Dividing services into clear categories makes them easier to understand and improves perception of the company's scope.
💡
As a first step in interface design, I created low-fidelity wireframes to quickly explore different layout and content organization options. I used the Crazy 8s technique, which allowed me to generate multiple ideas in a short amount of time and select the most viable ones.
These wireframes helped me validate the structure of the site map in a simple and coherent visual journey, ensuring that the information hierarchy responded to user needs before moving on to higher-fidelity versions.
[Medium-fidelity wireframes]
💡
With these medium-fidelity wireframes, I refined the initial structure defined on paper, organizing content hierarchies, CTAs, and key sections. Instead of moving on to a high-fidelity version, I focused my efforts on structuring the content and calls to action, which allowed me to visualize how the information would be distributed and how the main messages would be communicated from the design. This approach helped me validate overall usability, identify potential adjustments, and ensure that the hierarchy and navigation flow would function as an effective tool for anticipating actual site usage and optimizing it before final implementation.
[Final product]
💡
This project allowed me to confirm the importance of iterating and validating each design decision before implementation. Moving from paper wireframes to a functional prototype helped me visualize how structure and content could transform brand perception and build trust from the first contact. I learned to balance business objectives with real user needs, and to adapt the solution according to technical constraints without losing the value of the experience.
Insights del producto final
User trust is built from the very first seconds with hero images, CTAs, and clear visual evidence.
Organizing content by category helped to better communicate the true scope of the company.
Some elements were adapted from the initial wireframes to better respond to actual needs, such as the location of the CTAs.
Iterating low- to medium-fidelity wireframes allowed us to optimize the information hierarchy before actual development.
In a second validation with Nielsen's tourist surveys, an improvement of 82% was achieved compared to the 57% generated by the previous design.
Early validation prevented rework and ensured that the design met real needs.
[Results]
Assessment goal
The redesign of the Off Road Mexico website aimed to optimize the browsing experience and increase lead generation through forms.
To evaluate the impact, KPIs were defined and measured using Google Analytics 4 (GA4) and Microsoft Clarity.
Measure understanding of the value proposition
SMART: During the first 3 months after launch, interaction data should be collected on the main pages to establish a baseline for average time, scroll depth, and clicks in key sections.
Results
In the first three months, we measured that the average time spent on the page was 52 seconds, the average scroll depth reached 45.45%, and users mainly clicked on the facilities and services section. This gave us a baseline understanding of the value proposition and where the user is headed.
🕒
Average time
Time: 52s
Users spend less than 1 minute, which is still insufficient to read the entire proposal.
💻
Scroll depth
45% reach the end
Half give up before the end.
🖱️
Interaction
Clicks concentrated on facilities and services.
Users are interested in the upper blocks.
These findings partially validated the initial hypothesis, showing that users understood part of the value proposition but did not delve into all the information.
[Heat maps]
[Average time on main pages]
Improvement actions
The content hierarchy will be optimized by highlighting key messages at the top, essential information will be relocated before 60% of the scroll, and intermediate and final CTAs will be reinforced, with the aim of improving understanding, retention, and willingness to contact.
[Optimization]
Impact of optimizations
After relocating key elements, optimizing the contact CTA, and eliminating friction in navigation, user behavior showed a significant improvement one month after the changes, as measured by Microsoft Clarity.
🕒
Average time
Active time on the page grew to 1.4 minutes, surpassing the initial record of less than one minute and reflecting greater interest in the value proposition.
💻
Scroll depth
The average scroll depth increased to 64.51%, indicating that more users are reading and exploring the entire content.
These results confirm that adjustments to the content hierarchy and optimization of CTAs improved users understanding and engagement with the website.