Sneak Peek: We redesigned the pre-installed Surface Maps app to make it an open platform which connects users and diversified data source.
Name: PUUUSH
Type: App Redesign
Duration: 3 Weeks
Host: Microsoft
Team
Leo Han
Winni Liu
My Role
UX Designer
UX Methods
Contextual Inquiry
Brainstorming
Persona
Storytelling
Affinity Diagram
Information Architecture
Wireframing
Hi-fidelity Prototyping
Tools
Paper & Pencil
Axure RP
Illustrator
Photoshop
Problem Space
Microsoft ImagineCup UX Challenge is a competition that encourages students all over the world to create excellent user experience for our new world of touch-centric devices.
As new users to Surface, the three people on our team had no idea what our design target would be. After a quick research on UX Guidelines for Windows, we had a basic idea what kind of UX we wanted to create and the visual standard that comes with it.
In order to better utilize the UX Guidelines, we decided to redesign a app that’s pre-installed in Surface. We thought these apps are the first batch of apps that a user sees right after he/she purchases the physical product. If these apps’ user experience are good enough, people would want more for Windows,
After a 3-day long selection process, we decided to choose Surface Maps App as our target. Maps, as one of the most important user entry to Microsoft, it is taking more and more tasks, far more than showing topographic information.
However, the more features that Maps has, the more data storage it needs, not to mention that the computing speed will be slower, which affects the users’ experience largely. It is a good thing that Maps can do lot now. However, since it is not customized, some features may be perfect for some users but excessive to others.
We aimed at designing an open platform with high functionality yet large customization freedom space, which connects the users and the data sources closely, so that everyone is happy.
Research
When it comes to redesign of an existing application, we thought the best choice to do the user research was Contextual Inquiry.
What Is Contextual Inquiry?
Contextual inquiry (CI) is a user-centered design (UCD) ethnographic research method, part of the Contextual Design methodology. A contextual inquiry interview is usually structured as an interaction in which the researcher watches the user do their normal activities and discusses what they see with the user.
Contextual inquiry defines four principles to guide the interaction:
- Context—Interviews are conducted in the user’s actual workplace. The researcher watches users do their own work tasks and discusses any artifacts they generate or use with them. In addition, the researcher gathers detailed re-tellings of specific past events when they are relevant to the project focus.
- Partnership—User and researcher collaborate to understand the user’s work. The interview alternates between observing the user as they work and discussing what the user did and why.
- Interpretation—The researcher shares their interpretations and insights with the user during the interview. The user may expand or correct the researcher’s understanding.
- Focus—The researcher steers the interaction towards topics which are relevant to the team’s scope.
Contextual inquiry offers the following advantages over other customer research methods:
- The open-ended nature of the interaction makes it possible to reveal tacit knowledge, knowledge about their own work process that users themselves are not consciously aware of. Tacit knowledge has traditionally been very hard for researchers to uncover.
- The information produced by contextual inquiry is highly reliable. Surveys and questionnaires assume the questions they include are important. Traditional usability tests assume the tasks the user is asked to perform are relevant. Contextual inquiries focus on the work users need to accomplish, done their way—so it is always relevant to the user. And because it’s their own work, the users are more committed to it than they would be to a sample task.
- The information produced by contextual inquiry is highly detailed. Marketing methods such as surveys produce high-level information but not the detailed work practice data needed to design products. It is very difficult to get this level of detail any other way.
- Contextual inquiry is a very flexible technique. Contextual inquiries have been conducted in homes, offices, operating theaters, automobiles, factory floors, construction sites, maintenance tunnels, and chip fabrication labs, among many other places.
| Preliminary Research
We reviewed 30+ articles about Surface UX, reviewed more than 300 social media discussion threads about Maps, talked to around 10 people about their experience with Surface. After this preliminary research, we decided to conduct a guerrilla research using a task script to gain a deeper understanding of the user experience issues with Maps.
| Task Script
After identifying the main user group of Surface, correspondingly, we designed a task script that is closely related to typical user life for our participants to perform with Maps. To help us improve the user experience of the current version and find the gaps between Maps and user groups’ actual needs, participants will fulfill the tasks one by one in one Contextual Inquiry session. We also tried to cover as many features as possible so that we could have a comprehensive diagnosis of the product.
Here is the script:
You are an international student. You have just arrived at Pittsburgh. Your first day here starts like this:
- After you got off the plane and claimed you luggage, you and your friend try to find a public transportation line that can take you to your school’s registration office.
- Go to the car-rental center to rent a car ( you only know that the name of the company is “Enderprise” but you don’t know where it is. You need to find out the place and its contact information, give them a call to make sure that they have cars available and then schedule an appointment.
- Go to the car-rental center, load the car, and then find a hotel to stay for tonight.
- Try to use the map to help you to drive to the place you are staying.
- Go to the place, settle down everything, after a refreshing nap, you want to have some fun. Look for attractions that are near you.
- You started your computer, you found an interesting landmark 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 it is. Then you turn on your tablet, to see if you can find the same place on the portable device so that you can go there with its navigation.
- After your little trip to the landmark, you are hungry. Go to a restaurant.
- After your meal, you liked the food. You would like to save the place in your tablet so that you can go there again in the future.
| Interview & Data Synthesis
We Interviewed 8 users in total. During the Contextual Inquiry sessions and the follow-up interviews, we took notes. These notes include usability breakdowns, user behaviors, interaction issues, and tech problems. As a result, we had over 120 pieces of notes. We walked them through as a team, then used Affinity Diagram to solidify the research data.
Details:
| Ideation
After the walk-through of all research data, we started ideation phase.
We had more than 15 features that we wanted to address in the redesgin. We used matrix analysis for all of them. During our multiple waves of refining, we reached a concrete idea – to make Maps not only a map app, but also a platform for 3rd party plugins.
Design
| Design Principles
In order to address all the issues we detected, we made a design principle to guide us through the design phase.
| Information Architecture
To visualize our idea, we made the information architecture.
| Wireframes
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.
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.
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!
| Visualized Navigation
| Persona & Story Board
The Work
| Hi-fi Prototypes
Home
Search
Direction
Map Store
Downloading
Package & Edit
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.
Although we did change a lot in terms of user interactions, we didn’t change too much on design languages. This was because we didn’t want to break the overall visual look of the pre-installed app on Surface, as guided by the Microsoft UX Guidelines.
| UI Specs
What the Judge Say
Judge Feedback #1
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.
Judge Feedback #2
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.
Growth & Introspection
Kill limitations.
At first we were not able to experience a Surface, so we tried every way we could to obtain one – in the end we were able to borrow one from one very kind professor for a limited time. Thanks to him, we were able to do the project.
Be responsible for your own work.
When it comes to work together, the internal file style is important. For example, some people may turn in a psd file without any organization, like grouping or layering. This will cost next person some amount of time do git it done. Being able to be responsible for my own work will raise the work efficiency.
If I had more time,
I would work deeper on the idea itself – how to integrate so much resource, how to corporate with other organizations, how to make the new Maps special?
Also, a better visual design would be my focus. Some icons are not in the same style. Some icons are not simple enough. Some are not using geometric shapes.
