HBO Landing Page
How can we create a highly customizable, flexible, and testable site that increases conversion? Those are the questions that Theo, the CRO, asked us a couple of weeks after he started working at the company. He had been analyzing the state of our landing pages and the way we attracted potential users and was not happy. There was no real structure, and we were not getting results regarding data and actionable elements. Everything was a bet.
After many creative sessions and iterations, the result is what is presented below. A highly responsive website that is also easily customizable so that the content can be easily A/B tested. With the functional elements of the existing landing pages and the consumer platform itself, we created a site that is meant to be played around with while maintaining the visual identity and its basic structure.
The structure is based on three basic modules, all flexible enough to be personalized through a CMS. The modules are:
- Home: it is what the customer sees as soon as the page loads. It consists of a background image and the main selling point. There is also a CTA (Call To Action) button.
- Main module: this is the building block of the site. It can be customized with a hero image, different formats, and a CTA button. There can be multiple modules throughout the site with different content order but with the same core structure.
- Carousel module: this module can be used to present content in a more visually appealing way. Images are the main elements here, with some supporting text and even CTA buttons.
Landing Page Prototype
A vital component of the process was iterating and prototyping. The prototype shown above allowed us to see how the best navigation pattern could be achieved on different display sizes and devices. We used a high-fidelity prototype to present to the users and stakeholders and also as a tool for developers.
When the design work was done, it was time to hand it over to developers. This process required the creation of a Zeplin project as well as technical guidelines and a style guide. The technical guidelines allowed developers to see the characteristics of the modules, such as spacing, sizes, the behavior of elements, and responsiveness. The style guide included the specifications for the font, buttons, and other visual aspects of the site.
After months of development, the site was ready to launch. Below, you can see the published and final results of the first A/B test version conducted with the new web and mobile designs. Notice the paginated content that loads as you scroll. This was to reduce the loading time as much as possible. You can also see the live published site here.
Disclaimer: I left HBO Nordic after the site was published for the first time. It may no longer look like the original designs or content may have changed.
Deployed Desktop Version
