When we initially launched the redesigned homepage, the hero banner area at the top of the page displayed only the first hero message by default. The banners didn’t rotate to the other messages and required users to manually mouseover the banner thumbnails to view the other three heros. As a result, we found that there was a missed opportunity to maximize the visibility of the other hero messages for users.
To address this issue, what we’ve done is transform the hero banners into an auto-rotating carousel which cycles through each of the four hero messages. With a subtle fade transition from one message to another, the hero now has the right amount of animation to draw users’ attention to these key messages without introducing visual noise. And, visitors now have a greater probability of viewing a banner message which was previously buried and likely increase the rate of user interaction.
We’ve also randomized the hero banner which users see initially on page load. This way the banner at the top of the list is not always the first banner users see. Mixing it up provides a higher degree of visibility to messages not otherwise positioned in the first spot of the carousel.
The hero banner of our homepage contains key information we are trying to convey to our users which is why it accounts for a large portion of the page real estate. With the latest refinements to it, users now have an improved chance of discovering and viewing this content with greater ease.