Below is an analysis of how product design increased conversion rate for advertisers, monetization for publishers and the overall experience for users.
My goal for this design project was to further improve the user’s experience by optimizing the ad unit's layout specifically on portrait-oriented devices.
During A/B testing, the redesigned ad unit achieved up to:
- 17% click through rate (CTR) increase
- 10% - 40% effective cost per thousand (eCPM) increase
All these improvements are compared to the existing ad format (shown below).
In short this means advertisers saw their ads drive more users to the app stores and publishers earned more money for each install they provided.
On landscape-oriented devices we were already leveraging the full potential of the 16:9 screen, but the layout we were using on portrait mode was suboptimal.
Widescreen video ads (16:9 ratio) were restricted to a narrower area by the 9:16 canvas. The top ~30% of the screen was left empty and the bottom ~30% was too cluttered with essential app information, causing it to lose its importance.
The proposed solution optimizes the screen real estate by adopting the untapped area at the top as the video player. This layout also improves the product ergonomics, as the primary element (video) is now placed at an optimal eye height for users.
By moving the video at the top, the bottom +60% of screen real estate was freed, which would now allow for all relevant app information to have proper padding and hierarchy, aiding the user in making an informed action such as a download.
As app icons create a lasting impression in the minds of players, I took advantage of the newly gained screen space and increased the size of the app icon by 2X, with placement right in the center of the screen, to give it the prominence it deserves.
The app icon is now clickable (directing users to the app store), as this behavior has become a natural and expected one from an app icon — in today’s mobile world.
Call to Action
The call to action was in a suboptimal position, residing at the far bottom right of the screen, thus favoring right-handed users (67%).
Research shows right-handers keep their thumb anchored in the lower right-hand corner — in this case close to the sub-optimally placed call to action (CTA). Thus the CTA’s placement was optimal only for the right-handed-user group.
To make it easier to tap the call to action (CTA) for players holding their device in one hand, regardless of their handedness and due to mobile device screens ever-growing size, I widened and centered the CTA, so that now it falls within the natural arc formed by the thumb’s range of motion.
These design enhancements achieved all the intended goals: First and foremost, click-through rate (CTR) increased by 17% on mobile phones when compared to the previous design.
The fact that the call to action is visible at all times during video playback — certainly affected the CTR increase, because the previous design would only briefly reveal the app icon, information, and CTA when tapping the screen.
Secondly, we saw a jump in eCPMs (effective cost per thousand impressions).
On the publisher’s side, we saw rewarded video eCPM increase by 10% to 40%. Specifically, among particular publisher genre apps, rewarded video eCPM increased by up to 35% in city-building games, 42% in match-3 titles, and 40% in first-person shooters.
In short: publishers earned more money and advertisers received more app store visits (and installs).
Following are some designs that didn't make the cut.
Below is a combination of the optimized layout (video player at top) with the addition of richer content: a carousel of app screens from the app store and the app's description.
This would provide the user with a more insightful and rich experience.
Following are design proposals for the video end card (i.e. what is shown after the video has finished playing).
This is an important moment in the product flow as it provides ample screen real estate and the user's full attention.
Thank you for reading