How to Increase Performance of Vertical Video Ads

Just like mobile game design, ad design is a living, breathing thing that grows over time. Earlier this year, we asked ourselves how improving our video ad design could increase conversion rate for advertisers, monetization for publishers, and overall experience for players.As we continuously improve the ad experience on the Chartboost network, we?ll share our findings in a new series of Design Insights.Shortly after the redesign of our default video ad template (read about it here), we returned to the drawing board to design our next iteration. This time our goal was to further improve the user?s experience by optimizing the video ad experience on portrait oriented devices.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.How so? Videos in the standard 16:9 ratio were shown in a 9:16 area - resulting in a suboptimal design as the top 30% of the screen was left empty and the bottom 30% was cluttered with essential app information - causing it to lose its importance.

The Design

We quickly realized we had large amounts of screen real estate that were untapped.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, we promptly ?cleared? the bottom +60% of screen real estate, which would now allow for all relevant app information - the app icon, rating and total downloads - to have proper padding and hierarchy, increasing not only the advertised app?s trustworthiness but also aiding the user in making an informed action such as a download.[caption id="attachment_21906" align="aligncenter" width="975"]

Early design explorations that combine video, app metadata and description.[/caption]App icons create a lasting impression in the minds of players, so it?s no wonder that developers spend so much time refining them.

With this in mind, we 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.Another subtle UX change: 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.Below the icon, we now display the app metadata (rating and total downloads) in a stacked column, thus guiding the user?s eye further down towards the prominent call to action in a pyramidal way. This is also visually accentuated by the subtle gradient that lightens to gray in proximity of the bottom of the screen.As researcher Steven Hoober, author of Designing Mobile Interfaces found in 2013, 49% of users hold their phone with one hand. Of these, 67% manipulate with their right thumb on the screen and only 33% with their left thumb.[caption id="attachment_21908" align="aligncenter" width="975"]

Image credit: www.core77.com[/caption]It is now apparent that the call to action was in a suboptimal position, residing at the far bottom right of the screen, thus favouring 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 CTA.But what about all other users (33%)?In essence, the call to action?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, we widened the CTA, so that now it falls within the natural arc formed by the thumb?s range of motion.We then ultimately improved the ergonomics by positioning it at the bottom of the screen, in closer and better range of the user?s thumb. This?presented a great opportunity to brand the ad unit with the company logo to?increase brand awareness in those that are already familiar with the company. It also acts as a watermark for the future use of any ad template imagery which is not attributed to the source (e.g. a missing caption or attribution).Our design was finally complete and ready to be tested on our network.[caption id="attachment_21910" align="aligncenter" width="975"]

Before and after - To the right is the optimized layout for portrait mode.[/caption]

Results

These design enhancements achieved all of our 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 as well.

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.Get these new designs and more with the latest Chartboost SDK (download here) for iOS, Android and Unity today.Every day, thousands of mobile game developers use Chartboost video ads to maximize revenue and acquire new players. We're excited to share how we created a new look and feel for video ads that currently run in the Chartboost network through our latest SDK.