ONEPLAYER DESIGN SYSTEM
2023
While working at Office Media Group / Microsoft, I had the great privilege to do extensive design work for the Stream platform. One of the primary tasks of this work was to design and thoroughly document the media playback control, 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 the Figma library, and occasionally received assistance from three other designers.
CAPABILITIES USED
System Design, UI Design, UX Design, Responsive Design, Iconography, Typography, Documentation
MISCELLANEOUS
Work created at Microsoft
CAPABILITIES USED
System Design, UI Design, UX Design, Responsive Design, Iconography, Typography, Documentation
MISCELLANEOUS
Work created at Microsoft
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. There's a lot, so here it goes...
PLAYER CORE
OnePlayer playback mode with layout specs.
OnePlayer playback with points of interest and layout specs.
OnePlayer playback mode with open navigation panel.
Video file playback pre-roll mode for Large breakpoint.
Audio file playback pre-roll mode, with custom background icon, for Large breakpoint.
Player orientation for landscape video.
Player orientation for portrait video.
PLAYBACK CAPTIONS
Base component with interaction menu guidance.
Captions in player, with layout guidance.
NAVIGATION MENU
Base components.
Plugin order and process for inclusion.
Menu over video guidance.
Menu over panel guidance.
Menu over panel guidance for landmarks, keyboarding, and narrator.
NAVIGATION PANEL
Base components and layout guidance.
Menu interactions.
Contextual UI pattern examples.
UI reflow for extra large breakpoint.
SETTINGS MENU
Base components.
Menu UX structure.
Menu visual styling.
Menu contextual examples and UI reflow.
Keyboarding and narrator guidance.
Right to left UI.
MEDIA TRANSPORT CONTROL (MTC)
Base components.
UI reflow.
UI high contrast theming.
Keyboarding and narrator.
MTC TOOLTIPS
Base components.
Contextual use.
Tooltips in OnePlayer context.
KEYBOARD SHORTCUTS MODAL
Base components and UI theming.
Contextual examples and UI reflow guidance.
HELP AND REPORT ISSUE
Entry point.
Panel UI reflow.
Additional panel states and theming.
Keyboarding and narrator.
Contextual example with confirmation message.
ERROR HANDLING
Error UI per Large breakpoint and layout guidance.
Error UI in dark theme, per host app settings.
Right to left error UI.
UI BREAKPOINTS
Target breakpoints by player width, as Figma library components.
16:9 player templates, as Figma library components.