Increasing the CTR of ad banners through design
As part of my internship at Fandom, I tested the effectiveness and impact of ad design elements on the click-through rate (CTR) of banners on the Fandom wiki pages. I performed a series of tests that resulted in some interesting findings.
Introduction
Optimizing the advertising strategy has recently become even more challenging than it used to be. The main reason for this is the overall declining CTR, which is the ratio between clicks and impressions, one of the key metrics in digital advertising. One cause for this observed trend might be the growing importance of the web as a sales channel and the resulting need to advertise online. The amount of unique online advertisements has grown tremendously over the years, severely impacting the user experience on websites¹. Ads became more and more intrusive due to the competition, resulting in a growing amount of people using ad-blocking tools². This trend caused the development of the banner blindness phenomenon which describes the fact that users intentionally or unintentionally ignore banner-like information.
During my internship, I focused on improving the CTR through design elements like colors and illustrations. I was responsible for the whole process from research, design, front-end implementation, and data analysis. I read multiple scientific papers and articles to better understand the impact of ad elements on the CTR.
The type of product I was working on was part of the bigger project which serves as a communication tool with Fandom users. I worked exclusively on the feedback ad where users could answer the question Did you find the information you were looking for? by clicking Yes, No or Still searching. We wanted to use this project as an opportunity to receive valuable feedback as well as to see if can we can increase the engagement of our users and the CTR of ads by tweaking the design elements.
Round 1: A/B testing
Group A: The initial design prepared for the feedback ad was using a high contrasting color as a background comparing to dark low-saturated buttons.
Group B: The second design combines elements from the Fandom website (colors, style, illustration) which could increase the legitimacy of the ad as well as used an illustration referring to some cultural elements.
Also, I wanted to use dark, less saturated color as a background in order to put more focus on the question and buttons.
Results
The results showed that the design B performed similarly to the way the previous design (design A) did in terms of CTR.
On the mobile, design B didn’t perform better than the design A. There was no significant difference between both designs in terms of CTR.
Similarly to the results on the mobile, the design B performed almost alike the design A on desktop. There was no significant difference in performance as per the CTR metric between those two designs.
Summary
The design B (new design) didn’t help to increase the CTR even though it was different than the initial design. The idea of applying the style of the menu and other elements from Fandom’s website didn’t result in improving the CTR metric.
Round 2: A/B/C/D testing
Since using the new design did not result in achieving a higher CTR compared to the initial design, we decided to perform another test.
This time, we chose A/B/C/D testing in order to explore more possibilities for improving the CTR.
Group A: The new design served as a control group in this testing
Group B: One of the ideas was to remove the image from the new design in order to see if it would influence the viewability of the ads, and make them load faster, which can impact the CTR directly.
Group C: Many articles investigating the CTR of ads depending on the color of the buttons showed that warm colors (especially red and orange) help to increase this metric, whereas cold colors (blue or green) can decrease it³. The next design is the result of the implementation of this knowledge into the ad.
Group D: One of the research papers focused on the impact of animation on CTR in Norway, and according to the results from this study, the animated ad banners had lower CTR than static ad banners⁴. A similar experiment was conducted on our traffic in order to see whether or not static ads perform better than animated ads.
Results
Overall, the design C (coral buttons, white background) had the highest CTR among all designs. The differences were significant between each designs, except for the design A (control group) and D (animation) where no significant difference in the CTR was shown.
The design C performed the best among all designs in terms of the CTR on mobile, however, the design B had significantly higher CTR than the control group (design A) as well. Only the design D (animation) didn’t perform better than the benchmark.
Nevertheless, the results on the desktop were different than on mobile. Design B, C, and D performed statistically better than the control group (design A), however, the differences were small.
Summary
The change in the design (group C) resulted in almost tripling the CTR over two weeks period. Additionally, the design that didn’t have an image showed an increase in the CTR. Similarly to the results in Norway, the animated ad didn’t result in higher CTR on our traffic.
Round 3: A/B/C/D/E testing
Since the design C (with coral buttons and the white bg) performed significantly better than the others, I wanted to investigate further whether the change of the background or buttons color helped to increase the CTR of that ad.
Group A: My first design was used as a reference for this testings
Group B: My second design was used here as a control group
Group C: We wanted to investigate further whether the change in the colors of the buttons impacted the CTR. The next design was exactly the same as the one in group B but with the blue color for the buttons. Thanks to this tweak, we wanted to see whether the change of the color of the buttons (into blue which is not recommended by articles) can decline the CTR.
Group D: The other element of the ad in group B that might have contributed to increasing the CTR was the color of the background. Therefore, another similar design was made with a dark background instead of the white one, in order to confirm the hypothesis that ads with a white background have higher CTR.
Group E: As mentioned earlier, since most of the wikis use the white color as the background for the text, we decided to create a design with a frame around the ad to verify whether or not adding this element might bring some different results in terms of CTR.
Results
The designs C (white background, blue buttons) and B (white background, coral buttons) had the highest CTR among all designs.
On mobile, design B (white background, coral buttons), C (white background, blue buttons) and design E (white background, coral buttons, frame) performed significantly better than the control group (design A). Nevertheless, design B and C had way higher results than design E.
Additionally, there was no significant difference between design B and design C, however design E performed significantly worse than those two designs.
Our analysis showed no significant difference between each design on the desktop.
Summary
Overall designs with the white background performed the best among all designs, however, adding the frame to the ad resulted in a decrease of the CTR, which can be taken as a proof for banner blindness within the Fandom users. Additionally, changing the color of the button (into light blue) didn’t show any significant increase or decrease in the CTR.
Conclusions
Thanks to all the design tests that we conducted, we have gathered knowledge on how to increase ad performance metrics, including CTR.
As for wiki pages on the Fandom website on mobile, we know that ads with white backgrounds (similar to the background of the content) have higher CTR, which can suggest that the phenomenon known as banner blindness is common within the Fandom audience. Additionally, as of now, the change of the button colors didn’t result in a significant difference in the CTR — both coral and light blue buttons performed in a similar way.
After conducting multiple tests, we also know that incorporating animation within the design doesn’t help increasing metrics of the ad as well as that users click less on the ads that have dark backgrounds.
All of the results were gathered on Fandom wiki pages so this might differ on other sites.
Tools and techniques
Many tools were used to conduct the tests and to improve data processing and analysing the results. Some of those tools are:
- Adobe Photoshop
- Google Ad Manager
- Google Analytics
- Amazon Web Services (Athena)
- Jupyter
- Python and third-party libraries (Pandas, NumPy, Matplotlib, Sroka)
I would like to thank the whole Ad Engineering Team and everyone else who contributed to this project and made my internship a great experience. But especially a big thanks to Martyna Urbanek-Trzeciak, who was my mentor during the internship, for countless support and amount of time she put into guiding me through this project.
References:
- “The Impact of Content and Design Elements on Banner Advertising Click-through Rates”: Ritu Lohtia, Edmund Hershberger, Naveen Donthu: Journal of Advertising Research 43(04), 2004
- Ad blocking user penetration rate in the United States from 2014 to 2021, statistica.com
- “How To Improve CTR Instantly By Tweaking This Colour” Matthew Woodward, 2019
- “Impact of Animation and Language on Banner Click-Through Rates” Steffen Zorn, Doina Olaru, Thomas Veheimm, Sam Zhao, Jamie Murphy: Journal of Electronic Commerce Research, Vol 13, No 2, 2012
Originally published at https://dev.fandom.com
