LiveLike Content Discovery Interface (CDI)

Challenge

Inside the LiveLike applications, content was scattered and hard to find. Users needed to sit through long load times into new 3D rooms in order to discover if there was any interesting content. This led to a lot of users leaving the app in frustration or not realizing there was more content in the first place. As our clients supplied more and more content into their applications, this problem magnified with interfaces that weren’t designed to support large catalogs. How could we simplify the user flow while allowing users to view all the possible content from a single location?

Simplifying Navigation

The LiveLike apps host a wide variety of video types, from 180º and 360º to 2D clips and live TV feeds. Originally we separated each content type into its own 3D rooms.

Content was segregated for a few different reasons.

  • Load times could be kept down by separating content into smaller chunks

  • In VR, a sense of exploration as users go from room to room could aid in the immersive feeling of the product

  • As new features were added it made sense to give them their own environment rather than shove them into existing spaces when there wasn’t room.

As we produced more and more games in VR, streamed an increasing number of live TV channels, and hosted a growing catalog of 360° and 2D VOD content, we started to feel the restrictions of this multiple room model. Users didn't know which content would be behind "Door Number One" before selecting it, sitting through a couple instances of loading, and then looking through a content catalog. This meant that we were unintentionally throwing up a huge amount of friction in content discovery.

A couple things needed to be done in order to fix this. 

  • All content needs to be accessible from every location

  • Drastically reduce the number of locations

  • Get users into content as soon as possible

In order to achieve this we revised the experience around a single-seat experience. Users immediately load into a viewing experience, with content (hopefully live) playing. Users can change the video or explore the room freely from there.

If content isn't separated anymore, how does it all fit together?

In order to accommodate a growing catalog of events and concurrent live games we needed a more flexible and scalable solution. Our main menu UI featured one big hero thumbnail, and 3 or 4 tiny "chips" underneath for past games. They did a poor job of displaying any game information, were hard to target, and weren't very compelling. Games were shown 4 at a time and their titles had to be shortened to 3-letter “tri-codes” (i.e. SEA - ARI). This made it a nightmare to browse for content.

First I started by outlining the information and prioritizing content hierarchy. What did we absolutely need to show, and what was the most important thing to get in front of our users?

  • Live VR Experiences

  • Live 2D content

  • Past VR Experiences

  • VOD 2D content

  • VOD 360 content

All of this content needed to fit into a single interface, which meant categories and organization would be important so the the user wasn’t overloaded.

Redesigning for scale & flexibility

Before starting from scratch I needed to determine the size of my design. There are many considerations in VR about the size and distance of UI. If it’s too close, it will feel claustrophobic. If it’s too far or too small, text will be extremely hard to read, like a billboard a mile away. Google shared some guidelines for VR during I/O 2017 that were extremely helpful in standardizing all of this.

Using their comfort guidelines I made a set of grids – a 12-column central grid with two 6-column grids on the user’s sides for navigation and secondary information.

I designed a series of page templates that would allow for flexibility while showcasing content depending on its different needs.

Spotlight View

A large hero thumbnail allows content artwork to be big and enticing. In VR, it fills the field of vision nicely and acts as an attractive first impression when users enter the app.

A row of thumbnails below the hero thumb acts as a carousel, allowing users to quickly paginate through featured content, and giving clients the ability to show off important events with bigger imagery than before.

Smaller thumbnails allow for a grid fitting up to 8 pieces of content on screen at a time. While not as attractive as Spotlight View, it lets users browse through large content catalogs much faster.

Collection View

Detail View

Clicking the “See More” button on any thumbnail brings users into a Detail View for that particular content. This shows any related clips, highlights, or other sub-content that’s available. Having this new detail page allows browsing users to see the depth of each content before making the choice to load a new video. 

In our previous Main Menu, users would have to select a game to watch, load, turn their head around to find the Highlight Center, load, then browse the clips to see if anything is interesting. This new page template massively speeds up the content browsing flow.

Visual Design

Blue was chosen as a primary color because it can act as a “safe” default that easily applies to many brands. If a client wishes to override with their brand color, that’s easy to update.

I added distinct states for the selected small thumbnail and an overlay if the user is currently watching a piece of content.

Profile photos also appear on thumbnails if your friends are watching.

Colors, interactions, and thumbnail styles are carried over from Spotlight View so that things stay consistent and users can learn our new UI system faster.

A large thumbnail fills the user’s field of vision in the Detail View. This brands the experience and keeps context when users are scrolling through related thumbnails, but also lets the content art shine if users happened to come from a small thumbnail in the Collection View.

To test with the team and convey transitions to developers I prototyped the different templates in Principle.

Prototyping

Implementation

All of the assets were broken out according to the different thumbnail states.

I built out each template in Unity so that everything could remain pixel-perfect and true to the designs, and give the developers a massive head start on layout and implementation.

Wrapping up

This project presented a massive UX improvement for the core flow of LiveLike’s applications: content browsing. The speed of content delivery was greatly increased and user confusion was greatly cleared up.

This UI provided a base system that the entire product could move forward and grow on top of as time went by.