Bing Video Framework

Creating a Responsive Video Framework

Previous video prod

Bing Video

Bing Video is a video search service and part of Microsoft's Bing search engine. The service enables users to search and view videos across various websites.

How can we address feature disparity between the mobile and desktop experience?

Project Overview

Goal

Create a unified responsive design on one code base.

Challenge

There are various feature difference between the desktop video experience and the mobile video experience. Can we explore and implement a responsive video experience with as much feature parity as possible?

Timeline

6 months +

My Role

Work with product managers to clarify business goals
UX wireframes
UI and interaction design
Work closely with development to create a working prototype in tandem with design
Present designs to stakeholders
Align all explorations to the Bing Design System
Work with UX writing team on all UI text inputs to ensure accessibility
Refine designs and export redlines for development
Communicate with development regarding design edits, refinements, and flight checks

Screen Shot 2019-10-28 at 10.32.13 AM.png — **Analysis**

Screen Shot 2019-12-03 at 3.35.56 PM.png

Screen Shot 2019-12-03 at 3.36.26 PM.png

Competitive Analysis

Are there aspects of other video experiences we can learn from and or use to influence our re-design?

Breakpoints

What breakpoints in our current experience will need the most attention from a development stand point?

Leveraging Current Bing.com Features and Patterns

Can we leverage features our users are familiar on other verticals (images for example) for our responsive video experience?

Learn more

Initial Framework Explorations

A Working Prototype

Working side-by-side with development, the overall process was fluid and iterative. Design explorations were progressively implemented and tested for functionality and accessibility via a working coded prototype.

The working prototype was used to showcase design explorations to project management and stakeholders and guide conversations regarding feature prioritization.

Various Tile Layout Explorations (press play to view video)

Screen Shot 2019-12-12 at 6.43.56 PM.png

Screen Shot 2019-12-12 at 6.45.03 PM.png

Screen Shot 2019-12-12 at 6.45.22 PM.png

Progressive Iterations (press play to view video)

Redlines (press play to view video)

Implementation

Once it was time to implement final designs, hand-off to our larger development team went that much smoother thanks to the initial investment in the working prototype.