When a user searches for "What is Tom Cruise's height?" or "What's the weather in Seattle?" Bing uses its huge repository of data to find the answer to a user's question, without the user having to search for it. This engine powers not only Bing.com but Windows 10 Smart Search. This called for a need for a design system that could accommodate different data types and scale to different sizes, depending on the device and the context.

The Back Story

Bing had six answer templates for the desktop experience and six for the mobile experience. The templates were inflexible and the design was outdated. Because different answer types require different needs, the templates were rarely used. Everyone started to create custom designs for desktop and mobile, and eventually, the experience became confusing and disjointed. 

 
answers.png

Upending how templates worked

I designed a new system that replaced templates with common modular components. These components allowed designers to swap out parts of the answer with different components, allowing for more flexibility but still maintaining a cohesive design across all answers. This example shows that the answer uses the same top component but different supplementary components.

 

Answers on Bing can appear in three different areas on the desktop: at the top of the search results, in the autosuggest   The system defined how answers would scale on different parts of the page. 

 
answers.png

Here's an example of the weather answer scaling across the different parts of the page.

 

Here are some example of new components that I created.

 

I also designed a system that would scale answers to iPhone, Windows Phone and Windows Smart Search