Work review: Maps

To attend the UX challenge from Microsoft, I’ve built up a team with two amazing designers from CMU, Heng(Linda) Xu and Wenzhu Liu, to redesign the Maps app of Windows 8. Fortunately, our team, “PUUUSH”, did a great job and won the Innovation Honorable Mentions. This story will introduce the process of our work and You are welcome to leave any comment and suggestion for me.

Overview


With the popularity of Internet and mobile devices, more and more Apps have been designed to help people enjoy their life and explore the world. As one of the important entries of user traffic, Maps app has to take more and more tasks. I cannot just be a navigation tool, but also an assistant to help the user explore the world. However, excessive functions make Maps hard to use. Furthermore, not everyone need these extra functions.

To solve this problem and improve the user experience, our group redesigned the Maps App of Windows system and made it not only be a map, but also a platform.

User Research


To help us improve the user experience of the current version and find the gap between the maps app and user demand, our group have designed a task script for some user groups and did the contextual inquiry.

It follows three principles:

  • Considering the user interaction scenarios
  • Meet the user demand
  • Cover as many as functions

User Test Script

You are an international student, now you just arrived at Pittsburgh. Your first day here starts like this:

  1. When you get off the plane and claim you luggage, you and your friend try to find a public transportation line that can take you guys to school’s registration office, because you are not in good financial condition.
  2. Go to the car-rental center to rent a car ( you only know that the name of the company is “enterprise” but you don’t know where it is. You need to find out the place and its number, give them a call to make sure that they have cars available and then schedule an appointment.
  3. Load the car, and then try to find a hotel to stay for tonight.
  4. Try to use the map to drive it to the place you are staying.
  5. Go to the place, settle down everything, look for attractions that are near you.
  6. You start your computer, you found an interesting architecture on the map ( it is actually the Cathedral of Learning, a place of Pittsburgh ), you are interested in it, and would like to know what is that. Then you turn on your tablet, to see if you can find the same place by any means.
  7. You go to a restaurant, you like the food. You would like to save it in your tablet so that you can go there in the future.

Affinity Diagram

We obtained hundreds of observation notes from the above contextual inquiry. These notes included user interaction process, thoughts, attitudes, comments, etc.. Then we analyzed the result by the research method of affinity diagramming.

Affinity Diagram Step 1
Affinity Diagram Step 2
Affinity Diagram Step 3

From walking through the whole affinity diagram in the team, we generated a brilliant solution to improve the user experience of the map app.

Purpose

Information Architecture


Based on the user research above, we designed new information architecture for Maps. The main concept of this redesign version is customization, using a plug-in store organizes extra features.

Information Architecture

Storyboard


When designing this new concept, we considered several usage scenarios and using a persona to keep everything done.

Wireframe


Here is some Lo-fi prototypes, which can help us rapid organize our design and make sure the usability and roadmap of the whole app have no big error.

Map store

The lo-fi prototype above is the map store we designed. Please notice the right bottom corner, we also considered using a good interaction method for a user to download app or plug-in from the store. The user can use their finger to click any app or package, then drag to the bottom banner to download it. The bottom banner is followed by Windows 8 design style.

Furthermore, we were trying to introduce a new concept in map store, which is the package. Considering different usage scenarios, we thought that users may need more than one related apps to fit their specific demand at that time. So we designed the packages, which is an app combo based on different scenarios, such as travel and gourmet.

Package

Also, we consider the interaction method of a package. You can see the right bottom corner from the picture above. We use the group to divided package and other apps. When user clicks the package icon, such as “Travel”, the apps of this package will slide from left to right with a slight line to distinguish with other apps.

App description
Delete

When users back home from travel, they don’t need those travel-related apps anymore. One click to delete all of those apps seems a good idea.

After you did that, the basic and simplest Maps came back!

Visual Target


Here is some final Hi-Fi prototypes of our new Maps for Windows 8.

Map store
Navigation
Download
Footprint

The “Footprint” picture showed an app we designed for travel, which can record your travel locations as several footprints. Users can upload pictures based on locations and check them from Maps directly.

Package

The “Package” picture showed some ideas about how to control app inside the package. We designed three options: disable, delete and detail, which is a kind of shortcut method for users. The design style also followed win8's principle.

Design Specifications


Final words


This is a challenge with only several restrictions, which is also the hardest one. Again, thanks to my teammates Heng Xu and Wenzhu Liu. I’ve learnd so much from you about how to design a good app and how to digest the user’s demand. It’s so proud for me to leading this team. Thanks!

You are welcome to leave any comment and suggestion for me. Hope to learn from everyone.

Judge Feedback


Puuush is a pleasant application for users to use for daily travel. The proposal presents a clear and direct illustration of how the application would work. It is obvious that Puuush successfully integrates many useful and handy features, such as “Meet” feature, suggestions about nearby, footprint feature, etc., from other existing applications and makes it easier for users. One of the challenges for Puuush is how to compete with so many other similar applications: is it through the ease of usage, or the presentation of UI, or the large amount of users so that friends would love to join in as well, etc. Another one is where to collect so much detailed information about every city that the users may be at. Is it through the integration of other platforms, such as Bing map, yelp reviews, etc.? The quality of information will be a key factor of the user experience for Puuush.


First of all, congratulations on your success in the ImagineCup competition.

Your project has a very strong narrative and you should build on this outstanding characteristic. Being able to tell a story your users can relate to, is a key advantage. Since an out-of-the-box map app is not replaced or enhanced by many users right away, you need to generate text/video content to demonstrate how you enrich a user’s map experience to gain new users, if you are planning to pursue this project idea. It might seem unrelated now, but always proofread your work, so that it reflects the same professionalism and eye for detail that is reflected throughout your work.


If you liked this story please help spread the word by hitting the recommend button below. Thanks!