Solving the mystery of why users don't scroll beyond the hero and fixing it
Before
After
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.
- Rewriting the headline to make it clearer what services Spyrosoft offers and how users can benefit from them.
- Replacing the hero image with content that resonates better with potential clients.
- Redesigning the information architecture and layout to bring focus on case studies, which were identified as key to supporting the sales process, showcasing the company's expertise and building trust through social proof.
I was also responsible for wireframing the new, improved home page layout.
About Spyrosoft
Spyrosoft is a group of companies providing consulting and software development services within a wide range of specialities – from enterprise and embedded software engineering, AI/ML, cloud and cybersecurity, to HMI or ecommerce, low-code and CRM platforms.
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 website performance data as well as doing desk research on effective homepage design, I came up with three potential reasons for our 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 needs to be more engaging and informative to motivate users to scroll .
3. False floor effect
The page layout might not encourage users to scroll down, suggesting a need for improved design.
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.
How to eliminate the “false floor” effect?
The hero section of Spyrosoft homepage spans the entire screen height without providing any visual cue that there’s more content below the fold. I identified this as one of the potential reasons for not scrolling, based on research conducted by the NN Group in 2018, which shows that the illusion of completeness of the page can interfere with scrolling. Although less common than in the past, this problem is still present today.
To eliminate the “false floor” effect, the NN Group recommends including visual signifiers that indicate there’s more content below the fold.
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 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.
Here is the final design, which is currently in the development phase.
.jpg)