Hero banner redesign | shrikantramanathan

Hero banner re-design

Business objective:

Address the failure to achieve expected rate of rise in Click Through Rate (CTR) for the prospect customers lead generation on Aetna Medicare homepage - aetnamedicare.com.

Problem Statement

The rate of increase in unique visitors on the homepage is as expected. However, the rate of expected lead generation has not met.

The inference is that there is decrease in engagement - particularly on the Call To Action (CTA)s present above the 1st fold.

Thus, there is a requirement to understand this user behavior and take action to redesign the interface to eliminate the friction.

Sample image of old Homepage.

Strategy

Initial brainstorm with Product Owners (PO) and Associate Creative Director (ACD) helped me to structure the direction of research. We understood the most important questions that we need answers for.

Once we obtain the necessary data, I could base my design decisions on that and then re-design - either the page, the methodology of using certain components in the page and or the component itself.

More than 50% of our audience visit website using a laptop or a desktop. Mobile and Tablet users are less significant. Therefore, we focus our redesigning for Desktop Users.

Questions needing answers

We need to understand the underlying reason for this stated user behavior. Therefore, we needed to eliminate aspects of experience that we suspect is the cause of this behavior.

Thus we defined our questions as:

Is having an image in the Hero Banner an issue?
Are positioning of the important elements like CTAs the pain point?
Is the copy used is causing the confusion?
Should we use a different kind of Hero Banner or some other component?
How does the visual/graphic language influence the interaction?

Gathering Data

Testing the effect of copy used

Testing influence of positioning of important elements

What is above the fold and what is its importance?

Usability test Image vs No image

Heat map test to understand the role of graphic visuals in the interaction

Usability testing for image vs no image in the Hero

Design with a background image

(Control)

Design with no background image

(Variation)

Test parameters

Unique Visitors - 13,398
Confidence - 99%
Test Duration - 6 days
Control CTR - 26.4%
Variation CTR - 28.6%
Lift - 8.44 %

Test results

The solid color (no image) background increased the total CTR from 26.4% to 28.6%.

However, I needed to verify the pattern of behavior on a slightly different component. I also need to understand further in detail about the interactions.

Therefore, it was decided to run a test where a heat map would be generated and to substantiate the behavior a different hero component would be used on the no background image version of the page.

Test 2 parameters

UserZoom survey click test

Ran 2 tests:

1 focused on violet banner (127 participants)
1 focused on white banner (126 participants)

Test results

Slightly more participants clicked on the CTA on the hero banner with image (85%) than the one without (81%). This is a significant result as we now know that effect of image is not significant.

The second test proved that the image does not influence the interaction to drive the CTR. Since the 1st test proved the design with no image worked better. However the second test proved that the design with an image got more CTR.

This lead me to test for element positioning and its influence on the interaction.

Test 3 parameters

We needed to make sure that the background it self did not influence the interaction if the image had less significance.

Therefore, we tested the Hero Banner with different colors, but with same image.

Test results

The winner was the design with white background. This help us certain that the background visuals and images do not significantly influence the CTR for lead generation.

However, we also understood that we already employ the background visuals that work in favor of our audience, making it easier to find the CTAs.

Testing the copy

While the tests on the effect of image was on going we live tested many examples of copy for following elements:

H1 - Headline
Body copy
CTA copy
Quick links copy

Test results

We had outsourced the testing to an analytical organization, which used Artificial Intelligence to create a combination of copy options. We found the following results:

"View plans" works better on CTA than "Shop plans"
- Shop plans actually overwhelmed the users, since they think clicking that CTA will ask them to purchase the plan which they have not yet reviewed.
"Next-action-words" works the best for H1.
- It encourages empathic thinking when you add support word in addition to that.
Many people skip over the body copy, which diminishes it importance.
There was no significant change in interaction when the Quick links copy was changed.

Usability testing for hero banner elements placements

We A/B tested two versions of Hero Banner component. Both of them offer different placements for important callouts.

Design A

Design B

Test results

The result of this A/B test is:

The Design A out performs Design B on all element placements, except View/Shop plan CTA.
The Design B CTA position was got much more CTR.

Referencing an extensive study about page scrolling behavior

"The closer a piece of information is to the top of the page, the higher the chance that it will be read."

People scroll vertically more than they used to, but new eye-tracking data shows that they will still look more above the page fold than below it.*

In 2010, 80% of the viewing time was spent above the fold.

Today, that number is only 57% — likely a consequence of the pervasiveness of long pages.*

Conclusion drawn:

* source - https://www.nngroup.com/articles/scrolling-and-attention/

Redesigning the banner

From the data we collected and references from studies. I started to redesign the Hero Banner. This was the most logical pathway because the most important CTAs that generates leads is placed on a Hero Banner.

Wireframing and Designing

To draw inspiration and trends for the way Hero Banners are designed, I referenced Medicare competitor websites as well as other most popular and most visited websites.

I also referenced the J.D. Power 2020 U.S. Medicare Advantage Study. It presents the overall customer satisfaction index ranking. This list takes into account the digital aspects of the experience while ranking the organizations.

Inspirations for retail website heroes.png

Design using Golden Ratio

I implemented the use of golden ratio concept for information flow to draw the eye towards the most important CTAs.

I have combined the results of all the usability tests conducted to create a design that should, based on our understanding increase the CTR for lead generation on Aetna Medicare Homepage.

Points from the tests implemented:

The placement of View/Shop plan CTA button is front and center.
The Button is placed in a similar manner with respect to adjacent elements - according to the design that worked the best.
The other callouts have been presented in a grey box. Separating and highlighting - which was proved to work in the tests performed.
The page real estate for the image was decreased since the image does not play a significant role in influencing the CTR as compared to the ease in CTA accessibility.