Microsoft UWP Media Player

DESIGN DIRECTION & UX/UI DESIGN

The Microsoft UWP Media Player was created as a built-in Windows 10 player which allow users to interact with their digital media and control their content. By default, the media transport control provides a touch-friendly and intuitive experience.

The media player is used to view and listen to video and audio. Media playback can be inline (embedded in a page or with a group of other controls) or in a dedicated full-screen view. You can modify the player's button set, change the background of the control bar, and arrange layouts as you see fit.

Defining a control

The current media controls on phone and desktop had different designs but for the initial Windows 10 release, we planned to have one converged design that works on both of these platforms. The primary problems with both models was that they were not customizable in any way. Another issue with the old desktop controls was that they were not touch friendly and was difficult to use with various input methods.

     UX

Bringing it to life

It was not only important to bring a great experience to Windows 10 but also to Xbox and the customers who expected something flawless and great.

 

The UI and experience weren’t just about making it nice. It needed to work well, display the content that was important but also be transient to get out of your way when it wasn’t relevant. Creating a lightweight, feature rich player was key.

There were countless concepts I explored in thinking about how to push the UX/UI in an elegant way that could be signature for Microsoft but not obnoxious.

 

Part of the challenge was in creating signature moments that worked across all devices. While most lent well to Xbox/desktop some became overdone or needed to be down played based on in phone use.

     UI

In addition to thinking of cross device, Xbox snap needed to also be considered as it was a major offering with Xbox at the time. While it looked similar to a phone View, it had special considerations with the amount of UI real estate, use of controller and density of content.

In addition to the content itself in the format of tv series and movies it was also super important to think of UI flexibility in the use cases of live TV and also commercials and how best to incorporate the data that was most relevant.

Thinking of accessibility

Because we live in a world with more than one type of user, it was super important to unsure at a baseline that accessibility was built in. Since early 2013, Microsoft was working to ensure that accessibility was incorporated into all system UI and it was something that to me was a default need and requirement.

 

Once the initial designs were complete it was now the time to apply accessibility to the controls. Due to the time that the media player was being launched and that I and my team were already working on pushing the controls for Xbox And UWP we used this opportunity to work on refining the older Windows 8 version with enhancements to access for all devices like the use of solid lines, new colors, cleanser visual representation and drop shadows for dimension. 

© 2020 by LReed. All rights reserved.