Vercel Logo

Bing Video Design Kit

2022 - Present

The Bing Design System, while comprehensive, doesn't fully cater to the specific needs of the multimedia team. To bridge this gap, the Video Design Kit was created within the Bing Design System framework. It serves as a customized resource for video design, offering a centralized hub for Multimedia Designers to synchronize and collaborate effectively.

cover image

  • Role

    Initiator and Maintenance Lead

  • Platform

    Web (Desktop & Mobile)

  • Highlights

    Assisted our team in standardizing design practices and established a central hub for video-related assets.

Background

Bing Design System Limitations

For a long time, Bing Design System (BDS) is the only source for crafting new features and refining user experiences. However, the Bing Design System, being a generalized framework, falls short in accommodating the rapid iteration needs specific to video experiences. Moreover, with our team's expansion, the necessity for a centralized repository of video design patterns has become apparent.

In Bing, there are four main canvases where video experience is exposed to users: SERP answer (Search Engine Result Page), VRP (Video Result Page), VDP (Video Detail Page), and Bing Copilot (formerly Bing Chat). Before the Video Design kit was born, all designs were stored separately by different design owners.

File structure

An Independent Figma

As the kit is not designed to be a full-fledged design system, its structure is organized around video experience canvases. Each Figma page corresponds to a specific canvas, with contents under each page organized according to atomic design principles.

Showcase

The kit made for collaboration

an illustration of locked video thumbnail apsect ratio

Locked thumbnail ratios

To preserve the original aspect ratio of video thumbnails, critical for user decision-making, the kit uses the "Ratios" Figma plugin, ensuring responsiveness across different viewport widths.

Standardized grouping

To enhance the usability of the design kit, we've standardized the grouping of design elements based on two principles: 1) prioritizing Auto Layout and 2) applying semantic naming to all layers.