Translating Bing for the mobile experience 

As a UX designer in the emerging mobile device space, I was a lead designer on the launch of the iPhone app, then I worked on every platform, including Windows Phone, iOS, Android, BlackBerry, feature phones, and mobile web. Then I became the lead designer for Bing Maps and Directions, having previously been the lead for Maps & Directions for Windows Mobile 6. 

Different platforms offer different affordances so the Bing experience must make sense from both the Bing brand and experience and the specific phone OS.

We had a great user research team so we did a lot of prototype testing as well. We discovered that the users were different from Google, less technically savvy and more interested in everyday experiences. Because of these types of users, we developed Entity cards for people, places, and things instead of just a long list of links. 

We needed to design a Swiss Army knife with easily accessible dedicated “blades” for search, shopping, local, maps, etc, when needed without overwhelming the user. It was an exercise in a balance of branding (Image of the Day) with functionality (search box). We needed to distill complexity into a deceptively simple UI that needs no instruction, yet felt more inviting to non-technical users than Google did with its super-minimalist interface.

One of the points I surfaced again and again was that they had a lot of great verticals in their apps, but it was hard for users to find them. During my work as a lead for Bing Mobile Maps, I identified a user need to shortcut deep into one of the many verticals. For example, if I’m running to my bus stop I am not going to open the Bing App, select Maps, enter my start and endpoints, wait for the system to work out all navigation options, and then click Transit. I would have already missed my bus.

I created a proposal for a “one app, many doors” concept in which I analyzed all of the verticals and then grouped them and provided app shortcuts, or back doors, to some of the deeper features, such as Real-Time Transit, Turn-by-Turn Navigation, and third-party partnerships like Open Table. Users could still go into the “front door” of the main Bing app, and they could also reach deep into the app via shortcut icons they could add to their home screen. This idea was very new in 2010. 

Bing Maps

Maps and Directions user flows can be very complex, and the goal is to make it seamless across many tasks. Different platforms offer different affordances so the Bing experience must make sense from both the Bing desktop design direction with the specific flavor of each phone’s OS. I had to advocate many times for users’ expectations of their phones’ UI over a default Bing experience. 

Bing Maps used Microsoft’s Flash-like Silverlight player, rather than web standard Ajax, to perform visual tricks not possible with Ajax. Microsoft’s Photosynth technology could create 3-D landscapes of buildings and hills from 2-D photographs and Bing Maps can morph seamlessly between different views that come from different sets of data, rather than clearing the screen and repainting it as Google Maps does.

I worked on a real-time transit app for iPhone. My favorite way to describe the problem space was to reenact that sort of head-bobbing, weaving-in-your-seat thing you have to do on a bus or subway to try to see out the window if you've reached or missed your stop (I can act it out for you when we meet in person).

The answer? Riders can watch stops pass in real-time, at ease in their seat (or crammed in between tall people with no hope of seeing out the window). We partnered with the UW student who designed and built the impressive One Bus Away app to also design quick-access "where's my bus" features, as well as route and stop information.

Processes and tools I used

Competitive research, contextual interviews, a variety of ad hoc ideation exercises, card sorting, wireframes, Photoshop