Designing a Cloud-TV UI

How to design an app for AppleTV and FireTV?

The customer of the product is a small or big business that offers IPTV solutions but doesn't have the time or resources to build its own UI. They would use the UI that we offer as the foundation for their content.

Elevate is a complete IPTV* (Internet Protocol Television) solution hosted in the cloud and it offers a fully managed video services model. Allowing customers to upload their content and display movies and live media through our TV and mobile user interface. 

My notes and comments will go here…

The challenge

The company already supported multiple devices, such as RokuTV, AndroidTV, iOS mobile, and Android mobile, the company wanted to add two more platforms to its portfolio; AppleTV and FireTV. The design team had to research each platform and design an experience that would feel familiar to the platform user.

🔎 Step 1. Research

Market Research

The design team spent a few days looking at competitor apps that allowed users to play on-demand and live video content. I looked at apps like Bell Fibe, Rogers Ignite, Netflix, Youtube, Ted Talks, Crave, Plex, and others. ​

Persona Creation

In a two-day workshop, our team took some time to create four personas based on the most common target audience. We turned to the sales and support departments to provide us with the data. 

I primarily researched Amazon Fire TV and Apple TV, looking at Design guidelines as well as Apps on those devices.

We identified competitor's strengths and what differentiates them from each other. 
 
 
When creating personas we focused on users as well as customers.


Researching Device Guidelines

Before designing the team looked at the guidelines and requirements for the platform. As a team, we looked at our findings, shared the knowledge, and compared the same apps on different platforms.

 
I primarily researched Amazon FireTV and AppleTV.


🧠 Step 2. Sketching and Brainstorming

Design Workshop

Before getting to the design stage we ran a few design workshops with stakeholders where we brainstormed and prioritized features and ideas.

Sketching & Wireframing

After, we had a few closed workshops with designers where we sketched and thought of the flow and the positioning of elements on the screen.

✨ Step 3. Designing

User Flow

We created User Flows to communicate the flow of the TV app to developers and to help us focus on experience rather than design. Since the Elevate product is very complex it has a lot of different features such as edge cases, popups, and pages.


Documentation - Remote Control & Error Spreadsheets

In addition to userflows, we worked on spreadsheets for error and confirmation messages for developers.



High fidelity mockups

The team and I spent a few months creating a design system and high fidelity mockups that were slightly different for each platform but still carried a consistent look based the company’s branding guidelines.

 
I found that sometimes I worked on the user flow and error spreadsheets simultaneously, since both were dependant on each-other.

🛠 Step 4. Implementation

During the Implementation Period, our design team had daily standups with the developers over Skype, to follow up on any questions they had. 

​Every two weeks development teams would host demos where they would go through their progress and show what bugs they have fixed and newly implemented features. 

The team and I evaluated, and compared mockups to the product and if the UI was different from our designs we would log UI bugs. 

💎 Step 5. Evaluation

The team hosted usability monthly sessions where we invited 3 participants and asked them individually to perform some tasks. One facilitator was in a room with a participant and supporting designers and occasional stakeholders observed the test from a different room.

 
My team followed the process described in the "Rocket Surgery Made Easy" book written by Steve Krug

Conclusion

The apps that we designed for AppleTV and FireTV were successful and allowed the company to gain a competitive advantage in the industry allowing the Enghouse to land multiple sale deals with companies that were looking for AppleTV and FireTV support.

In the future, we want to continue to run usability testing to see how we can improve user experience design and run more design workshops to encourage innovation.