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, and 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

Microsoft integrated header

2016

In any case, after working on Query formulation 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 QF. 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.

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.

171004-header-controls-wb

Working with my developer partner, Layek, on sketching out the user controls

171004-header-controls
  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. Actually, it was Bobby’s brilliant idea to have the header collapse on load to hide the logo and menu from the first row. This kept the search box front and center—and, frankly, camouflaged the logo.

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 Mittal captured the spirit of this methodology quite well in “Designing UX Changes: Strategies to Change the Way You Look at Change.”

171004-mo-before

Existing mobile header

Interim mobile header variants:

  1. Grey background
  2. Teal background

Final redesigned header states:

  1. Default, collapsed state
  2. Above the fold, expanded state
people-gauravi
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:

171004-after-dtmo

***