Cortana TV

Problem

For this project we were tasked with creating a voice enabled smart tv experience that contained several design considerations including; accessibility, user privacy, brand guidelines, and a complex series of user tasks

Timeframe

6 weeks at the time of project with 1-2 weeks of revisions

Tools

Figma, Adobe Illustrator, Adobe After Effects, Blender, Octane Render

Role/skills

Individual Project
UXUI, product design, motion design, proto-typing
Research
For me the first part of research for the project was around  figuring out what makes a successful voice based assistant. Understanding this would be key to how I would approach my solution.What problems does a voice assistant solve? What is a voice assistant ill-equipped to solve? What are people’s expectations of a voice assistant? Are the expectations radically different from the capabilities?  What is the current market and what approaches are other’s taking?After some table top research I was able to get a more defined idea of this and was able to boil down the information into 5 key factors.
Key factors that a voice ui is judged by:
  • The ability to understand unique queries.
  • Ability to interconnect/access to user’s existing services and devices.
  • Handling of failstates/impossible requests.
  • Perceived speed in response.
  • User privacy.

Microsoft TV

User Experience/Interface Design, Speculative Design, Product Design, Motion Design.
Smart TV UI
Overall the UI design for the Main TV was dictated by to main motivations. First to make the TV as functional as possible of course. The other main motivator in the visual design was to move the design closer to the Fluent Design System. In my reading of the landscape of current TV UIs they for the most part seemed very homogenous. Given that I opted to stay close to the existing patterns to make sure that it was able to match user’s expectations and mental models. So that meant; organizing content into rows of content tiles and top bar navigation.My next goal involved using fluent design for the UI. While the design resources for fluent are very expansive they did not seem to me as having much coverage for designs with a very large display. I used the UI for xbox as a reference however that seemed somewhat divergent from other versions of Fluent I found in my research
Mobile solution
First and most important question for this aspect is;
Why Design a phone app for a smart TV?
On doing research for how people use smart tvs more and more we expect and prefer to use our smartphones to control our tvs. Further it can provide a much more positive user experience at traditional smart tv pain points such as user sign in or anytime that it is required to enter text. Given that I found it necessary to design a solution that tools this into consideration.

For the design of the app I broke it down into two major use cases. Use case one was interacting with TV for normal use similar to a basic remote, The other use case was managing settings and accounts, which is less frequent but important to offer.

Project Goal

To design a voice enabled Smart TV experience that is considerate of the brand's goals.

Framing the problem

"How might I design a Smart TV that builds trust and accomplishes the brands goals?"

Background

For this project the goal was to design a voice enabled smart TV experience and pitch it. The designed product would be made for Microsoft. The target market was younger early adopting tech enthusiast.

Assignment considerations

  1. Design should use the Fluent Design System
  2. Design for user trust in mind
  3. Include user onboarding flow
  4. Create a video showing and pitching the solution

Research

For me the first part of research for the project was around  figuring out what makes a successful voice based assistant. Understanding this would be key to how I would approach my solution.

What problems does a voice assistant solve? What is a voice assistant ill-equipped to solve? What are people’s expectations of a voice assistant are they radically different from the capabilities?  What is the current market and what approaches are other’s taking?

After some table top research I was able to get a more defined idea of this and was able to boil down the information into the following...

Some common patterns I incorporated into my design were;

  • The ability to understand unique queries.
  • The ability to interconnect/access to user’s existing services and devices.
  • The handling of failstates/impossible requests.
  • The perceived speed in response.
  • Privacy

Ideation

For the ideation phase one area that I found challenging was the aspect of designing for user trust in a voice activated smart device. Thinking about trust I made a few key design decisions...

Key design decisions

Camera and microphone array

Camera and Microphone arrays. In the pursuit of designing for trust I was think of ways that trust could be shown or built in to a device or service. I thought of a rumor that I had read that the small green indicator light was hard wired to the camera on macbooks and that the camera would only be active if the light was on. After looking it up that is evidently only partially true, but the idea of a hardwired solution with a built in indicator interested me.

So I thought what would that look like on a TV? Could I make it more clear or fit better?

So my idea came towards a retractable Camera/Microphone array. When the array is down in the chassis it’s power circuit is physically disconnected from the TV showing and reinforcing a commitment to privacy into the physical interaction of the design.

UI Name Indicators

All portions of the on screen interface have labels indicating them. The format (65” High resolution screen) allows plenty of real-estate as well as flexibility of sizing while maintaining readability depending on distance from the screen.

Connected  home

To address the problems of not using connected home features, I elected to add connected home indicators consisting of icons and text showing devices that are connected. My rational being that having the name and a standing in picture of the device would remind them and “put the words in their mouth” so that they could easily make a quire.

Fail State response

In my initial research as to what made a good voice Ai the ability to handle unique queries was always mentioned as a primary concern.

However when looking at available voice services it seemed as though the fail state question was to an extent a solved problem. When looking at all of the major options an unintelligible query returned a response of “I am sorry I didn’t quite get that” almost verbatim across the platforms.

Given that my solution goes that route however I felt like this would also potentially be a good chance to emphasize the tasks feature.

When faced with  a query that is not able to be parsed the assistant will try to detect key words and search against the library of tasks in the event that it is not able to help with the request.

Iteration

Physical design iteration

I felt that the design could be improved after review, so after reviewing a bit of relevant information on consumer industrial design and other Microsoft products I decided to make a few changes.

First off I decided to incorporate Microsoft’s existing design language into the design, especially considering that this would existing with other devices like the xbox out in the real world.

Second and importantly I decided to make the design serve the goal of designing for trust.
The previous iteration had a lot of harsh hardened edges that were counter productive towards the goal of trust. In commercial product design rounder softer shapes read as more friendly.

The other change was coloration. While the previous charcoal colored design has it’s own appeal it read as a bit intimidating.

The new eggshell color made the design read more like a consumer product that lives in the home.

TV UI Design

Overall the UI design for the Main TV was dictated by to main motivations. First to make the TV as functional as possible, since I would not be able to do testing I would have to rely completely on patterns in other products.

Some common patterns I incorporated into my design were;

  • Top bar navigation with large type
  • Dark Background for comfort while watching at night/creating a theater analog
  • Organizing content into rows of content tiles
  • Top first hierarchy of content tiles, with a Hero show/movie or carousel

The other main motivator in the visual design was to move the design closer to the Fluent Design System. While the design resources for fluent are very expansive they did not seem to me as having much coverage for designs with a very large display. I used the UI for xbox as a reference however that seemed somewhat divergent from other versions of Fluent I found in my research.

Mobile Design/Remote App

For the mobile app I broke the app into three main pages via the tab bar.

I added a remote button that when tapped reveals the standard controls. For ease of one handed use the remote is able to be accessed by sliding in from the right edge and sliding to the right to conceal. I decided to keep both options for accessing the remote since it is a core function of the app and discoverability and ease of one handed use were important to maintain.


Remote experience

Based on my research a point that keep coming up was the difficulty in doing any significant typing on a smart tv.

Given that I tried to give options to manage as much as possible in the app by giving easy options to manage a lot account and privacy features in the app itself.

Contextual modal

For the slide in controls I tried a few variants that did not work in a mobile format and eventually decided to make the menu contextual.

Example of a contextual modal that shows up when a show is being played left.
Also an example of a dial-pad variant for selecting a channel on traditional over the air/cable tv right.

Onboarding flow

I was also tasked with creating an onboarding flow for the Smart TV experience. It was expected to be led by our research.

Sign In

The first task for this project would be sign in. The tasks, make sign in easy, incentivize use of a Microsoft account for those with one already, incentivize creation of a Microsoft account.

Permissions

In this step we have privacy selection. All are checked by default the user can choose to opt out of using the camera, microphone, and analytics.

Connected Home

The third step is connecting the user’s IoT connected home devices. This is a key feature but also particularly hypothetical. Currently for the most part there is not a uniform system to connect and manage across IoT devices.  
Given that after research I found that most devices activate via connection links and the most reasonable way to have the user parse that would have the user enter their links and manage the linking aspect using the given information.

Account Auto Sign-in

The forth step for on-boarding is having the user the option to sign into any services that they would like at that time or sign in later as needed since they would be given an option to skip sign-in to proceed later as they need.

Retrospective

Looking back at this project I enjoyed stepping out of my immediate sphere of reference and other ways to approach.

I found my research to be interesting and illuminating. I have been aware of voice design in the past but the more in depth research really shed light on the subject.

I found the problem itself very challenging. I think that any level of trust can be difficult to establish. For a large company like Microsoft building trust is hard under normal circumstances. But with a voice activated listening device that only makes things more challenging.  

As to the design work and my solution it is hard to evaluate completely since a voice based TV UI is not something that I can really user test. However the parts of the design process that were able to worked through I was happy with the results.

Onboarding
One task flow that was important to design for was the user onboarding flow. This is potentially a large pain point for many users. There are also many important tasks grouped into onboarding have needs that factor in user and brand goals.
Sign in
Allowing sign in via phone or an existing Microsoft account. Both of these options had benefits. The main problem that this is trying to solve is the difficulty of trying to enter in passwords via a remote, so allowing authentication on the user’s phone is preferable if possible. Also with the ubiquity of password management on phones this would also address another pain point of not knowing the exact password used for that service.

Permissions
Establishing the trust was also an important consideration for this project. Towards that goal the stage is designed to ask individual permissions for camera, microphone, and analytics.

Connected home
It was important to establish that the TV can work with smart home devices and give users the option to connect that off the bat.
Designing for privacy
When I first decided that I wanted to design for privacy I thought of how privacy could be shown rather than told. With that I was using zoom on my laptop and I thought about the web-cam light. It only lights up when on as an indicator. Supposedly I had heard that this was a hardware mechanism, and that the same circut ran power for the light and the camera and as such neither could run without the other. I thought that was interesting and thought about if it could be mapped to my solution.
Retrospective
Looking back at this project I enjoyed stepping out of my immediate sphere of reference and other ways to approach.

I found my research to be interesting and illuminating. I have been aware of voice design in the past but the more in depth research really shed light on the subject.

I found the problem itself very challenging. I think that any level of trust can be difficult to establish. For a large company like Microsoft building trust is hard under normal circumstances. But with a voice activated listening device that only makes things more challenging.