top of page
ToNav-tv

Xbox One TV

CONCEPTION & UX/UI DESIGN

Xbox One lets you watch live TV from your HDMI-compatible cable or satellite box, making it easy to switch from games to live TV – all with the sound of your voice, and without having to switch TV inputs. No more multiple remotes, missed multiplayer matches while you’re watching TV, or frustrating delays. Just connect your set top box to your Xbox One and you can watch live TV through your Xbox One.

black-xbox-360-xbox-one-logo-xbox_white.

There was a huge drive for Xbox One to be a media first leader in the console space. With that, Xbox One TV was the first ever TV experience to be native to Xbox under Microsoft and was introduced with the launch of the new Xbox One in 2013. Xbox TV experience played a huge role at launch in achieving the mission with the introduction the TV to the Xbox One core system.

Vesper-MiniEPG.png

Something borrowed, something new 

I was asked in early 2013 to help support the Xbox TV team in designing the initial UI for the new experience when there wasn’t a design team to help. Because there wasn’t already an experience like this native to the system I worked with research and external companies to understand some of the past products offered through Xbox 360 and other TV/Media experiences within Microsoft. From there I worked with PM counterparts to define the features that needed to be incorporated and the rough layout possibilities through numerous whiteboard sessions. â€¨

 

There were numerous concepts and layout designs that I designed and tested to find the right direction and blend. Aside from just thinking through the UI through UX considerations need to be applied to the controller and remote as button mapping was an important component to help users interact with the experience seamlessly.

UI
photo.jpeg
photo2.jpeg
EPG Metadata test-05-05-05.png
EPG Metadata test-05-05-05.png
CONTROLLER MAPPING WITH COMPS SEPA PAGES
CONTROLLER MAPPING WITH COMPS SEPA PAGES
UX CONCEPTS
Oneguide_Tvlistings.png
EPG_panel-ONLY01_0008_pip-below_alt.png
EPG_panel-ONLY01_0006_With-PIPAlt.png
EPG_panel-ONLY01_0002_EPG-breaking-bad.p
EPG_panel-ONLY01_0004_epg-withPIP.png
EPG_panel-ONLY01_0005_EPG-alt.png

For your viewing pleasure

After the initial concepts were created, I continued to work with the newly dedicated design team that was formed for Xbox One. Some of the final UI results were informed and defined by initial concepts that I designed as well as guidance given to the designers. It was a great experience that I was proud to have played a part in helping with both hands on and in support.

XBOXone_EPG.jpg
UI
101315_console_MTV_Mini-guide_2.png
101315_console_MTV_Mini-guide_2.png
091515_console_EPG_1.png
091515_console_EPG_3.png
091515_console_EPG_5.png

The Setup

In addition to being asked to help the new team for Xbox One TV. I was also asked to help create to OOBE experience for TV as I had been already driving the overall OOBE experience for Xbox One all up.ʉ۬

 

The UX flow was an important piece that needed careful consideration to ensure not only that the experience flowed properly but in order to ensure efficiency in the use of existing templates vs net new.

VESPER OOBE MAP IN VESPER + DURANGO OOBE
VESPER OOBE MAP IN VESPER + DURANGO OOBE
UI
VesperOOBE_hero.png

Because consistency was key in the look & feel and layout, I leveraged numerous existing templates that I had created for OOBE all up with a few additional pages and custom photography assets as needed throughout.

OOBE_Vesper_01.png
OOBE_Vesper_02.png
OOBE_Vesper_03.png
OOBE_Vesper_04.png
OOBE_Vesper_05.png
OOBE_Vesper_06.png
OOBE_Vesper_07.png
OOBE_Vesper_08.png
OOBE_Vesper_10.png
OOBE_Vesper_11.png
OOBE_Vesper_12.png
OOBE_Vesper_15.png
OOBE_Vesper_16.png
OOBE_Vesper_17.png
OOBE_Vesper_26.png
OOBE_Vesper_28.png

And the emmy goes to...

In January 2015, during the 66th Annual Technology and Engineering Emmy Awards, Microsoft received an Emmy Award for Television Enhancement Devices, because of Xbox One’s industry-leading all-in-one Live TV, On Demand and media capability viewing experiences.

Xbox-One.jpg
IMG_7098.png

It was a great honor and privilege to get to work on this project. Knowing that all the hard work, time and energy that the team had put into it was seen and rewarded as it was. How amazing!

bottom-padding.png
bottom of page