Smart Search on Windows 8.1

 

Visual + Interaction Design

Information Architecture

User research analysis

Problem:
The Bing search app for Windows 8 was failing to drive query share.

Response:
Design a brand new experience for local and web results from the existing desktop search feature.

Patents: Display Screen with Graphical User InterfaceDisplay Screen with Transitional Graphical User Interface

Sponsor:  Microsoft 

 
Our team collaborated to develop an appropriate information architecture hierarchy all of our different content.

Our team collaborated to develop an appropriate information architecture hierarchy all of our different content.

 
An example of a 'Superhero' search result, which includes richer media first and search content on scroll.

An example of a 'Superhero' search result, which includes richer media first and search content on scroll.

 
Our research sessions showed that we needed to adjust our content hierarchy dramatically depending on the search query.

Our research sessions showed that we needed to adjust our content hierarchy dramatically depending on the search query.

 
An example of a 'Helper' search result, with includes search results up front.

An example of a 'Helper' search result, with includes search results up front.

 
Once our team had the architecture built, we began to adapt our layout for several target resolutions (laptops, tablets, and desktops devices).

Once our team had the architecture built, we began to adapt our layout for several target resolutions (laptops, tablets, and desktops devices).

 
In Windows 8.1, the 'snap' feature allows content to reflow and resize, changing to a vertical scroll.

In Windows 8.1, the 'snap' feature allows content to reflow and resize, changing to a vertical scroll.

 
While challenging for the amount of content, we addressed this issue by scaling our content blocks appropriately.

While challenging for the amount of content, we addressed this issue by scaling our content blocks appropriately.

 
Examples of content scaling in the vertical format at different 'snap' dimensions.

Examples of content scaling in the vertical format at different 'snap' dimensions.