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.

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.

COMPARATIVE STUDIES:
Collecting similar products or information type of mobile products to compare layouts

BRAINSTORM COLLECTION AND SKETCHING:
Collecting different navigation patterns and layouts to experiment with hierarchy and priority


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 OPTIONS / EARLY PROTOTYPING
Looked at variations on interaction model navigation as well as hierarchy and priority of initial search button versus surfacing other categories. Worked with prototype designer to create simple prototypes of navigation behaviors.

MID 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.

MID FIDELITY HOMEPAGE WITH NEWS PEAK
Variations on refinement of homepage elements including hierarchy of search spyglass, category slider, and how much of the News cards to peak from the bottom of the screen.

HIGH FIDELITY HOMEPAGE, NEWS, AND PROTOTYPE
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 AND SIMPLE PROTOTYPE
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 AND INTERNAL PAPER PROTOTYPES
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.

HI-FIDELITY RESULTS PAGES
These are three variations of the different type or results layouts for a confident result, deciding between two result types, and an uncertain list of results showing various types.

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

NEW BING MOBILE APP EXPERIENCE
Final iOS Bing mobile app homepage

SUCCESS OF BING MOBILE APP