Bing Video Framework
Creating a Responsive Video Framework
Previous video prod
BING VIDEOS
Bing Videos 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
ANALYSIS
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?
LEVERING BING.COM FEATURES & PATTERNS
Can we leverage features our users are familiar on other verticals (images for example) for our responsive video experience?
INNITIAL FRAMEWORK EXPLORATIONS
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 button to view video
PROGRESSIVE VRP ITERATIONS - press play button to view video
REDLINES - press play button 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.
FINAL SCREENS
VIDEO RESULTS PAGE
Mobile
Breakpoints
VIDEO DETAIL PAGE
Mobile
breakpoints
CONCLUSION
Overall metrics gain with unique users and videos seen increasing by 6.29% on tablet.
Strong gain on key metrics like unique sessions and users (+ 3.43% ), videos seen (+16.21%) and direct search queries (+1.28%).
No regressions on time to load pages.