Jen Pan|

Menu

Microsoft, Bing Search Application

The Bing search app project was a large cross functional, multi-featured venture to improve and experiment with user-focused improvements. I contributed design direction, collaboration, individual exploration and production throughout for launch to the public in 2015.

The goal of the Bing search app was to create a continuous and fluid flow throughout and between features in the app and beyond.

Our team ensured the visual language and system adhered to our standard UI patterns and displayed clear hierarchy using color, scale, spacing, and reducing down to the simplest elements.

Design manager
2016
Designer, Organizer, Intermediary, Production, Reviewer, Presenter
Visual system definitions, UI patterns, Component definitions
Collaborative, trustworthy, respectful, engaged, holistic thinking, open mindset

BING SEARCH EXPERIENCE ACROSS PLATFORMS
This is a future look at the display as implementation was in process.

OLD BING APPLICATION EXPERIENCE
As seen in the samples, the layout, hierarchy, and visuals were outdated and not optimal for our current user.

NEW BING MOBILE APP EXPERIENCE
Final iOS Bing mobile app homepage


PRODUCT DESIGN LIFE CYCLE OVERVIEW

Once we worked through the business and user goals, time was spent collectively working through early research phases comparing competitor layouts, components, look and feel, etc.,.

We reviewed and prioritized the stronger patterns that align with Bing brand and UX principles. We all then pitched in to brainstorm, organize, and sketch ideas for the focused feature area flow and wireframes for the early features.

Following many rounds of reviews with cross functional teams, we then built and analyzed low and high fidelity comps to then prototype and test. Several rounds of testing included general cognitive walk throughs, user success and feedback in basic scenario flows and ability to quickly search and explore.

PAGE LEVEL FLOWS
Analysis was put into not only the flow of scenarios from top down, but how we could create flexible and scalable components and elements using different card sizes, trays, and other re-usable elements.

HOMEPAGE WIREFRAME EARLY OPTIONS
Looked at variations on interaction model navigation as well as hierarchy and priority of initial search button versus surfacing other categories in difference explore components.

HIGH FIDELITY HOMEPAGE EARLY OPTIONS
Once the basic framework and priority were agreed upon around search and categories, more exploration was put into the location and arrangement of the prime spyglass, the entity categories, and card visuals and behaviors.

HIGH FIDELITY HOMEPAGE AND NEWS
Following reviews with cross functional teams on MVP feature, component, and styling items we could execute, this is the final version of the search (spyglass) placement and hierarchy, placement and visuals for entity category slider navigation, and the card system which now displays daily top news. As the rich visual background is a key brand component for Bing to inspire users, an exploratory mechanism was prototyped and refined for launch.

SEARCH WIREFRAME
The next level of searching for the user required looking at various options for surfacing the basic info users would need to quickly get to the information with the optimal amount of information.

RESULTS WIREFRAME LEVEL 2
Exploring various layouts and hierarchy for the required set of information for each entity item. The priority includes keeping access to search, highlighting the inspirational imagery while also giving access to the information users most want around that entity.

VISUAL AND LAYOUT EXPLORATIONS
Looking at the hero image component sizing, behavior, visual overlay, as well as title, secondary text, and actions for entity cards.

LAYOUT DENSITY
Explorations on card content density for various card types. A/B testing optimal grid layouts.

COLOR EXPLORATIONS
Brand and standard search color for titles, links, copy etc., were explored and tested.

SPACING AND TOUCH TARGETS
Studies examining card and item spacing and touch targets were prototypes and tested to ensure optimal experience.

STYLE TOOLKIT
Toolkit compiling tested colors and fonts used throughout the Bing app

COMPONENT TOOLKIT
Toolkit compiling control components and image specs