Custom Landing Pages that Drive Conversions for Roku
Cannes Lions: 2023
I designed a targeted landing page for an event to drive traffic to the Roku domain. The page featured event details, our executive in attendance headshots, a Google map of the beach house location, and a third-party form to book a meeting. We secured 180 client and partner meetings, conducted 6+ press interviews, participated in 11 panels, and had 100+ social engagements. Overall, ad business site traffic increased by 58%. Despite scaling down our presence this year, we left a lasting impression.
Cannes Lions: 2022
I designed a highly-targeted landing page for an event with the primary objective of directing web traffic to the Roku domain. The landing page included a comprehensive overview of the event, featuring detailed information such as the agenda, speakers, Google map, and contact details. Furthermore, I showcased the Roku business sector to the audience. The results were impressive, with the landing page receiving an impressive 63,000 impressions within a single week.
NewFront 2022
Our objective was to connect with 34 well-established brand CMOs and present them with our brand-specific research findings. To achieve this, I designed an unconventional landing page that emulates the design of the Roku City TV Screensaver that scrolls from left to right.
The Problem
What is the most efficient and engaging process for developing 34 personalized landing pages for each partner, taking into account their affiliation with six distinct industries?
Opportunity
Demonstrate how Roku Ads engage with viewership on the Roku platform within the comfort of their homes.
Painpoint
Roku NewFront 2022 was tied to the theme of Roku City Screensaver design - how do we translate that into a landing page?
How do we make the landing page left to right scrolling instead of traditional up and down scroll?
How do we present trailer videos of Roku Original content?
What is the approach for displaying statistics specific to each industry category?
What measures can we take to avoid disturbing the current modules on the web platform and the work process of the engineers?
Solution
Implement a full-page module with a carousel-style code to address certain issues, such as replicating the scrolling effect of the Roku City Screensaver. This approach also minimizes the engineers' participation, as a single code is utilized across all 34 landing pages and can be modified by the designers.
As we frequently exhibit ads using the floating billboards, one way to incorporate significant status callouts and trailer videos is to feature them within billboards, which will then be positioned on four distinct buildings per scroll.
My Role
I developed and designed 34 unique landing pages for individual partners, starting with conceptualization and wire-framing, and then utilizing customer data insights to highlight viewers' favorite TV shows, which are linked to The Roku Originals Trailers. Given that The Roku City Screensaver served as the basis for the NewFront 2022 Roku campaign, my objective was to create a non-traditional user experience by implementing a left-to-right scroll instead of the conventional up-and-down approach.
Due to this approach, we were able to achieve impressive outcomes. Many of the top 100 CEOs activated gifted Roku devices, and explored landing pages repeatedly, leading to substantial traffic. We were able to lock in record-breaking ad deals for 2022.