SlingTV for Desktop and 10ft
PROJECT OVERVIEW
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.
HIGH-FIDELITY KEY SCREEN WIREFRAMES
Our contractor created the initial wireframes, and I collaborated with them to integrate other SlingPlayer platforms. Although we were not required to duplicate the exact user flows and structure, our goal was to provide a similar user experience as much as possible. Based on the wireframes, I improved the UI and applied visual design consistent with Sling's visual language. With Sling TV, users can watch live TV and seamlessly add photos and video clips to enjoy all their media on their TV screens.
UI DESIGN FOR DESKTOP VIEW
After launching the first version of Sling TV, we began working on the second release. The initial version of Sling TV did not include a guide on the Live TV screen, and users had to open a separate browser to view the TV guide. We noticed that the guide page view was higher than other pages, so we decided to prioritize improving the guide. Our solution was to combine the guide and the Live TV on the same screen, which was more convenient for users because they could watch while selecting another channel or using the remote on the same screen.
10FT UI 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.
Design Principal
1. 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.
2. 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.
3. 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.
4. Safe margins:
Ensured that titles, elements and important actions fit within the safe title margins.
6. 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.
10FT ANIMATION PROTOTYPING
Better visualization
Animation prototyping allows designers and developers to visualize the user experience of a product better before it is fully developed. It helps identify potential usability issues early on in the design process, which saves time and resources later. Also, it helps to improve the design, development, and usability of a product, leading to a better user experience and greater user satisfaction.
