Vidaa TV
Smart TV Market and its Canadian influence
Hisense is the 4th largest TV manufacturer in the world and also owns the brands Sharp America and Toshiba. For 5 years, they had a Design and Development studio based in the Toronto/GTA 🇨🇦 called Jamdeo.
This studio, of which I was part since the beginning, designed their SmartTV system from scratch and continuously improved it year after year. During this time, their design influenced the market, they gained market share, and millions of users enjoyed their TV experience. Below are some noteworthy moments where I contributed to their journey.​​​​​​​
Vidaa TV Beginnings
SmartTVs were a fairly new concept at that time; the market had just started and the team had no particular experience in it. We were in uncharted territory with lots of unknowns. This situation, however, is not uncommon for designers. With ambition, we followed a process to get us out of it and start pushing results.
Our first step was to immerse ourselves in the TV world. I was responsible for creating a presentation about the history of the TV-viewing experience. This presentation helped to shift our minds into TV mode: a more relaxed, communal, 10-inch-away-from-the-screen experience, with no mouse or taps.
A new design approach
In the first years of Smart TVs, their UIs resembled a smartphone home screen or a desktop-like PC. After our immersion, it became clear that it was not the way to go. During our discussions and sketching sessions, a new panel approach started to emerge:
After iterating on the solution, high-fidelity prototypes helped to validate our approach internally and externally (Asia). Hisense’s (and ours) new premium TV was named Vidaa. Along with other design features, it was the first UI tailored to the Smart TV experience and proved to be greatly successful in the market.
Vidaa 4 (2016)
From an interaction perspective, we detected a friction in the TV experience: many times the users just need to perform a simple action, but they need to launch a full application in order to do that.Â
We solved this problem by creating a new type of tile: the Live Tile. In its expanded state, it would grow and hold a variety of subcomponents. This way, users could access the most common actions and content very quickly.
In the example below, a regular Live TV tile would only allow users to switch to the last channel. With the new Live Tile, users could quickly switch to any recent or favorite channel directly in the home panel.
In the UI front, we also got a big redesign. The new flat style brought a new color scheme, icon style, and typography. The status bar was also updated with the new directions. All of these enhancements came together to create a unique and streamlined TV UI.
Vidaa 6 (2018): AI and Voice Powered
This was another big step forward to the product because we were bringing two large and fairly new capabilities at once. Â This demanded a lot of effort from the design team.
Research
Because AI and Voice were quite new to the team, again, we jumped into research mode. Mine included reading books and articles, watching online presentations and user reviews, and also trying myself a bunch of AI and voice-related products. My results and personal notes were shared with the team and served as food for thought and inspiration:
Design Loop and UX Process
In order to generate and try new ideas, we followed a standard UX process loop, consisting of the steps below:
Results
Some of my concepts were voted, validated, and ended up being part of the product proposal. Below are three of them:
Feature 01: Action Clouds
The action clouds were similar to tag clouds, commonly found on the web. But, in this case, they would help users to know and understand which functionalities were available via voice (a common problem) without cramming the screen.Â
Feature 02: Voice Shortcuts
This was also a solution to common problems VUI we found along the way. Sometimes, the labels can be long (so it takes precious time to say), or ambiguous (if more than one elements share similar names), or if the user doesn't know how to call something. By providing a voice shortcut, the users will have an extra alternative to quickly select what they want.
Comps (covering action clouds and voice shortcuts)
Feature 3: Wake up
This was heavy on the AI side. In some situations, when the TV is in sleep mode (like in the morning, when a user enters the living room), the TV would hint some useful content and would turn on if it detects the user is interested.
AI Content Directions
In the process, we also developed directions on how the system and AI should be integrated to provide a better user experience:Â
#1Â Aggregate information from different sources if that makes sense from a human perspective.
Example: The card that shows the girlfriend mixes location information with a todo list item. A connection that real people do.
Example: The card that shows the girlfriend mixes location information with a todo list item. A connection that real people do.
#2Â Take advantage of the big screen and use AI to improve provide engaging visuals
In many situations, the large TV screen makes the AI experience better. Use contextual photos, visuals and images to improve engagement.Â
In many situations, the large TV screen makes the AI experience better. Use contextual photos, visuals and images to improve engagement.Â
#3 Grab content from Social Networks and the Internet
Example: SUP suggestion is using the photo from the last time the user did the same activityÂ
Example: SUP suggestion is using the photo from the last time the user did the same activityÂ
#4 AI should improve the graphics,
Example: in the samples, the illustration colours are harmonic to the screen background color.
Example: in the samples, the illustration colours are harmonic to the screen background color.
#5 Advertisement should be contextual
They should be contextual and helpful to the user. This will also increase the engagement.
They should be contextual and helpful to the user. This will also increase the engagement.
UI Results and Prototypes:​​​​​​​
