Solving the mystery of why users don't scroll beyond the hero and fixing it
Challenge & solution in a nutshell
More than 50% of Spyrosoft home page visitors weren't scrolling past the hero section. This meant that most visitors weren't reaching key information about Spyrosoft’s services, expertise and case studies of successful implementations – essential content for driving conversions.
I was responsible for gathering and analysing the data, identifying possible causes and proposing solutions. I suggested improvements, that included:
- Redesigning the hero section to eliminate the “false floor” effect, by indicating there's more content below the fold.
- Redesigning the information architecture and layout to bring focus on case studies.
- Replacing the hero section’s visuals and copy with content that clearly communicates the company’s services and benefits to potential clients.
I was also responsible for wireframing the new, improved home page layout.
The heatmap and recording analysis revealed the first fold is where most users drop off
- Less than 50% of visitors scroll below the fold.
- Only 30% of users scroll to the case studies section.
- Upon landing on the home page, users jump to browse the navigation menu immediately instead of exploring the content below the fold.
- Interestingly, the 'About' page is the second most visited subpage after users bounce off the home page.
Why do visitors not scroll down the page?
After analysing user behavior and website performance data as well as doing desk research on UX best practices for homepage design, I came up with three potential reasons for the problem:
1. Unclear message
The heading doesn’t communicate who the company is and what it does clearly enough, which is confusing for web visitors.
2. Weak content
The content in the hero section is not engaging enough to motivate users to explore the page.
3. False floor effect
The hero section spans the entire screen height without providing any visual cue that there’s more content below the fold.
5-second test proves the hero falls short to communicate the value proposition
I conducted a 5-second test with 5 users using Maze.co to evaluate if the copy and imagery used in the hero section effectively communicate what Spyrosoft offers.
The test revealed that website visitors are unclear about or misunderstand the purpose of the page based on the hero section alone.
Putting all pieces of the puzzle together
Together with other marketing team members involved in the project, we held a series of workshops to discuss my insights, brainstorm ideas, and gather benchmarks.
We decided to go ahead with my proposals. The changes included:
- Redesigning the homepage layout to remove the "false floor" effect and prioritize case studies — the content users are most interested in and which drives conversions.
- Replacing the hero image with a video showcasing our team, clients and projects.
- Rewriting the headline to help new website visitors quickly grasp what services Spyrosoft offers and how they can benefit from them, keeping the copy short and to the point.
Following the workshop, I created a wireframe for the new homepage.
Final design
The graphic designer prepared high-fidelity designs based on the wireframe and copy I provided.
The first iteration required a few adjustments because certain elements did not meet WCAG contrast standards, as shown below.
The improved design is currently in the development phase. The video is a placeholder
What's next?
We’ll monitor user behavior and website performance on the new homepage. The key metrics we’ll track include:
- Scroll depth
- Engagement with case studies
- Clickthrough rate on CTAs
- User paths after landing on the homepage
- Conversion rate
If we identify any friction, we’ll run A/B tests to determine the best approach for reducing it and improving the user experience.
My key takeaways from this project
1. Data-driven recommendations are key to leadership buy-in
Relying on data adds credibility and rationale to convince leadership of the value of proposed changes.
2. The hero section is not the place for vagueness
The content in the hero section should communicate the page's purpose clearly and concisely, ensuring users immediately understand its relevance to their needs.