Sony Next-Gen TV OS Design
UX Design Intern | Shanghai
Team
Design Center China (DCC)
My Role
UI/UX Designer
Tool
Figma, Sketch
Duration
Feb, 2023 - Jun, 2023
My contribution
Designed desktop UIUX to meet user needs for TV as a home entertainment center. Conducted user research and developed deliverable solutions by sketching user flows wireframe and creating hi-fi interactive prototypes.
Project Overview
Designed the next-generation TV OS for Sony, aimed at exploring how to design a new TV OS under the new positioning of TV as the entertainment center of the home, achieving a shorter interaction chain and a clearer, more concise UI style.
It will be released in the third quarter of 2024.
Final Display
Widgets Desktop
A brand new desktop based on Widgets, enabling easy access to the desired Apps and features right from the desktop. This is more in line with the behavior of the next-generation TV OS as a home entertainment center OS.
Pop-up voice assistant
We designed a pop-up voice assistant feature, allowing users to summon the voice assistant from any page and quickly find the content they want.
Watch Page
We have abandoned the previous waterfall-style content advancement. The new content page emphasizes an immersive experience, bringing a cinema-like, brand new experience.
APP Page
We have integrated app recommendations, app additions, and local apps on the same page, lowering the learning barrier for users.
Now that you are acquainted…
How do we get there?
Context
What’s the problem?
What do the data tell us?
According to Sony's data statistics, in the past three years, more users have been using third-party desktop systems (such as Emotn), and they tend to enter third-party applications rather than clicking on the recommended content on the homepage.
Is it possible that users have changed their habits of using TVs?
↑24%
Rate of users using third-party desktops
Third-party desktops
↑61%
Usage frequency of third-party applications
↓37%
Click rate on homepage recommendations
So, what do users think?
We conducted comprehensive research to ensure we fully understand users' perceptions of the current Sony TV OS and their needs for a TV OS.
348
Survey Respondents
16
Interviews
2
Focus group discussions
Research Summary
For younger users (under 35), TV is gradually becoming the center of home entertainment rather than just a platform to watch content over.
The younger the users, the higher the proportion of them using smart TV OS, and their use of TV tends towards greater diversity, not limited to just watching videos.
25-30
25-
31-35
36-40
41-45
46-50
51-55
55+
10%
20%
30%
40%
50%
60%
70%
80%
Users' usage statistics of Smart TV OS
Data
Using Multifunction
Using smart TV OS
Here is what we know.
In our user research, we focused on compiling the needs of users under the age of 35.
For them, their understanding of the television operating system has changed. They treat the TV like a smartphone and need a shorter interaction process, allowing them to find the desired app in one step.
Shorter interaction process
I need to quickly find the app after turning on the TV.
Broader feature coverage
The TV is more like a large screen phone.
Simpler UI design
I like simpler Interface.
Problem Definition
How should we design the next-generation TV OS to meet users' positioning of the television as a home entertainment center?
Design Goal
We should go in this direction
Abundant
Meet users' diverse usage scenarios for television
Quick
Quickly find the desired app after turning on the TV
Concise
Avoid overly fancy interfaces
Feature #1
Let's start with the layout
We have researched the mainstream TV systems on the market, which mainly have two types of layouts. One is the Google type, focusing on content such as movies and videos. The other is like the Apple type, serving as a launcher to start various apps.
Content Based
Focused on content recommendations, combined with commonly used apps
App Launcher
As an app launcher, it aggregates various apps.
Large cover video attracts user clicks.
Advertising revenue from content promotion.
The homepage cannot satisfy various needs.
Harder to access the apps.
Consistent with mobile OS logic.
Adjust app's position for more personalization.
Quickly accessing different apps.
Lack of advertising revenue.
So what should we do?
We chose a widget-style desktop. 1. Can cover a variety of apps. 2. Short interaction process, smooth experience. 3. Compared to the app icon, it displays more information, reduce the trouble of switching between multiple apps. 4. Maintains a consistent layout with the mobile version, reducing the learning barrier.
Also, widget allows for certain recommended positions to generate advertising revenue.
Why double-layer navigation?
The reason for current design is that we consider the importance of search to be very high, and we hope that users can access the quick search button on any tab.
But is it really effective?
The data indicates that the usage rate of the search button on the navigation bar is not high.
15%
Weekday search usage rate
23%
Weekend usage rate
Why?
The interaction process is still too long. The interaction process is still too long. Moreover, since the search page is loading a new page, which feels disjointed from other pages, it interrupts the current user experience.
Cotent
Hover
Tab
Second layer
Search Button
First layer
Search Page
New Page
[BACK]
[UP]
[OK]
Search interaction process
What's more?
Too many tabs increase the user's initial decision-making, making it easy for users to be overwhelmed when facing the tab bar. Moreover, the double-layer design occupies more space, squeezing the space allocated for content.
Make it more concise
We reduce the number of Tabs and incorporate the search page into the Tabs. The new single-layer navigation bar makes the search more accessible, providing more space to display content.
Search interaction process
Search Page
Search Page
Cotent
Hover
Home
Tab
Watch
Tab
App
Tab
[BACK]
[LEFT]
[LEFT]
[LEFT]
[LEFT]
[LEFT]
[LEFT]
New Navigation Bar
Side navigation or top navigation?
Side navigation is more intuitive. Users only need to press [LEFT] to enter the navigation bar, making it faster to switch between different tabs. However, the top navigation bar leaves more space for the content itself.
Our design goal is to provide multifunctional access through widgets, thereby reducing reliance on tab switching and reducing initial decision-making. Therefore, we have chosen the top navigation bar to display more content.
Interaction is more intuitive
Press [LEFT] instead of [BACK].
Low readability
In the default state, display icons.
Occupy more space
The space of the side is more noticeable than the top
Occupy less space
leaves more space for the content
Information is clear
Text tabs are clear.
Need to press [BACK]
Using [BACK] to the navigation requires instruction.
Comprehensive search experience
Pop-up voice assistant
Voice assistants have become an important means of search. We designed the voice assistant as a pop-up, which can be summoned on any page and allows for rapid interaction. This provides another way for users to get to the content they want faster.
Feature #3
Arrangement of widgets and focus movement rules
We have designed many arrangements for widgets and created interactive medium-fidelity prototypes for two of these arrangements, which were then subjected to usability testing.
More suitable for TV's wide screen
Larger widgets, more information
More unified layout
Display more widgets
But the key is
We conducted usability testing on the interactive prototypes and found a defocusing issue on the large TV screen. That is, when the user's expectation does not match the actual focus, the user needs to re-locate the focus. Therefore, we chose the second arrangement of widgets.
Expectation
Reality
Expectation
Reality
Refocus
Focus transition occurs between the upper and lower rows. On TV, different rows have a clear hierarchical distinction.
Therefore, it's easier for users to lose focus.
Expectation
Reality
Expectation
Reality
Refocus
Two widgets on the same row are at the same hierarchical level. Therefore, users do not need to refocus up and down.
It is easier to focus between the two columns.
Focus switching animation time
Every focus shift on the TV is composed of animations, thus the duration of the animations is closely related to the user experience. We have found that the animation duration should be divided into two types: one for focus movement within the same page, and the other for focus movement during page scrolling.
Same page
When there is no change on the screen, a faster animation time should be used to make the interaction feel smoother and more fluid, without any lag.
200ms
Page scrolling
When scrolling up and down a page, there is a significant amount of information changing. Users need more time to refocus, thus requiring a longer animation duration.
350ms
Iteration
The process does not always go smoothly
We have gone through dozens of iterations in our design, including many detailed modifications. Even after creating a high-fidelity prototype, we continue to discover new issues.
What we learn
Too much information
At first, we wanted to include more information in the widgets, but through testing, we found that even though the TV is a larger screen, due to the viewing distance, too much information can easily lead to information overload for the user.
Areas where the user feels information overload
What we learn
Less is more
We simplified the design of many widgets. This solved the problem of information overload.
Take Away
The importance of usability testing
During the design process, especially when dealing with unfamiliar formats like television screens, usability testing can quickly identify and rectify issues.
Market understanding
In a business environment, designing often requires considering many commercial factors. For example, why the previous version of the waterfall-style TV OS, despite receiving widespread criticism, continued for so many years. Because it can bring in advertising revenue. How to balance business and design is something to gradually learn in the work environment.