How might we make content browsing an outstanding experience? 

Project Overview

OpenTV Signature Edition is Open TV's brand new cloud based solution for pay-TV operators. ION mobile application is part of OpenTV's Signature Edition Suite solution and I am the lead designer for the project. 

​

I worked on the "Browse" feature and led efforts for the mobile application to be then designed over onto iPad and Tablet.

The Challenge

The challenge was to ensure that the "Browse" feature will allow end user to easily see all available content and I was tasked to build this feature on top of an existing design and framework.

01. RESEARCH

OpenTV Signature Edition has multiple product offerings which includes the Set-Top-Box, Desktop, iOS and Android application, iPad and Android Tablet.

​

To start off with, I had to understand what the Set-Top-Box Browse design looked like so that there is consistency across all our devices.

​

Search+Browse was a defined feature that the Product Management team wanted in the Set-Top-Box, so it was my task to recreate it on the mobile space and made sure the flow and logic made sense. 

Set Top Box Browse Design

COMPETITOR APPS AND INSPIRATION

02. DEFINE

After looking at competitor apps and the STB design as reference, I had a good idea of what key components to add. I made a very early stage information architecture diagram of how categories should be separated out. I reviewed this early on with Product Management team so that we were on the same page and heading towards the right direction. 

​

Based on insights from team and user data, I made a customer journey map so that I can better empathize with the situation and what type of emotions a user could be going through. 

​

​

While the information architecture was still being defined by the Product Team, I already made designs for Search+Browse feature for the mobile application to get a head start. I had to ensure that Browse and Search both worked seamlessly. This was an initial draft of how it looked like. (I had different versions of the Browse home screen)

Browse flow

Flow includes browsing via the Search Icon - 

• Browse by Apps

• Browse by Category Items (TV Shows, Movies, TV Networks..etc)

• Browse by Genre

Apps

Categories

Genre

SEARCH flow

Flow includes - 

• How to get back to Browse from Search

• How to get back to Browse after deep diving to Results

After discussions with product and design team and several round of iterations of the information architecture, the mobile design actually didn't quite make sense when it came to pairing Search with Browse. We realized that Search was of a spot where you already know what you want to watch, so imbedding "Browse" into the Search icon would seem of little value. It was then decided that Browse was its separate feature from Search. Below is the final information architecture of how "Browse" can be accessed. 

03. DESIGN

Browse can now be accessed via the Hamburger Menu and also in the last view strip of the Discover page as depicted in the Information Architecture. Browse feature category defined as TV Shows, Movies, TV Networks, Kids and Family with secondary level filter of genres in the top header. For further "power" users, I drew inspiration from the customer journey map and included most popular content with pricing filters. The list view designs are also in parallel with what we already have in place, and it also allows for metadata description. 

Hamburger Menu

Discover Strip

Browse now separated into own Menu Item

Access Browse strip in Discover screen

Hamburger Menu

Finalized Browse Screen

Browse TV Shows

Browse Movies

Browse TV Networks

Browse Kids & Family

Developer Build/Prototype

04. TESTING

Since delivering the designs, a new Research Team has been brought on to test the Browse designs. Currently, the Browse home screen includes featured apps (Try your luck, pay-per-view) that Operators may not actually want and developers cannot support. Because of that, I came up with further design concepts that would work well with the current style guide.

I had the opportunity to sit in some sessions of the Research Lab. While there weren't too many differences on which version users liked, we found some takeaways that included 

• Users go straight to Search when wanting to look for specific content

• Users wanted to see ALL content right at the beginning after entering "List View" of Category

• Users did not understand what the "Featured Apps" are in Standard version of Browse

• Users generally thought the design looked clean and modern, competitive with other streaming apps such as Youtube, Netflix

05. REFLECTION

In conclusion, there are still many areas of the Browse feature that needs to be validated and tested, but this was what I came up with given the time and constraints that we had. Within this project, I learned that things can quickly change, such as having to scrap out the initial draft that I had done and having to separate the "Browse" feature to the Hamburger Menu if it does not make sense for a specific device. I also learned that fine details and going down to the copy really matter; just making a small change to the copy can significantly improve the UX. Overall, I am proud of this project and the work that I produced so far.