SlingTV for Desktop and 10ft

PROJECT OVERVIEW

A Slingbox is a physical device that you attach to your cable box/DVR, and it allows you to control and view your TV/Cable Box/DVR content using a broadband Internet connection. It allows you to watch and control TV on-the-go wherever you are through Slingbox software on 2ft(Desktop) and 10ft(TV) interfaces. SlingPlayer on desktop and TV were our primary product at Sling Media. UX team supported all of the applications with different platforms for customers who have Slingbox.

Website

ROLE AND RESPONSIBILITY

Leading and designing SlingPlayer applications on desktop and TV was my primary role. Defined and created output to communicate relevant visual languages, created iterations to investigate solutions and applied feedback from users, leadership and team members. Worked in collaboration with other UX designers, product managers, and engineering teams.

UX DESIGN PROCESS & USER FLOW - DESKTOP PHASE 1

Our contractor created initial wireframes and I helped him engage with other SlingPlayer platforms. It didn't need to be exactly same user flows and structure, but we designed similar UX as much as we could. Based on the wireframes I improved UI and applied visual design with the same Sling's visual language. By using Sling TV, users can watch live TV and add photos and video clips and play all media on the TV screen.

Wireframes

Visual Design

UX DESIGN PROCESS - DESKTOP PHASE 2

After we launched the first version of Sling TV, we started to build the second release. The first Sling TV didn’t contain a guide with the Live TV screen. The user has to open another browser to check TV guide. We figured out the guide page-view was higher than others, so we focused on the guide for improvement. Our decision was to combine the guide and the Live TV on the same screen. It was convenient because the user can watch when they're selecting another channel or use the remote on the screen at the same time.

Previous UI Design

Final Desktop Visual Design

10ft DESIGN 

When I design for 10ft, I consider five design principles which are navigation, readability, color, safe margins, and simple content. The 10ft design is a different experience, and users tend to get frustrated if it’s not perfect.

Navigation:

When I designed for SlingTV, I preferred horizontal navigational patterns instead of traditional vertical scrolling because we used a TV remote instead of a mouse.

Readability:

Readability becomes an important feature which means that the size of text and other elements must be adjusted accordingly because TV screens are viewed from a greater distance. So, I had to test designs on multiple manufacture’s TV screens.

Color:

TV has a much higher gamma value than desktop, so I needed to preview the app on multiple TVs because colors can vary dramatically between television models.

Safe margins:

Ensured that titles, elements and important actions fit within the safe title margins.

Simple content:

The UI on TV must be clear, simple and visual because the elements need to be large and spaced far apart to be read from various distances. 

Visual Design

2020 JIN YEONG KIM    V.3