Insight

Design System

The design system is a collection of reusable user interface components guided by design standards. It helps to ship minimum viable product website features faster and increase the design efficiency as the websites evolve. The components are shared among our Engineers, QA, Publishers, Marketing, and Producers.

Contents:

  • Guideline docmentation; how to use components, information architecture, how to get started, best practices.
  • Components; Forms, layouts, galleries, articles, heroes, navigation.
  • Styleguide and pattern library; typography, grids, colors, iconography.
  • Branding principles; grammer, tone, guidance, voice, interactive states, space specifications, and grid system.
  • Responsive and adaptive on desktop, tablet, and mobile.
  • Accessible that enables people with disabilities such as color blind to interact with the website.

Specifications:

  • Heroes
  • Watch videos, streams, and VOD
  • Covers for Xbox Game Pass, licensing, and more
  • Operations
  • Tour of Duty
  • Character Details
  • Stat Cards
  • Age gates
  • News feed and posts
  • Microcopy and label character count
  • User account
  • Navigation and tab bar
  • Footers

Used on websites (launched):


  • Company: Microsoft, The Coalition

  • Product: Design system

  • Role: Web UX/UI Designer

  • Collaboration: Web Product Owner, Web Producer, and Software Engineers.

  • Deliverables: Design system and guidelines

  • Software tools: Adobe (Xd, Ai, Ps), Microsoft Azure, and Axure RP

  • Date: March 2018 - Present


Heroes

Heroes auto-play trailer on desktop. Still image on tablet and mobile. 1:1 aspect ratio, 2000x2000px, 72 pixels/inch JPEG.

Portrait Safe Zones

Landscape Safe Zones

Age Gates

Entertainment Software Rating Board (ESRB) mature 17+ intense violence, blood, gore, and strong language.

Android

Image to fit Android numeric keypad.

iOS

Image to fit iOS numeric keypad.

Access Restricted

Stat Cards

Encourage players to show off their Stat Card images of their in-game stats to the world on their social platform. Go in-game to customize banners and character skins for your Stat Cards.

Template

HTML 9:16 aspect ratio Stats Cards for Versus, Horde and Escape. Click or tap on Share icon flattens the layers into 4:5 aspect ratio image for social sharing.

Assets

Show off world placements.

Share with the world

HTML 9:16 aspect ratio Stats Cards for Versus, Horde and Escape. Click or tap on Share icon flattens the layers into 4:5 aspect ratio image for social sharing.