← Back to Homepage

Televison UX/UI Case Study

The Process and Approach

Research & Questions:

The functionalities required were cross-referenced with currently available apps (web, connected TV and mobile) and their functions i.e. xinfinity, time warner cable, sky TV, AOL On, Vimeo On Demand, SBS, Netflix, Amazon Fire TV and Samsung SmartHUB. Main trends of users and their experiences from these taken into consideration from records as well as guidelines provided by some of the above mentioned service providers.

The users or target audience are a vast majority between the ages of 10 and 60, i.e those who watch TV on a regular basis either during or after their daily activities to take time off and relax/it is part of their job. (Almost all of us)

Questions included Major viewers, Languanges used, content to showcase i.e. live channels, on demand videos, major factors for the viewership/viewing?, distractions while viewing on a TV screen, ease of access, content structure etc.



Usability Requirements & UI Structure

Usability requirements were conceived after conducting a user experience study with various video access apps and websites like youtube, vimeo, hulu etc. A number of users were told to use the above named apps & websites. Once they completed the exercise, there was a verbal discussion on the things they found useful and unnecessary which were recorded. This observation allowed me to determine how much filtering and influence users want when using recommended systems.



The following are the guidelines derived from the user study as well as standard design principles for designing Connected TV app UI.

- Simplicity, Non-conflicting design

- Visibility from a distance of at least 10ft

- Less text and imagery i.e. LESS IS MORE concept

- Clear and simple actions (i.e. simple press of buttons)

- Ease of access to items (Users don’t need to exert too much effort in finding what they like)

- Design inside the overscan (within 90% of the TV screen)

- Use of mobile phone as remote (optional/Future addition)

Low Level Sketches & Wireframes


Quick sketches with notes to assist mental visualization


Once the design was confirmed it was decided that major pages will have similar structuring allowing users to ease in to the flow of the interface, thus making navigation easy.

Mobile Extension/Connected App


Designed with the Connected TV interface in mind retaining the concept of simplicity and Easy navigation following the same structure as the TV UI. Due to the screen size restrictions the amount of information is compressed to provide a better visual element. Only relevant functions such as Live TV, On Demand Videos, Recommended and Promoted videos, search, wishlist and purchases for the user.

Final Outcome



You can find a detailed Visual of the project on behance. Click here for the Detailed View

 

More Projects