The ApartmentGuide map redesign was a large project that involved several months of user research along with intensive design iterations from low fidelity sketches and wireframes to high fidelity mockups. The goal of the project was to create a best in class map experience that rivaled the competition in the apartment rental industry.

The old ApartmentGuide map had a variety of issues that I discovered while conducting user testing. Users were confused by the combination of map pins and cluster pins used on the map, the content was all over the place and the design was extremely out of date. We had a lot of work to do.

The new map design was the culmination of user research, team input and a series of design iterations. Larger photos allowed users to get a sense of the property immediately while only the most critical information was displayed cutting down on the visual noise of the old design.

In order to build a best in class map experience we first needed to study the competition, as well as, online map experiences that we could learn from. I wrote user testing scripts for 3 different usability tests and ran remote unmoderated tests using UserTesting.com. The beginning of the test script was an open ended question to search the site, this way I could observe the user's natural behavior before prompting them with specific questions. As the test went on, I got more specific about features and interactions I wanted to know more about.

Once I collected 6 users running through my test script, I then went through the videos recorded in UserTesting.com and began annotating the footage. I was looking at the overall behavior of the user, what worked and didn't work for them in the experience, interesting quotes, etc. Once I completed annotations for all the participants, I was then able to export my notes into one large excel spreadsheet where I could analyze the results. Qualitative analysis can be tricky trying to accurately portray themes within in the research, as there are thousands of ways to slice the data. I focused on primary patterns of behavior, what users were saying and doing over and over again, similarities that couldn't be ignored.

After I analyzed the data and formed the primary stories I wanted to tell, I began writing a report. The 3 reports I wrote focused on the key patterns of behavior that would help the design and product teams learn what to do and not to do with the map redesign. By understanding the strengths and weaknesses of competitor products, my team could use those learnings to build a best in class product.

Because there were several other researchers also performing user research we needed a place to collect all our studies. I had created a User Research wiki previous to the map redesign and it was the perfect way to keep all our research in one place. Many different Google docs, spreadsheets, presentations, etc. were created in the research process and the entire product and design team could go to the User Research wiki to find it all.

The next step was translating all our research findings into actionable learnings for the design team. Researchers, designers and product managers met for an all day brainstorm in which, research findings were shared and design best practices were identified. By the end of our meeting, we had a list of features and interactions that we agreed were best in class and wanted to include into the design process.

I created several user flow diagrams that illustrated the key pages and interactions that needed to be addressed in the design process.

Sketching wireframes with other designers and product managers allowed us to build a shared understanding of the designs early in the process. White board sketching also allowed me to get into higher fidelity wireframes faster because I understood the vision of my team mates and could take that into account, as I began designing.

City searches are the most common way that people search for apartments on ApartmentGuide. However, from user research I learned that most users know which area of the city they want to live in and can spend several minutes panning and zooming on the map, to find neighborhoods they're interested in. The purpose of this design was to put the focus on neighborhoods, so as the user rolls over the map, the neighborhood border is displayed along with important information about the area.

In this city search variation the focus is still on neighborhoods. But even though neighborhood content provides value to the user and helps boost SEO rankings, ApartmentGuide pays it's bills by getting leads to the apartments that are listed on the site. In the left panel, the user is shown the average price for apartments in specific neighborhoods and how many properties are available for different bedroom types. Once the link is clicked, it would zoom the map into the specific neighborhood they selected and set a filter for that bedroom type. This way the user is diving into properties faster and ideally, contacting more listings.

Another business concern was that users shouldn't have to click into a neighborhood to see properties, instead we should show properties right away. This version shows properties on the left but still has city information at the top of the list, if users want to learn more. In the map, rather than show property pins for every property and overwhelm the user, I decided to only show 3 pins at a time. On the map, the numbers on the pins corresponded with the list of properties on the left so that the user could make a correlation between the two. In addition, as the user rolls over the neighborhood borders on the map they will get area information and could click to zoom the map in, to see individual properties.

I knew from another test I had done with the SEO team that exposing city page content helped boost our SEO ranking by 30%. But how could I expose city page content on the map? My solution was to put it in the left rail at the bottom of the listings, this way it wouldn't interfere with users looking for properties but would still be easily accessible for users and search bots.

The focus of neighborhood search is to make it easy for users to find properties they would be interested in contacting. I used large images in the left rail because in my user research I learned big photos was the most effective way to build engagement. I also learned from user testing, that some users didn't like using a map because they preferred sorting a list of items from low to high price, so I included a sort feature, as well.

Another concept for the neighborhood search was to make the correlation between the pins in the map and the properties on the left more apparent. The list of properties on the left were numbered and as the user scrolled through the list the corresponding pins in the map would be highlighted. This version also emphasized the phone number and "Contact Property" link to optimize lead conversion.

Search filters needed to also fit in the left rail. I reorganized the information architecture and groupings of filters and got them to all fit into a clean grid layout.

The map layout was responsive from desktop to tablet so my design needed to be able to fit in portrait view on a tablet. I removed the rail and opted instead for a list of results at the bottom of the screen, this way users could still scan and sort the list, while having plenty of room in the map to explore.