Redesigning an ad product for growth.
The Company launched its static interstitial (banner) ad unit back in 2011. While still being the most cost effective way to acquire users, the years have started to weigh on its design.
For this reason I redesigned the ad unit to increase it’s performance, below are my learnings.
During A/B testing, the redesigned ad unit achieved up to:
- 40% increase in click through rate (CTR)
- 35% increase in installs per thousand (IR)
- 34% effective cost per thousand increase (eCPM)
All these improvements are compared to the legacy static ad format.
In short this means advertisers saw their ads drive more installs and publishers earned more money for each install they provided.
Taking a step back though, over the past few years, we'd provided mobile game publishers with an effective way to increase the native feeling of the ads shown in their game by using frames.
Frames could be custom designed by the publisher to match the look and feel of the game they were shown in, or simply they could pick one of the several themed ones we designed at Chartboost. The ad creative would then be showcased within the frame.
I decided that frames were outdated and the optimal user experience would show the creative accompanied by an insightful and actionable UI.
Also this would allow me to increase the size of the creative so the advertiser's artwork would gain the screen real estate it deserves.
Designing for Growth
When redesigning the ad unit, I had the strong assumption that displaying app metadata (icon, name & rating) together with the advertiser’s creative would increase the ad's performance, especially click through rate (CTR).
Following are several prototypes I created; each one has a unique interaction and is designed to provide a richer experience compared to the legacy static ad unit.
In the following prototypes the creative is shown in full screen, as the legacy static ad unit did not take full advantage of today’s larger mobile screen real estate, causing a good amount of precious pixels to be unused.
I also designed a new interaction for the ad’s appearance on screen, it would appear sliding down from the top, with a subtle bounce when reaching the bottom of the screen. This bounce would suggest to the user that they could interact with the ad and reveal more by scrolling upwards.
This is the simplest design.
The creative is fullscreen and it appears with a slide in animation.
The user can swipe up to click through (aside from the traditional click).
Unlike the previous prototype, this design reveals the app's metadata (icon, name and rating) with rating appearing with a fun counter animation.
Upon scrolling upwards, the ad unit reveals an insightful and actionable screen that shows the app description and a prominent call to action aside from the app metadata.
This is simply a style variation of the previous prototype, adopting a white background instead of the dark overlay after swiping up.
This prototype reserves a small portion of the screen for the app metadata (icon, name, rating) on the first screen.
Upon scrolling upwards, a bold call to action is shown.
A design subtlety: when scrolling up, the creative switches to 16:9 in the header section.
The Final Design
Due to potential technicals issues (with the app info scraping) the interaction and second screen were removed from the design. Prototype 4 was used as reference.
The app metadata is present at all time, as is the prominent call to action (read more about the visual design here).
Finally we retired the legacy ad unit and launched the redesigned one.
During A/B testing, the redesigned ad unit achieved a 40% increase in click through rate, 35% increase in installs per thousand and lastly a 34% effective cost per thousand increase (these improvements are compared to the legacy static ad format).
This means advertisers saw their ads drive more installs and publishers earned more money for each install they provided.
Thanks for Reading