NICOLE LANDRY
Product Strategy / Design Leader / Consultant
mobi.png

CASE STUDY: MOBITV

MobiTV is a provider of end-to-end mobile media applications for partners including: Sprint, AT&T, T-Mobile, Verizon and other TV/communication companies.

This project (unnamed) was a white-label TV/VOD viewing experience that capitalized on convergent design. The UX design spanned across four platforms (desktop, mobile, tablet and TV).

I led the UX of this project while I was Director of UX at Code and Theory. The team consisted of 2 UX designers, 1 strategist, 1 designer, and myself. We worked directly with the client in an agile process, with daily standups, and weekly sprints. 

The end product was a complete working design across all 4 platforms. Because it was a white label product, we can't know for sure who ended up using it (though,I see a lot of similarities in the current Xfinity TV experience :).

Work included: UX and design direction (all platforms), product strategy, research, user journeys, IA, requirement documentation, wireframes, design, and prototyping.

The Approach

The Approach

I kicked off the project with a short research and strategy stage where we analyzed the current key players in the streaming TV landscape. In addition to understand the competitors & peers' offerings, I knew we needed to determine how the 4 devices would capitalize most of their strengths. This was done by determining the common behaviors for each device.

device analysis.png
User Journeys

User Journeys

I created in-depth user journeys that detailed typical consumption behaviors, while pointing out existing frustrations. These pain points led us in concepting potential solutions, and those solutions became feature requirements.

journey2.png
journey3.png
A Unified System Across 4 Devices

A Unified System Across 4 Devices

Once we locked down the requirements with the client, I began working towards defining the ecosystem of the full experience. 

We established that the features wouldn't be the same across every device. Every device shines and fails in some area... for example, messign with account settings and search are a nightmare via TV. 

The 4 devices: TV, Web, Tablet, and Mobile had unique challenges and offerings, but the goal was a unified and seamlessly transferable viewing experience.

Architecture

Architecture

The architecture of the system was built around the two key pieces of content: The "Entity" (all the content that its tied to a movie or show), and the "Asset" (a singular episode of the show, an actor, etc). Assets were children of Entities, and they lived amongst other types of content across the devices.

Companion Devices and Transferring Content

Companion Devices and Transferring Content

At the time, companion apps were becoming popular to use during big events (like the Emmy's, the Superbowl, etc). People were creating engaging companion tools, but as 2 separate experiences. 

In addition to companion features, we needed a seamless design for the transfer of content from one device to another wasn't available from the competitors (at the time). Someone watching a football game on his phone as a car passenger, needed to be able to get home and instantly pick up where he left off - on the TV, desktop or tablet. 

 

 

Kicking off Design, Delegating, and Staying Unified

Kicking off Design, Delegating, and Staying Unified

When it was time to start sketching and wireframing, I knew it could get chaotic, fast. We had 4 devices to design for and 4 designers. Should each designer take a device to design? How would we make sure we stayed aligned? How long was this going to take us?

I had a lot of questions. Although I developed a plan to delegate the work, I knew we needed to stay flexible. Fortunately, our client understood the complexity involved in the project. As long as we kept to our daily standups (to share updates), and presented work in weekly sprints, he was happy. 

We began designing for TV first. It was the most natural to all of us. My team worked on the parent-child relationship of the Entities and Assets first. Once we were in a good place, we played with how that relationship would work on the desktop. Mobile and tablet obviously had different design patterns (being touch based), but once one of them was in a good place, the other was fairly straightforward.

_mobitv_UX+copy.016.jpg
_mobitv_UX+copy.017.jpg
The Guide

The Guide

Ah, it was time for the Guide! Everyone's favorite/most hated area of any entertainment system. It makes or breaks it.

The goal for this Guide was to have as much personalization as technically possible. It would know my favorite titles, networks, genres, and actors and present available content through my own personal lens.
* Check out the current X1 box- there's a "Favorite" view of the Guide!

Another unique feature involved the idea that guide wasn't solely time-based. It would show all content currently available (live or on-demand). The user could see what's on live TV, while seeing (in the same view), favorite and suggested on-demand content.
* Again, the X1 has started (Spring 2016) playing with highlighting featured on-demand content within the Guide.

_mobitv_UX+copy.015.jpg
Unique Screens

Unique Screens

The final set of screens to design involved sports, and the remote. I think I pushed these off to the end because truthfully, they seemed the most straightforward. That said, they were some of the most functional screens. We looked to sports companion apps for best practices, as we brought some aspects of the Guide in to the experiences.

 

_mobitv_UX+copy.019.jpg
_mobitv_UX+copy.021.jpg
Completing the UI

Completing the UI

My UI designer began skinning the key interactions of the experience. It seemed like a fairly fast and painless process (most likely because we were extremely thorough in our wireframe and interaction documentation).

We passed the full wireframe experience (and partial UI) to MobiTV to develop in house. As a white label product, they can't confirm how/where the design is being used today. As an Xfinity customer, I believe I see some familiar features and interactions... but there are many other clients of theirs that could be borrowing some of our ideas. Regardless of how the design work was used, I thoroughly enjoyed the project. It was such a learning experience- designing one product across 4 devices simultaneously!

_mobitv_UX+copy.024.jpg
_mobitv_UX+copy.025.jpg
_mobitv_UX+copy.026.jpg
"This is the most innovative work I've ever seen." -VP of Product at MobiTV

"This is the most innovative work I've ever seen." -VP of Product at MobiTV