October 4, 2017

Head’s up, front and center

Global header for mobile and desktop

BEFORE ⟷ AFTER

Over the years and before assuming responsibility for the global header, I had sketched out and proposed a few header designs. Most of these were trying to integrate the search engine into either Office or Microsoft ecosystems. I am not the only person to propose this. From what I can tell it’s been more of a brand story challenge than a design challenge, with a little office politics thrown into the mix.

Microsoft integrated header, 2013

In any case, after working on Query formulation (QF) for a while, I realized how critical the search box in the header was to the overall flow of people kicking off their searches. A resting search box is essentially the first step of formulating a query. After building a case, I asked my boss if I could lead this effort in order to keep these two parts of the product tightly integrated as well as apply the same design principles I was gaining traction on with the QF project. The timing was right, as she said yes and briefed me immediately on upcoming refresh work for the global user controls on desktop.

Microsoft integrated header, 2016

User controls for desktop

Each target—login/account, rewards, and preferences—represented different product teams. There was another team working on notifications as a new feature too. The variation and ordering reflected each team’s singular focus, so I spent a good deal of time with each team to make sure I understood their goals as well as read up on some of their user studies and user feedback. My goal was to make these targets feel more like a unit and make sure the ordering made sense.

Here’s one of many whiteboard sketches of the global user controls with my developer partner, Layek.

Here is a cleaned-up, high-fidelity mockup of how the global user controls relate to the logo and search box.

From top to bottom:

1. Existing production 
2. Odd overall form factor, 16 and 20-pixel icon sizes, solid and outline iconography, irregular spacing, irregular targets, and right-aligned text in the middle of other icons
3. Proposed a nested structure to accommodate content variations while keeping targets the same. This system provided a consistent rhythm and considerably more flexibility if we decided to rearrange the order or adjust all icon sizes.
4. Final composition

Mobile header redesign

The existing mobile header had a few issues. Because the search box was not edge-to-edge, there was a strange transition when the QF menu opened (which is edge-to-edge). 

Putting the logo inside allowed us to have the desired edge-to-edge search box. This design direction was quite controversial at the time. I lobbied quite a bit against this—I felt strongly that we had solved one problem and created two more.

First of all, it just looks odd. Secondly, the logo is a link to the homepage and the target was dangerously close to the query in the search box. People would inevitably mean to re-query and accidentally end up on the homepage. And finally, when people would tap the search box to search, the logo would need to move out of the way in order to show the suggestions which also means the text in the search box you also need to transition to the left. 

There was also a lot of pressure to unify the header with the Bing iOS and Android app, which meant putting a teal/blue/green color field in the background—another design direction I pushed against. 

In the end, we had a few Product Managers who put a lot of hard work into translating the data from the many experiments to both design and development teams—I'm looking at you Bobby and Hariharan.

The end result was pretty buttoned-up, I was very happy with it. I really liked how each row was essentially semantically-pure; scopes on the bottom, search box in the middle, the logo and menu out of the way at the top. At times, the progression of these projects seems too subtle and slow, but the truth is the frequency of experimentation and variety of treatments is fast-paced and extensive. Manish captured the spirit of this methodology quite well in “Designing UX Changes: Strategies to Change the Way You Look at Change.”

A. Existing mobile header

B. Interim mobile header variants

1. Grey background
2. Teal background

C. Final redesigned header states

1. Default, collapsed state
2. Above the fold, expanded state

Gauravi

I also wanted to give a shout-out to Gauravi for her help and hard work in translating these concepts to fit into the tablet work she was focused on with the Visual Systems team.

Final result:

* * *

.... .- ...- . .- -. .. -.-. . -.. .- -.--