Smartisan TV OS


UI Design








As the person of contact for design team for the tv project, he has taken a lot of communication and coordination work, which effectively driving the progress of the project.
——Performance review for September 2022

... proactively expand the scope of his responsibility throughout the daily work, and being unanimously recommended by all teams as the person of contact.
——Performance review for September 2021


Hasn’t been working for long but has shown remarkable growth speed.
——Performance review for March 2022



Proactively drives product managers to refine requirements from a design perspective, rather than simply delivering on requests.
——Performance review for March 2021

The Smartisan TV project was spun off from the Smartisan phone project. In its early stages, the interaction of many interfaces still followed touchscreen interaction, which was unsuitable for TV devices primarily operated by remote control. The system retained the Smartisan skeuomorphic design style. Without a unified component library specifically designed for TV platforms, it results in inconsistent design throughout the system. Since joining this project in January 2021, I've been asking myself: What can I contribute to this project?

Role

Took ownership of building the Smartisan TV OS Design System
Assist other team members in their work
Led a team of 6 to explore the 2.0 design style for the system
Design most of the system apps and modules
Creating app icons
Design motion graphics
Developing illustrations and their design guidelines
Marketing posters and their design guidelines

Contents

Design System 2.0
1.0 Problems
User Persona
Client’s Need
2.0 Design Principle
Design Guide
Style
Resource
Bridging the Design-Dev Component Library
System Apps & Modules️
Content-oriented Apps
Key Features

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

.







Section 1

Design System 2.0


Led a team of 6






We’ve heard users' dissatisfaction with the 1.0 style of the system, but before upgrading to 2.0, we must first identify:





1.0 Problems


>>>












Before we start designing 2.0, we also need to know:





User Persona


In addition to men, women, the elderly, children, etc. are also the main target users of TV products.







The only things that can’t be compromised are dramas and dumbbells.
Oh me? I'm just your average square-dancing enthusiast!
Baldy Vick! No escape this time!






Client’s Need


The TV OS project is a B2B project where our system gets installed on clients' hardware. This requires us to address compatibility issues across varying screen qualities and chip performances. Additionally, clients expect more prominent brand exposure opportunities.







We initially selected the Desktop (content-oriented) and Settings (function-oriented) interfaces – the two most representative TV scenarios. Following a diverged-then-converged approach, through mulllllllltiple rounds of exploration and validation, we concluded:













Clean Grid System
The interfaces adopted a simple, unified grid framework, with appropriate spacing to achieve order without overcrowding.
Visual Noise Reduction
Based on the 7±2 principle to reduce information density and streamline visual pathways.
Embrace Flat Design
From the entire page down to an icon, in line with contemporary mainstream design style.
Clean Focus Style
The upward-shift focus status does not disrupt the grid of the page while attracting more attention than the conventional scaling effects.
Concise Wording
Avoid displaying "Loading" text when unnecessary - a spinning ring has sufficiently conveyed the meaning.


Consistent Visual Style
It's hard to believe these icons all come from the same system. The TV project urgently needs dedicated design styles, resources, and component library. Not only for aesthetics, but also for better usability.




Clear Wording
How many ways do we need to say “Press the Menu button”?




Clear and Logical Layout and Focus Movement
Considering the constraints of the remote control directional keys, designs should avoid strange focus styles and counterintuitive focus movement.
 


Immersive Mood
Full-screen backdrop images and videos create deeper immersion while emphasizing the theme.
Friendly
A rounder, brighter, more vibrant, and more modern design language bringing energy into every home.


Minimize Disruptions
Small Dialog and simple prompts avoid breaking user flow. Full-screen Dialog and complex content for focused attention.


 


Brand Exposure and Customization
From brand colors to system icons, from loading animations to empty states, from navigation bars to system functions, support in-depth customization based on different models.
Gaussian Blur Adaptation
Whether it is blurred is determined by the performance of different platforms and Android versions.
Adaptation to Light and Dark Modes
It can automatically switch according to the ambient light during the day, and can also be flexibly adjusted according to different screen materials, such as LCD, miniLED, laser projection, etc.





 

Next Section