VIZIO SmartCast
Introduction

VIZIO wanted to bring design for their SmartCast platform in-house, and I joined to fill the newly-created postion of Creative Director, Experience Design on the software product team.

My responsibilities were to research, define, and deliver a holistic user experience across SmartCast products, including the SmartCast TV platform and mobile app.
The Process

We created a human-centered design process to drive innovation through customer research; worked closely with third-party vendors to integrate design requirements; aligned software products with corporate branding and industrial design; and collaborated with multiple internal groups, including hardware product management, business development, product marketing, engineering, and sales.
Where We Started

While visually appealing, the details of the user experience proved difficult for customers to understand, and interactions with content were lower than expected.

Testing with users uncovered three top priorities: how the large Hero image related to content in rows below, understanding which item was highlighted, and a clearer hierarchy of what textual information was related to which pieces of content.
Value and Interest

Clarity of focus for the Hero and other content rows improved both usability and monetization by increasing customer attention and interest. This created greatly increased click-through rates and more valuable screen real estate.

This was accomplished by redesigning the highlight style as well as the spacing of imagery across all content rows.
Scrolling Focus
We started by considering how to refine the existing layout with attention to row distances, luminance, and text scale.
From there, a highlight system using a fixed-focus point was developed, where content moved to the highlight and the user always knew where to look. Opacity changes were made to brighten the focus row and increase contrast, and more purposeful spacing was introduced to build a clear hierarchy to let content stand out.
Original
Redesign
Hero Row

At the top of each section is the largest and potentially most valuable imagery: the Hero. User testing showed customers though that because the Hero was behind rows below it, its imagery was somehow related. This misunderstanding of the relationship between the layers of imagery explained the Hero's history of low business performance.

The Hero row was redesigned, with a layered structure which was developed with engineering support to enable different partners to use the same artwork to support a variety of business agreements.

The now open space around it gave it clear hierarchical priority to customers, and proved to be an immediate success by greatly increasing usability and click-through rates.
Original
Redesign
App Row

The app row count was increased (from 8 to 10), the corners of the icons were rounded to give a more familiar and contemporary app look, and the logos of each app partner were optically balanced to one another to create a more cohesive presentation of the entire set of icons.
Typography
A succinct, clear, and consistent typographic hierarchy was developed. This included bolder weight and greater scale contrast between information.
The scale of the title of the focused carousels was increased for better legibility; fonts weights were increased for visual clarity; titles of other carousels were reduced or removed to reduce distraction; and the names of items not in the focus row were removed. Together, this created a more open layout and a less complex presentation of content without reducing the number items or of impressions.
Original
Redesign
Mobile—App Section

In early versions of SmartCast Mobile, apps were mixed in at various locations with content browsing.

The Footer Nav was redesigned, and apps were their own area with a dedicated option. This new app area also gives the ability to create a collection of personal favorites for easy personalization of preferred apps.
Original UX, and New App Section
Mobile—Device Picker

Originally, selecting a device (TV or sound bar) was combined in a long, complex list with adding a new device, where all devices would be shown, regardless of availability or intended action.

The two actions of selecting vs adding were prioritized and separated, and then simplified with visually-accurate images to easily identify a particular TV or device.
Original UX, and New Interaction
Design Results
The culmination of the larger strategy of clarity and a deep attention to the details built a better experience for customers and improved business across all measured areas.
The UI is more open and spacious in feel, less visually complex, has fewer items vying for attention at once, and provided a clear point of focus for users. Together, this increased business results across impressions, click-throughs, and overall customer satisfaction.
Tangible Business Impact
Customer click-through on the Hero increased as much as:
+502%
There was a Net Promoter Score (NPS) year-over-year increase of:
+128%
This change in NPS resulted in customer research showing a change from #7 to:
#2