DONE FOR
Espial inc.
TEAM
3 - UX/UI Designers
1 - Scrum Master
1 - Senior Product Designer
​
ROLE
UX/UI Designer
TOOLS
Adobe XD
Sketch
Zeplin
Axure RP
Confluence/Jira
Cloud TV - Elevate
About
Elevate is a complete IPTV* (Internet Protocol Television) solution hosted in the cloud and it offers a fully managed video services model.
*IPTV - Similar to Cable TV but instead of receiving TV programs as broadcast signals that enter your home from a rooftop antenna or satellite dish, IPTV uses the Internet and IP to stream (download and play almost simultaneously).
Target Users & Customer
Customer - Small or big businesses that are trying to move from Cable TV to IPTV. Or businesses that offer IPTV solution but don't have the time or the resources to build their own UI.
Features
-
The customizable interface allows customers to change colors & controls to match the user interface their brand identity.
​
-
Elevate Cloud TV runs on many devices whether managed or bring-your-own-device (BYOD).
​
-
Built-in analytics to how viewers interact with your video.
​
-
Watch online content, record, subscription-based, and pay per view functionality
Design Process
Overview
Step 1 - Research
Market Research
The design team spent a few days looking at competitor apps and other video apps on different platforms such as Bell Fibe, Rogers ignite, Netflix, Youtube, Ted Talks, Crave, Plex, and others. ​
We identified their strengths and what differentiates them from each other. We also discussed bad design choices and how they could be improved.
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.
​
We focused on users when creating personas as well as customers.
Download one of the Personas
Researching Device Guidelines
In addition, we researched devices for which we were about to start designing. I primarily researched Amazon Fire TV and Apple TV, looking at Design guidelines as well as Apps on those devices. As a team, we looked at our findings, shared the knowledge, and compared the same apps on different platforms. ​
-
tvOS
-
IOS (phone, tablet)
-
Android (phone, tablet)
Devices we researched:
-
Fire TV
-
Roku
-
Android TV
Step 2 - Sketching
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 - Design
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, edge cases, popups, and supports many platforms. The team decided to only work on the User Flow for one platform (Android TV) and then based on that created user flows for other platforms.
In addition to Userflows we worked on spreadsheets for error and confirmation messages for developers.
Documentation - Remote Control & Error Spreadsheets
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 might have encountered.
​
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. After this, we would evaluate, compare to our designs and if the UI was different from our designs we would log UI bugs.
Step 5 - Evaluate
Usability Testing
Following the process described in the "Rocket Surgery Made Easy" book written by Steve Krug, the team hosted usability sessions monthly where we would invite three participants and ask them individually to perform some tasks. There would be one person with the participant in one room and other designers along with the occasional stakeholder observing from another.
See Other Projects
