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.
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.
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.
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
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
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.
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.
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.
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!