Windows Maps: Filter & Sort

Refined Searching in Windows Maps

Project Context

I was tasked with designing the filter and sorting model for the Windows Maps Application. This would help with the present searching capabilities of the application and would assist in more refined search queries.

This was a 3-month project and I worked with Product Management and Development throughout this process.

Role

Lead Product Design

Primary & Secondary Research
Sketching, UI Design, Prototyping
User Testing, Design Maintenance, Redlining

Process

Despite filtering and sorting mechanics being a common paradigm amongst most searching platforms, I started by quickly doing some research on which platforms matched best with our specific goals, scenarios and technical constraints.

"How does filtering and sorting change with different content and data types?"

I did a comparison of filtering and sorting systems of websites that feature location data. Some of the common themes I found in this analysis:

Price filters were present in all examples.
Filtering and sorting are placed contextually and near the top of the page.
Based on the search query, some display different actions and filter types.

Using this research, I began the design phase with some sketches.

To understand the interaction with applying filters, I created a low-fidelity prototype. I ran this prototype with a few in-house participants, asking them how they interpreted what they saw. I had them think aloud to understand what their mental model. After a few rounds of testing, I took my findings into designing high-fidelity mockups.

In the final design, we added a small section towards the top of the search results with filtering and sorting. Clicking on filter would open a panel that displays filtering options. Clicking on any of these options would apply these filters and would only apply them once the panel is closed. These filters also would change depending on the query (e.g. Cuisine filters for restaurants). Clicking on "Sort" would open a pop-up with sorting options.

Below is a prototype of the filtering happening in effect. Much of the animation and polish did not make it in the final product, but it was an opportunity to test some options in Framer.

Outcome

We were able to add filtering and sorting to the Windows Maps Application. By adding this functionality, we were able to increase the efficiency of searching for locations. We were also able to utilize a data set that was recently enabled. This was also an opportunity for me to practice creating interactive prototypes with Framer.