Hero banner re-design
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.
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.
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?
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
Design with no background image
Unique Visitors - 13,398
Confidence - 99%
Test Duration - 6 days
Control CTR - 26.4%
Variation CTR - 28.6%
Lift - 8.44 %
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)
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.
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
Quick links copy
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.
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.*
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.
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.
I created variations of this design for various page usage scenarios
A few iterations of designs, varying in following ways:
Icon vs Pictogram usage
Glass-morphism vs Flat design
Curve vs Sharp corners.
Another exploratory design, a complete deviation from the safe and familiar design that adheres to brand guidelines.
The designs produced through this process needs to comply to
Accessibility guidelines ( minimum WCAG 2.0)
Heuristic reviews (peer review)
The design, once approved (compliant) will be Usability tested.
If the designs win it needs to prove the quantitative A/B testing run live.
Once, it achieves that it will be component coded and pushed to production (homepage).