Samsung Smart TV UX

‘Simple, Clear and Rational’ were the three keywords that guided us through the entire process. We focused on creating consistency in visual language, implementing small
details and embedding design accents throughout the UX principle.

We defined phrase motions for assigning interaction behaviours to different software, elements, and actions. These conditions inspired establishing fundamental characteristics that would drive the rest of elements. 

To make a new UX, our team conducted basic interactive elements such as move, delete, change, and focus to add characters and express a style in each element. Based on the research, we designed signature motions, which focused on delivering informative and immersive movements.

I’m in charge of building consistency between the different interaction paradigms and explore new interactions of the individual apps to amplify the identity.

Consistent  Movement

The primary element is the ‘focus and highlighting state’ in the TV UX. As the user navigates within the app, different UI components such as thumbnails, buttons, and icons should be indicated consistent movements. 

Lively Experience

By providing animation which is currently highlighted, it provides a more enjoyable experience and allow for better recognition.

¹ Clear hierarchy by creating principle curves of each status

We prioritized one important thing: users must know where they are on every single screen and what element can be selected using the remote control. Therefore, we identified curves of motion such as move, focus-in/out, and press motion to clarify current status for orienting users.

I mainly designed main hierarchy motion of App Store, which gives users access to loads of apps and control media by themselves.  I considered the scalable motion based on each size of thumbnails and title. And I also featured disappearing title when the thumbnail images expanded.

I suggested specific motions to make sure we were creating consistency for all the features and help users to understand how to perform between different functions. User can recognise current direction where they are exploring through not only the highlighted thumbnail but also changed the contents' direction.

_{Thumbnails and the below contents navigate the direction at the same time}

³ Bounce back for user education

The Bounce Back action is animated to notice the last content of the section.  User can understand how to perform the function and guide user-friendly interaction.

⁴ Indicate the status of system actions

The motions of moving and deleting in App Store provide timely feedback and emphasize key action in a user journey.

⁵ Enjoyable waiting and Friendly screen

Instead of fading to black like a conventional No Signal of TV, Lumi’s display transforms into an image of subtle movement and gives ‘wow effects’. This effects give enjoyable waiting rather than encounter uncomfortable message in the black screen which feels error.

To make endless ‘Snow Effect’ without memory issue, we collaborated with a physics engine team. I designed the snow effect motion samples and adjusted the speeds, scales, and amounts by using parameters.

^{↓ Previous No Signal - Black Screen}

Systematic thinking cross different design stakeholders
Designing TV UX required following patterns of UX principle and visually aligning with different apps. The goal was to create the impression that both unified simple interaction and enjoyable experience. That means the design process needed many stakeholders involved from UX team and various teams of Software, QA, Product, and marketing.

Comprehensive execution experience
Building new UX needed in-depth thinking process. I explored wireframes, visual principle, and prototype which helps to create unified motion along the UX concept. I expanded multiple-thinking system through this practice.

Optimize the development tasks to focus on the core UX
One of the major roles was communicating with software team. To implement one feature, I needed to clearly define and logically communicate to the software teams. As a visual thinker, I enjoyed creating a visual and motion guide to explain complex issues to better convey and sharable to large audience.

Designer as facilitator of tackling technical issues
While designed motion design, I had to solve issues such as less memory, technical problems that may influence the design changes. It was helpful for designer as a facilitator to conduct a meeting and facilitate both the software teams to make decision together rather than being influenced design decisions by either team.