Christopher Loth

Client

Microsoft through Aquent

Categories

Product Design - Mobile - UX/UI

Brief

Develop a directions experience to expand the products hosted within Bing mobile.

Approach

This was my first project with Microsoft and my goal was to craft this experience efficiently while using the company's brand and user guidelines. This product was meant to ship quickly, so I dove right in.

My scope of work included developing user task flows, compositions, and prototypes for development.

Background:

Bing originated as a search engine yet has become so much more over the past few years. In fact, its global market share has risen from just 3.99% up to 8.88%. Expanding into weather, AI, finances, news, and more, its goal is to provide an all encompassing end to end experience for users.

Phase 1: Task flows

Before starting the process of developing the whole experience, I spent time conducting research on successful mobile navigation applications. Ranging from Google Maps, Waze, Mapquest, and Apple Maps, I studied which interactions and options were available to accomplish goals. I then referenced the specification and isolated specific tasks that users may want to accomplish while using our application. Creating these simple yet effective flows allowed me to see where potential redundancies or pain points occur.

get directions.png

public transportation.png

where to board pub trans.png

Avoid highways.png

change map style.png

location enabling.png

Phase 2: User flow

By combining task flows into a full user flow, I was able to communicate how these moving pieces will all work together while prioritizing the main goal of getting the user directions.

PDF

Phase 3: Composition flows

Once a user flow was created, I went into developing compositions to fit specific task flows and scenarios. Throughout this process, visuals and elements were refined until the designs received the all good to move ahead.

Below, I pulled out a few of the core flows which include notes and specs for team reviews.

Phase 4: Final Compositions

Post-review, I dove deep into making each comp pixel perfect using Microsoft's visual and accessibility guidelines. Although there was an established asset library, I had to make additional components to fit the specific needs of our product.

Phase 5: Prototype

With the visual design complete, it was time to test basic functionality with a comprehensive prototype. These can get busy quickly so while building prototypes, I take time to layout interactions in an organized, logical manner.

Conclusion:

I would have loved to continue building out this experience and see the metrics, yet my focus switched gears to another project. And although this was a relatively quick build, I enjoyed working on part of such a large ecosystem. Directions was shipped shortly after my work and is currently a part of the “nearby” XP.