CHALLENGES

The project’s majority of development resources were designated to do text-to-speech research and bug fixing, so the design must have minimal change on the UI.

THE PROCESS

Findings and Project Scope

MapQuest 4 Mobile for Blackberry was the first mobile application. After its first release in 2003, MapQuest 4 Mobile hasn’t had any UI improvement because the focus was set to make the application available on most mobile devices. While the focus still the same, the team also desires to have some UI enhancements not only to provide a better flow and user experience, but also to improve the responsiveness of the application itself, including reducing the application download time.

To familiarize myself and have a better understanding of the application works, I sketched out the major flows of the application: map, directions, search, traffic, my places, help and exit. Because the team also has responsibility to deliver this application to new devices, the design cannot add complexity to the current code, so the focus was to find clunkiness and inefficiency of the current flow and structure.

The Universal Layout

The first thing to refine is the layout. It involves heavy use of graphic elements, which affects the file size of the application. The layout also incorporates different positions: some are left aligned and some are centered, which makes it somewhat hard to read.

The new layout incorporates less graphic elements, all buttons are now using a less rounded corner, using repeated background and also the elements are all left aligned, reducing the need for special code treatment.

The carousel was also a problem. It wasn’t really scalable for smaller device because it was designed originally just for Blackberry phones. This problem was solved by a simple business rule to display different number of icons based on the width of the display:

• For displays with width less than 240 px, display a set of 3 small icons
• For displays with width less between 240 px and 320 px, display a set of 5 medium icons
• For displays with width more than 320 px, display a set of 5 large icons

Search Results on Map View

When displaying search results on map, sometimes the place icons are stacked on top of each other due to close proximities between each other – this situation is called search cluster. In the earlier design, search cluster is presented by stacking up multiple info bubbles (seen in the “Before” picture below). At the bottom of the map, there’s also instructions to educate users to press any key from 1-9 to view each info bubble. The screen looks cluttered with so many floating graphic elements.

To reduce the clutter, the floating info bubble was replaced with a static panel anchored on the top of the map. This panel is semi-transparent, allowing users to see the map underneath it. This panel also have additional information when user selects a business within a search cluster (seen in the “After” picture below). This design provides scalability to display the search cluster properly compared to the previous version where it could only display a cluster of 2 at a time. For Blackberry phones with a dedicated menu button, the instruction panel at the bottom was removed completely. For other phones, it was replaced with a much simpler menu bar allowing users to quickly toggle to “List view” or open up the “Menu” for more options.

Displaying Maneuvers on Map View

In addition to the similar issue of clutter as mentioned above, displaying maneuver detail in an info bubble not only required custom code, but also it’s not scalable to display a long maneuver instruction. Identical solution was applied to solve this problem, making the application more lightweight in size and processing time.

The Result

With these small enhancements, the file size was successfully reduced – allowing users to download the application in much shorter time. The removal of graphic elements that require custom code also improve the quality of the code itself and improve processing time. The layout is now also more scalable and applicable to various screen sizes.