April 12, 2017 · DRAFT
BEFORE ⟺ AFTER
Query formulation (Q.F.), in general, is the nomenclature for the process of retrieving information from a system. So, technically, when you go to the library and ask the librarian to show you where all the Eva Hesse books are, you have just successfully formulated a query—the old-school way. Or, consider a book’s index or table of contents. Both are tools to help people navigate a large corpus of information effectively, enabling readers to get from Point A to B. People designing search experiences are focussed on easing this tension as well by providing relevant suggestions with accessible feedback in order for people to reach the ideal destination.
It’s worth noting that in our office, “QF” and “Auto-suggest” are routinely used interchangeably, where in fact, auto-suggest is a tool to make it easier to formulate queries—like the librarian.
First things first, design a new logo for the team. The positive-reverse magnifying glass, or spy glass, not only cut a mold for a "C," but the circle in the center denotes "core."
After another organizational re-shuffling, I landed on the Core Search design team. This team was responsible for the algorithmic results, ads, global headers and footers, overall framework for the results page, and query formulation—basically everything except for the structured data and instant answers. The product team for QF was also in flux—three different product managers in a month and the development team was shifting from the London office to Bellevue.
As the new design lead, I inherited an existing backlog of items—with limited context. Initially, the two most important items were:
1a. Google: Zero input
1b. Proposed: Zero input
2. Proposed: Inline scope controls
After checking off a few items on said backlog, I bought myself some time to investigate and get a better understanding of the behavior and processes working under the hood. My initial revelation was that many of us had mental models that QF was a single canvas with a few states. And, sure, maybe I’m splitting semantic hairs, but what became clear to me was that formulating queries was a collection of many, oftentimes fleeting, canvases. There are, indeed, a few canonical states worthy of singling out and giving proper names to:
Bing Query formulation user flow
The other realization I had, which wasn’t really that actionable but fascinating nonetheless, was that all of these tiny pieces that fit into this experience were atomic representations of individual results pages. So, every suggestion, trending news story, misspelled or incomplete query—anything in that search box was going to be translated into a results page. So, it was critical we do everything possible to help people come up with high-fidelity queries.
Atomic elements of query formulation
I’m extremely grateful that I had a manager who afforded me the support and operational space to dig deeper than what was originally asked of our team. Taking a bit more time upfront to build a product narrative paid off big time for me, the team, the product, and the company—both in exceeding company monetization goals as well as crafting useful and engaging experiences for people who used our search engine. She deserves a lot of credit for this kind of leadership and direction.
Once I understood the space better, I dug deeper into the framework. Historically, this part of the product didn’t have a dedicated designer and got bounced around the studio or was updated by the developers. There was no existing source file, so I took a lot of screenshots and inspected a lot of code on different devices. By the way, I love constructing my own source files as it always seems to provide good insight into the structure. In any case, there were a lot of general design principles that I knew would bring this thing back to life. I began to think of this effort as a Baseline UX, fortifying the foundation so the team would have a stronger source to build onto:
The readability of any text can be impacted by a number of factors. Consider the wayfinding sign below. Not only is there semantic tension regarding the proximity of the names of these places, but there’s also multiple places to look for the directional arrows, which further complicates the sign.
Each one of the following rows represents individual experiments we ran in order to validate with data that these design principles were indeed helping people read the list efficiently. The left column is the control, the right is the treatment (which ended up shipping in the product).
BEFORE ⟺ AFTER
The prefix, in this case, “new y,” was styled as a lighter grey (#666) and a normal weight (400). The hit-highlighting (the other part of the suggestion) was pure black (#000) and Semibold (500), which only rendered correctly in PC environments due to Segoe UI font availability.
With the treatment, we used a single color, #444. With hit-highlighting, we used a higher contrast font-weight which also rendered the same way across all platforms—bold/600.
BEFORE ⟺ AFTER
We all think we want more choices, but in this case, it takes longer to process and tends to project a little less intelligence with the repetition of the prefix.
After analyzing the data, we found most people were selecting the top 3–4 suggestions most of the time, with the latter suggestions getting very little engagement. Having fewer suggestions made it easier and quicker to parse, as well as good at signaling a re-query in the case of no good suggestions.
BEFORE ⟺ AFTER
Depending on the code—whether it’s leading, list item height, line-height, etc—the tight vertical spacing makes it more difficult to scan or read. It also makes it a difficult target to hit on touch-based interfaces.
My hypothesis was to go with a 40-pixel height since the search box was the same height. But after testing several treatments we discovered that a 36-pixel height was the sweet spot.
Early schematic of Baseline UX
The Visual Systems team was also working on a brand refresh at the time—rounding corners, introducing shadows, and figuring out how much teal is too much. I ended up partnering closely with this team throughout the Baseline UX initiative. Without the hard work and support from these talented individuals, I couldn’t have accomplished most of this work, and this page would be a lot shorter.
I wanted to influence the typography (size, color, weight, etc.), minimal touch target sizes (40-pixels), and to begin aligning icons based on an underlying wrapper rather than visually aligning each one. As I began to evaluate all three platforms—desktop, tablet, and mobile—I also saw an opportunity to unify how we presented the search box across the board (which also led to taking on the header redesign). It keeps the box familiar across platforms, and it would also set the stage for designing a responsive search experience in the future.
AFTER: Unified, cross-platform search boxes
As I’m figuring these things out and putting it all together, I’m leaning on other groups of designers and researchers for input and validation. Then I find out this project has a new development team and they are in the same building. So, right before the holidays, I share it with the new developer lead. He invites his boss into the room. They’re both smiling at me and I’m getting super excited because I realize this work is actually going to get done!
For the next year, we tested, deployed, and shipped about 95% of the items on my original list. And when I say we, I’m mostly referring to the most bad-assed, talented, hard-working, and motivated dev team I’ve ever worked with at Microsoft!
An array of useful and engaging auto-suggest features
Before the event
During the event
After the event
Suggestions after you previously searched for prada handbags
We began promoting special events by listing the event query with a unique icon. The core principle was to steer people to results pages containing specialized structured data designed by our Answer teams. This featurette ended up helping showcase a lot of the outstanding work from the Instant Answer teams—everything from Sports to Entertainment and more.
This example shows a sample of which events we covered. Highlighted is the click-through experience of the Emmys result page with a custom carousel.
This was an easter egg designed for pure delight. This particular one celebrates various Pride parades around the world. We targeted a whitelist of queries to light up a custom QF experience. As you type for one of the queries, like pride parades, the auto-suggest menu changed to the colors of the Pride flag. Our team’s general directive was to never get in the way of anyone’s search. But this was an exception to the rule and our feature was well-received company-wide. Most importantly, a lot of our fans really seemed to love it as well.
We also did this for Dota2 The International.
Deleting search history
Saving for later and/or Feedback