Microsoft Bing

The main idea behind this personal project was to redesign the existing Bing Search page with a Metro inspired layout. In keeping with Microsoft’s current rebranding and product unification, the goal was to work with a Metro inspired layout while also keeping responsiveness in mind. My design process involved task definition, research & analysis followed by wireframing and layout.

Project Research

METHODS

For this specific project, I used a bunch of techniques like: Content audits Competitor analysisMental models Affinity diagrams. The first step involved understanding the business requirements, task requirements and deconstructing the existing information model. Content audits and heuristic analysis helped me understand and categorize the elements, data, links, functionality and usability related components.

Competitor analysis helped me outline areas of improvement and change. After this I analyzed my findings and built a new information model for the page. At this stage I tried to enhance the workflow and user scenarios with the help of mental models and affinity diagrams.The goal was to have a completely redesigned page that reinforced a user’s mental model with minimum learning required.Affinity diagrams helped in grouping elements like search related, support related and other product related.

INSIGHTS

The design phase started with tackling the larger components like the background first and then coming down to the grid layout and finally individual components like links. For the background I retained the current concept of a background image. Over which I designed a grid layout that holds the page content.The aim was to have the search bar within a user’s foveal vision while the search filters within his peripheral visionto sort of build a obvious and natural navigation scheme.

At the same time I grouped various support links and other product and service links together. The colors for the tiles are derived from the Microsoft logo and are adjusted to work with even gray scale images as backgrounds. Lastly an important design consideration was the responsiveness of the page. Working with a grid layout made things simple for a responsiveness.

Design & Visuals

Early wireframes and sketches.
Visual design for the primary content.
Final visuals with a grayscale background image.
Final visuals with a coloured background image.
Wireframes to layout the content and functionality.
More detailed wireframes.
Early thinking on the adaptive design for devices.
©2017 - Jonathan Pimento