--

CAROUSEL ZOOM

Redesigning the structural model of HBO's video streaming products, HBOGo and HBONow, to improve the search and browsing experience.

 

Summer 2017 UX Design internship at HBO, Seattle.

 

//UX DESIGN, INFORMATION ARCHITECTURE

 

 

 
 

Internship Summary

During my time as an intern at HBO I worked as a UX designer for the digital products team of the company. I learned how to work with the Agile methodology by actively participating in sprints as a part of two different teams over the ten weeks. Within these teams I worked with full-time designers and developers on design decisions, iterations of interfaces and user testing. 

Additionally, I experimented on user experiences with VUI, user testing small feature changes on the HBOGO app, conducted brainstorming sessions and was given a main project to redesign the browsing experience on HBO's digital streaming products: HBOGo and HBONow. The project was heavily focused on the user experience and structure of the website. We studied different types of users and their behavior while browsing and choosing the content. This helped us understand and prioritize the information provided on each click.

Throughout the ten weeks we had many meetings with designers and engineers and our iterations went through many rounds of critique. The project was scoped many times as depths of certain directions increased and as we prioritised the problems we wanted to solve. In the end, we proposed one focused direction of the base structure and three similar alternatives. This project is on-going.

 

Current Pain Points

Through conversations with the research and design teams about the desktop experience we found out that:

  • Difficulty in finding content because of the monotonous layout
  • The navigation doesn’t express breath of categories and is not scalable
  • Drill-in/Drill-out: On each click the user has to commit to loading a new page for an asset. This is a tiresome and an inefficient process that limits the user from exploring content
  • Dead-ends: We don’t give them options for what to do next
 Current Sitemap

Current Sitemap

 

So, in the current desktop version this is the flow, while on the home page the user can hover over an asset to get call-to-actions for playing, adding to watchlist or an explore button in the case for series tiles by clicking on the play button or anywhere on the tile the user is taken to an asset detail page where the content starts playing or can be played.

 Current User Flow on the website

Current User Flow on the website

 

Project Goals

  • Redesign the shell model on desktop: shell model consists of containers inside which the content can live that enables the users to flow through the platform
  • Explore interstitial states: a state that comes in between the hover and the asset detail page to provide more context of particular assets
 

Scope

  • We focused on creating an overall structure for the website for most common breakpoints for desktop, but did not do a deep dive into responsiveness
  • We considered navigation models and containers to see how users could flow through the desktop experience, but did not explore details of individual features or look into the visual design
 

Competitive Research

We started this project with a blue skies approach. We wanted to study how people browse and find content they want to experience. For that reason, we did an extensive competitor research which revolved around not only browsing videos but also music, art, images, products etc. These included: Spotify, Amazon, Artsy, Apple Store, TuneGlube, Netflix and YouTube.

 

User Breakdown

Everyone wants different amounts of information to make this decision and we need to cater to all those different users. Through our research, we realized that the best browsing experience was created by giving the user some amount of incremental information as they preceded to explore the web service. And so we divided our users into 3 types:

  • Users who know exactly what they want to watch - "I want to watch the new episode of Game of Thrones"
  • Users who have some idea about what they want to watch - "I want to watch a Comedy Movie"
  • User who have no idea what they want to watch - "I want to watch something"

 

Other use cases we kept in mind were:

  • Users who are browsing with family - "I need something that everyone can enjoy"
  • Users who have only a certain amount of time to watch something - "I have 30 minutes to watch something"
 

Design Principles

  • Our main approach was to identify and focus on the unique strengths of desktop - those being hover or keyboard interactions and the amount of space desktop has
  • We did explorations into the amount of information users may need at different levels to help them make an informed decision i.e. show incremental information
  • We accommodated for scalability and future needs
 

Information Breakdown: Navigation

Our initial explorations followed a blue skies approach and we were interested in designing for the best browsing experience. HBO has a moderately sized catalog of TV Shows and Movies and our job was to make the experience of finding the content the user is looking for as enjoyable as possible. To organize this content, we experimented with the information architecture of the website, playing around with how the content could be bucketed and presented to the user. Some of the explorations are below:

HBO_Overview.jpg
 

Through our initial explorations we narrowed down on the content we wanted to display in the navigation. Keeping in mind that the catalog changes very often and in the future, it might need to accommodate for different elements, we found it best to divide this section into: Home, Search, Browse and User Profile.

HBO_Overviewqwkjn.jpg
 

We then moved on to playing around with the structure of the website. These included explorations with different blades, filters, pop ups and new hover and intermediate stages that we could introduce to improve the user's browsing experience.

 

Information Breakdown: User Flow

This helped us understand how we wanted structure the website and the different stages to explore and play content.

 Proposed Sitemap

Proposed Sitemap

 

To correct the drill-in/drill-out we want to provide incremental information at different stages and so in the flow that we’re proposing for our shell model. The user can hover and get a call-to-action to play the asset. We separated the player from the asset detail page and allowed the user to play from the home page itself. This makes sure that the user is not taken to the asset detail page if they hit the play button.

We also introduced another stage on the home called the interstitial. When the users clicks on an asset, this stage gives a little more information, lets the users play the asset and allows them to quickly browse through other content. If the users need more information to start playing the asset they can access the asset detail page. We called it 3 ways to play.

 Reducing Drill-in and Drill-out

Reducing Drill-in and Drill-out

 

Information Breakdown: Hover State

To make the user experience more efficient, we want to introduce Smart Play for the hover states.

 

Information Breakdown: Interstitial State

While exploring many different shell models for the project we narrowed down interstitials to these three. 

Overlay. This is the approach that CTV and mobile have introduced. While the overlay provides more space to put in a lot of information, the drill-in/drill-out process still exists as you still need close the overlay to explore other assets. We also don’t think it embraces the strengths of desktop.

Google Photos. A model that netflix has blatantly copied. Whats good about this model is that when the drawer expands the user has context to the asset clicked on. But, because so many assets are visible it can get distracting.

Carousel Zoom. Is a new interstitial that we’re proposing. This model allows users to have a selective focus and emphasizes the content. While making sure the user can still quickly browse through the carousel and the home page.

Screen Shot 2018-01-18 at 2.36.40 PM.png
 

The static state shows the normal carousels and by clicking on it, the carousel zooms in the user is then allowed to navigate through the carousel in a focused state and continue browsing the home page if needed.

 

Animation for Browse:

 
 

Animation for Search:

 

Final Solution

You can check out the whole PROTOTYPE DEMO HERE

 

What I learnt

  • Making animations to demonstrate the solution
  • Breaking down information into different states
  • Conducting brainstorm workshops with the design team
  • Working in an Agile methodology
  • Experimented on user experiences with Voice User Interface
  • Interviewing for user testing feature changes on the HBOGO app