The world's best content.
HBO is known the world over for great storytelling. The network’s original programming has won acclaim and cult followings for shows ranging from Sex and the City and The Sopranos to Girls and Game of Thrones. Not to mention award winning original films like Game Change and Behind the Candelabra. HBO is also a company of firsts: the first cable channel to specialize in films; the first channel to be delivered via satellite; essentially the first movie channel to expand into original programming. With such a legacy of innovation in entertainment, it’s no surprise that HBO became one of the first entertainment companies to deliver its content to subscribers anywhere, anytime, on nearly any device or platform, with HBO GO.
HBO was an early innovator with the introduction of hbogo.com. By 2010, HBO was looking for ways to leverage the unique opportunities provided by digital channels to connect with subscribers in new ways. With the launch of the iPad’s, that intuition took on new urgency. The tablet represented an exciting way to connect with passionate viewers, in a way that did justice to the high quality of HBO’s original programming.
The key would be prompting viewers to discover more great content, beyond their favorite shows. By helping fans of HBO content explore more shows beyond their favorites, HBO could add massive value to the subscriber experience and grow loyalty among its subscriber base.
"Letting viewers find stuff and then get out of the way."
It was clear early on that a version of HBO GO for tablet and mobile had to help users accomplish two key tasks:
- Play the video you want.
- Discover new original content from HBO's library.
The first goal was imperative. The second emerged when we learned how extensive HBO’s library of original content was. The team quickly became excited about the ways in which mobile applications could aid the discovery new content, opening subscribers up to the best possible advertisement for HBO – more of HBO’s own content.
Iterate, iterate, iterate.
Working as a single team, we wasted no time getting started. Huge’s product design group presented work several times a day, developing and iterating multiple prototypes until we had a product that lived up to HBO’s formidable reputation. Our approach to the work integrated HBO with Huge’s strategy, design and UX teams who made a point of sketching every idea that came out of brainstorming — whether for a single page or the entire platform. Sketches were immediately turned into prototypes, which were tested with actual users and then changed accordingly. To nail the opening page of the iPad application, we designed 28 different wireframes and built out 4 separate versions.
Beyond the carousel.
"It has a drift to it… this is a little cognitive hack that is trying to get you to do something or look at something in a way that’s not the way you’d naturally engage with it." Cliff Kuang, Senior Editor, Design, Wired.
This agile process helped us solve a big problem: how to successfully promote the most popular and latest content while also aiding the discovery of new content from HBO’s catalog.
The solution came in the form of a gently drifting mosaic grid that let HBO feature more content upfront.
This was a radical departure from the standard carousel model, which prioritizes a single hero image at a time, and it became a defining element of the HBO GO tablet experience. From the mosaic, viewers can begin watching full-length programming with one click, the shortest possible distance from discovery to watching.
First launch done, seven to go.
From the beginning, HBO wanted its subscribers to be able to access GO wherever they were, from Smart TVs to video game consoles. But replicating the success of the iOS and Android apps was not as easy as cutting and pasting: every platform is unique, with its own set of features and constraints.
The Samsung Smart TV interface, for example, has no back button, requiring the design of panels that users go deeper into the content, to the right of the screen, and then exit by going back left.
Many platforms, like Roku, employ specific design templates that must be adhered to. To ensure a seamless HBO GO experience, we had to hack these templates. For Roku, we found a way to create dividers between categories in a long list - between letters in an alphabetical list, for example.
Other platforms, like the Xbox 360, used UI styles that were so new at the time we had to invent our own guidelines to move forward. Microsoft’s new Metro style for the Xbox was still in development while we were designing for it.
One thing that remained consistent throughout was the approach to design. Working with HBO’s technology team, we used the same rapid prototyping methodology to extensively test every new interface or interaction component before committing to the final design. This adaptability proved essential as user testing challenged our initial assumptions time and again. Moving from the mobile app to the TV apps like Samsung and Roku, for example, meant evolving the design for a close-up experience to one appropriate for the actual use case.
User needs always showed us the way. With the xBox 360, we had to consider different and divergent users in a shared living room experience. The mom who needs to be able to pick up the controls and find her favorite show and the teenage gamer who knows his way around the system. We had to make the experience exciting for the gamer but also accessible for the mom.
Cross-Platform Design & Development = Forward & Reverse Engineering.
Designing across platforms isn’t linear. An elegant solution for one might inform the design for the next, or point the way towards improving an earlier launch. Ultimately, working on multiple platforms, often in parallel, means improving the experience on all.
For example, simultaneous user testing showed that users preferred the Roku app over the Samsung one because it required fewer steps to watch the last episode of a given show. This learning prompted us to go back to Samsung to see if we could find ways to reduce the number of steps.
Ultimately, we took a dynamic approach to each experience for each app, with teams constantly going back to previously-launched apps to tweak based on new learning and innovation.