For two years I acted as the sole designer for HBO.com, assisting in the launch of a full redesign in 2017 as well as any subsequent optimizations. HBO.com was a fully editorialized, AEM CMS driven site prioritizing two things: funneling consumers into a buy flow for HBO NOW/GO, and educating users about our programs and subscription offerings. During my time designing and enhancing the site we won two Webby Awards for Best Streaming Site, and two nominations for Best UX and UI.
The Design System and Back End
Heavily designed around Atomic Design principles, Dotcom was built using atoms, molecules, and organisms which were assembled on React page templates, and driven by a customized CMS powered by Adobe Experience Manager.
The Band System
Following the atomic guidelines above, HBO.com is editorialized by dozens of “Bands”, or different drag-and-droppable components akin to Squarespace. I was responsible for designing new bands as well as tracking the performance of existing bands, improving where necessary. One of my most impactful new bands was the Homepage Hero band, using large and dramatic imagery to draw in users when they first enter Dotcom.
Order Page Redesign
While I had my hands across the entire site, one of my most measurably impactful projects involved a redesign of the HBO order page, which was the main driver to inform our 30 Million subscribers of our products, as well as convert potential new subscribers. I organized rigorous user and A/B tests with the assistance of our in-house User Research team, and optimized the page to significantly improve our conversion rate and user understanding. View some sample pages we tested below, as well as the results of the study here.