Amanda Designs Things

Homepage Ad

In redesigning the logged out ad homepage experience, I had to align the needs of Design, PM, Engineering and the Ad Sales team, each group with their own goals. The result was a more consistent user experience with less code maintenance that integrated more seamlessly with the Twitch brand.

Platforms: Web

Once upon a time, the ad experience on the Twitch.tv homepage was a problem.

Appropriately dubbed the “Homepage Takeover”, the ad would cover all white space in the logged out homepage experience. What was originally intended as a homepage layout that put video front and center, now rebranded the site every time an ad campaign ran.

However, what seemed obvious to Design and Product as something that needed to change, the Ad Sales team disagreed with.

The Homepage Takeover had been a key product for advertisers. It generated $7M in annual revenue and served as a “high impact” placement that helped sales secure large media deals. However, research had shown that the takeover had a negative impact on viewer experience due of the jarring off-brand skin used on our site and the banners pushing discovery content below the fold. I needed to find an alternate solution that continued to offer a “high impact” ad unit to our advertisers and maintain the revenue stream.

Meanwhile, the logged in homepage was free of ads and had become a drastically different experience from the logged out experience over time. Herein lied the solution.

If I designed an ad placement that would fit well within the logged in homepage layout, we could make the logged out and logged in homepages consistent. This had a number of benefits:

• Having a single page design for both would reduce the amount of code required for maintaining two distinct homepage designs, as well as design complexity.

• It would lower the learning curve between using Twitch.tv as a logged out vs. logged in user. The previous year, UXR had been done on the First Time User Experience, showing that having a completely different layout upon creating an account caused significant friction and confusion in that moment.

• Most importantly to the Sales team - the ad would be smaller, but could appear for both logged out and logged in users. Our logged in users were a huge audience that was notably more engaged with the site than logged out users, which would potentially increase engagement with the ad placements.

My goal with the design was to make the ad feel as though it belonged within the homepage experience as opposed to either taking it over, or carelessly being stickered on top of it. My solution for this was a carousel background placement.

By utilizing the concept of “safe areas” and having them fade to the center, we could guarantee a certain amount of information being conveyed, while still keeping the carousel area responsive.

If the viewport was below a certain threshold, the ad would not appear and not count as an ad view. Safe areas remained safe, and brands were only charged for properly experienced ad views.

Four years later, this is still the ad experience found on the homepage today, even after a visual rebrand of the site. It continues to be a successful, flexible solution without compromising the content of the page itself.