UX Research & Design
Sneak Peek: We redesigned the pre-installed Surface Maps app to make it an open platform which connects users and diversified data source.
Type: App Redesign
Duration: 3 Weeks
Paper & Pencil
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.
When it comes to redesign of an existing application, we thought the best choice to do the user research was 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:
Contextual inquiry offers the following advantages over other customer research methods:
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.
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:
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.
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.
In order to address all the issues we detected, we made a design principle to guide us through the design phase.
To visualize our idea, we made the information architecture.
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!
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.
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.
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.