Project Summary

Background

With the emerging mobile technology, MapQuest saw this as an opportunity to expand its presence into various mobile platforms, including mobile web.

Objective

Deliver MapQuest.com core features and experience to mobile web platforms, extending its market reach to mobile users .

Challenges

• The layout has to be compatible to all non webkit mobile browsers with minimal custom coding for each platform
• The flow should be somewhat identical to all mobile browsers
• Must have the ability to search along the route without adding much complexity

Outcome

MapQuest.com Web Application has helped MapQuest.com to extend its reach to mobile users by providing the core features, maintaining the same quality of service that MapQuest.com website has to offer.

The Process

Scope and Mobile Browser Support Identification

I collaborated with the mobile development team to conduct initial research on various mobile browser capabilities. From the data we collected, we categorized mobile browsers into two major groups – webkit and non-webkit mobile browsers. This decision was made based on display size, HTML + CSS support and client script support

We reviewed the features on MapQuest.com, considering how different mobile web browsers handle level of interaction that MapQuest required to function properly. Due to limitations in some non-webkit browsers, certain MapQuest.com features would not work as intended. To address this, I suggested narrowing the scope to support only mobile browsers with CSS features.

Cross-Browser Optimization Strategy

To cater to both webkit and non-webkit mobile browsers, I adopted the following approach:

• Simplified and standardized the structure of the site and overall flows.
• Removed some content to reduce clutter and accommodate smaller screen sizes.
• We implemented graceful degradation by offering a richer experience on webkit mobile browsers with client script support, while providing a basic experience on non-webkit browsers that only offer CSS support.

Site Structure and Flows

Form Designs

Business Search

Business Search was a vital feature on MapQuest.com. It plays an important role in the whole experience of mapping and getting directions, generating revenue from business advertisers. For the mobile version, ensuring a seamless search experience is especially crucial, particularly for users with non-webkit mobile browsers.

Our strategy involved blending contextual and relevant content with advertisement spaces to strike a balance between user satisfaction and the business objective of revenue generation. We integrated the Business Search feature into the map and directions result pages, making it convenient for users to find nearby businesses. Additionally, advertiser visibility was enhanced through a sponsored search, showcasing businesses like Starbucks in a random order.

Search Along the Route and Add Location to Route

Search Along the Route presents its own set of challenges. With small-screen devices in mind, we aim to avoid cluttering the screen with information, particularly during long road trips. Additionally, pinpointing the user’s exact location during the journey poses another challenge.

I conducted several brainstorm sessions with the product and development teams, putting together user stories by asking our coworkers and using our own road trip experiences. After we analyzed all the patterns from those experiences and utilizing the maneuvers as the only solid information, we came up with a solution to allow users to choose the area they want to perform a search:

1. Around the starting point
2. Around any of the destinations in the trip
3. Along a specific route. When users opted for a route-based search, they were provided with options to choose the area, marked by maneuvers with a minimum distance of 1 mile on the route (as seen in option 3 in the sketch below).

Add a Business Location to the Route

We also provided the option for users to add a business location from the search results to the existing route. This gave confidence to users that they wouldn’t not lose the route they were currently using. It also provided convenience and helped users continue their journey safely.

Final Thoughts

By concentrating on essential features and ensuring compatibility with supported mobile browsers, we’ve created a robust and creatively designed set of services. This provides a user experience akin to both the MapQuest.com website and the MapQuest mobile application. Our offerings for mobile web browsers include:

1. Map a location
2. Get directions
3. Multi-point routing
4. Find a business
5. Search along the route
6. View traffic conditions
7. Sync with My Places account for saved maps and directions