• Add to Collection
  • About

    About

    Published:
Given the size of Bing, there was a serious challenge to maintain visual and UX cohesion across the site. I led efforts to design a scalable framework that allowed for a varied vision by segment PMs and dev leads, while preserving consistency in interaction and experience for the customer. One focus of this effort centered around multi-item lists – that is, category search answers given to queries with multiple returned entities. For example, "Cast of Deadpool," or "Restaurants near Seattle." 

The effort to "rein in" lists had been a task for some time, but the work I completed was the first of its kind – a comprehensive guide for feature leads backed by stakeholders and management and adopted by answers and entities designers across Bing headquarters.

After an extensive review of the lists already on the site, and working with designers, PMs, and devs to gather current and expected needs, I broke down answer list types into three main display groups, including a new "grid list," and created guidelines for updating and integrating the associated UX throughout Bing. Concurrently to these framework efforts, the visual systems team was working on approvals for updated styles across the entities and answers experience. I worked side-by-side with visual systems to share feature knowledge and get the latest common controls and redlines out to our dev teams.

Some of the work seen here has been shipped, though a full update is still in the pipeline. (Additional work under NDA.)
Multi-item lists before framework overhaul: No visual distinction between segments, not enough flexibility
New list types with a few sample segments
Sample pages and schema from the Multi-Item List Toolkit for small screens (mobile layout)
I worked closely with the PM lead to develop a schema for feature PMs to use when shipping a new list. This was included in the toolkit.
Each list type was broken down to give display and interaction rules
Sample pages from the Multi-Item List Toolkit for large screens (desktop layout)