If you like what you see and want to work together, get in touch!
Josephh.flynn@gmail.comFor 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.
I was also tasked with creating an onboarding flow for the Smart TV experience. It was expected to be led by our research.
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.
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.
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.
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.
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.
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;
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...
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.
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.
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.
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.
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.
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;
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.
For the mobile app I broke the app into three main pages via the tab bar.
.png)
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.
Project Goal
Framing the problem
