ONEPLAYER DESIGN SYSTEM
2023
While working at Office Media Group / Microsoft, I had the great privilege to do extensive design work for the SaaS platform "Stream". One of my primary tasks of this project was to design and thoroughly document the media playback mechanism known as OnePlayer. Given my experience and passion for creating design systems and design documentation, I was responsible for driving this system design effort within our team. I designed all the guidance, set up and published the Figma library, and occasionally received assistance from three other designers within our team.
CAPABILITIES USED
System Design, UI Design, UX Design, Responsive Design, Iconography, Typography, Documentation, Figma
MISCELLANEOUS
Work created at Microsoft
CAPABILITIES USED
System Design, UI Design, UX Design, Responsive Design, Iconography, Typography, Documentation, Figma
MISCELLANEOUS
Work created at Microsoft
bird's eye view
The OnePlayer design system turned out to be a massive document, filled with extensive UI guidance and documentation. Below is a small bird's-eye-preview of some of the sticker-sheets I created for this design toolkit.
The following is a more detailed preview of some of the UI patterns and design documentation which I created for this project.
PLAYER CORE
OnePlayer "playback" mode with layout specs.
OnePlayer playback with points of interest shown and layout specs.
OnePlayer playback mode with open navigation panel. The challenge here was to make the OnePlayer UI and video playback reflow seamlessly while the side panel is open. Menu buttons, icons, and panel pattern were utilized from the Fluent design system.
I designed a set of UI breakpoint guides per Fluent layout guidance, which were published as components to the Figma library for the design team to utilize as consistent guidance.
Video "playback pre-roll" mode for Large breakpoint, with layout guidance.
Audio "playback pre-roll" mode, with custom background icon, for Large breakpoint, with layout guidance.
player ui reflow
Player orientation and UI reflow for landscape video. The playback UI needed to be fully flexible to adapt to any player width, while maintaining the video aspect ratio.
Player orientation and UI reflow for portrait video.
PLAYBACK CAPTIONS
Base components with interaction menu guidance. Colors were set per guidance from the Fluent color library.
Captions in the player for Large breakpoint, with layout guidance.
NAVIGATION MENU
Here's an example of some of the base UI component variations which I designed for the player and published to the Figma library.
Command menu over video with button interaction guidance.
Command menu over side panel with button interaction guidance.
Command menu over side panel guidance for landmarks, keyboarding, and narrator.
NAVIGATION PANEL
Base components and layout guidance, utilizing the Fluent panel, pivot, and command bar UI patterns.
Menu interactions guidance for command bar overflow and search.
Below are contextual UI pattern examples for the navigation panel.
UI reflow for extra large breakpoint.
SETTINGS MENU
Base components documented for guidance and published to the Figma library.
Settings menu UX structure shown for implementation flow.
Settings menu visual styling shown for implementation guidance. Colors and opacities were utilized from the Fluent library.
Settings menu contextual examples and UI reflow shown for implementation guidance. Menu scrolling is enabled at the smallest breakpoints.
Menu keyboarding and narrator guidance.
Right to left UI shown for multi-language support.
MEDIA TRANSPORT CONTROL (MTC)
Base components shown.
MTC UI reflow shown for smallest breakpoint, with examples of button overflow.
UI high contrast theming, with colors utilized from the Fluent library.
Keyboarding and narrator.
MTC TOOLTIPS
Base components shown.
Contextual use of Tooltip components.
Tooltips in OnePlayer context.
KEYBOARD SHORTCUTS MODAL
Base components and UI theming. Panel UI pattern is based on the Modal component from the Fluent library.
Contextual examples of modal within OnePlayer and UI reflow guidance.
HELP AND REPORT ISSUE
Help panel entry point within player.
Help panel UI reflow across small and large breakpoints. Navigational pivots, input field, buttons and text styling are all based on guidance and shared components from Fluent.
Additional Help panel states and theming guidance.
Panel content keyboarding and narrator guidance.
Help panel contextual example with confirmation message shown to demonstrate player reflow when panel is visible.
ERROR HANDLING
Error UI for Large breakpoint, with layout guidance. The UI was constructed by utilizing Fluent buttons and text styling.
Error UI dark theme guidance, per host app settings.
Right to left error UI.
