Project: VIDAA U3 Smart TV Launcher System Design
Client: Hisense / Sharp
My Role: Lead Product Interaction Designer
Overview
In June 2018, Hisense approached Jamdeo with a request to design a new Launcher to be deployed on new smart TVs to be sold under the Sharp brand as well as an OTA update to older Smart TVs running the VIDAA U system.
With the guidance of our AVP of product design, I was asked to take the lead on defining the interaction design of this project and at a later stage another interaction designer from my team joined the project.
Building a Strategy
I kicked off my efforts by trying to build a solid strategy. Since previous VIDAA U(s) have been designed by some of my colleagues before I joined the team, I set up a meeting with the key designers to inquire about the rationale behind some of the decisions that were made. Some legacy functionality was expected to carry through to the new Launcher design, however after assessment and research, It was concluded that keeping the same functionality was not feasible. As you will soon see, that specific functionality had to do with the way users added and edited applications, inputs and channels from their homescreen.
Design Process
I utilized the vast white board real estate we had in the product design area to sketch out all the ideas, show and discuss with others, erase and sketch again, and take approval on my high level thinking from the AVP of product design. Time was tight for this project, so right after that I began formalizing these in design software. I used Sketch for building wireframes and Omnigraffle for IA maps and user flows. Eventually it all came together in the Interaction Design Specification Document. I have broken down the different aspects of the design by showing examples from the IxD below.
Introduction and IA Map
Launcher Main Structure
TV D-pad Focus Movement
Netflix Row API
Home Screen User Flows
Home Screen Edit Mode
Components Design System
Panels Structure and Flow
Adding Apps and Inputs to Home Screen
On previous VIDAA U the home screen consisted of only one row of tiles that contained all the system entry points (applications, inputs, and channels). Back then, the interaction model to edit items in that row consisted of pressing down on the remote's d-pad to enter 'Edit Mode'. With the new design, the home screen consists of three rows on the first page with an option to D-pad down to other content rows on the second page. Hence, a new way for adding and removing items to the Home screen had to be conceived. The approach agreed upon was to let users add and remove items from their individual panels.
Removing Apps and Inputs from Home Screen
Applications Panel
Notifications Sheet
Visual Design Examples
