As ImmobilienScout24 is constantly improving the iOS and Android App we redesigned the whole result map from the ground.
2017 · Fulltime
The map is another way besides the result list to explore your search results. But at the beginning of this project, the original map experience was quite limited for reasons by technique and design. To mention a few: The amount of results on the map were related to the amount of reloaded results on the list. By scrolling down the list to a particular point, 25 new results got requested from the server. One reason for this approach was the app performance. But the downside was, that on the map there was no way to see all results until the user scrolled down the whole list. That was a huge usability issue. Besides that, the result previews were showing quite less information as no images, no way to save an object and more. The big goal was defined to make the map experience at least equal to the list experience. Another big goal was to bring even objects with hidden addresses on the map.
For more details about the process behind I’ve wrote an article.
Previous
Next
Pins on map & clusterin
Technically we managed to get all results showed on the map and from the design perspective, it was about to indicate all those results. There were some challenges: As the map itself makes the big difference to the list, we needed to find solutions for the case of a huge amount of indicators to not overlap the whole map. Also, as we wanted to get even objects without complete published addresses on the map we had to think totally new about the concept of the indicators.
Coming from ...
The original concept of the markers was quite realistic visualized houses with additional states of seen, favorite and clustered at the same address. Those markers wasted a lot of space, especially on a zoomed out level.
In research, we figured out, that the users tend to be happier if they got another way of orientation in between the markers. Therefore, we introduced indicators who have the price as additional information included. The price is in isolation of course not really making the only dependency to select an object but as the prices are mostly different it adds a little uniqueness to the indicators.
By doing this, the indicators need to have a larger size. To still keep the orientation on the overall map experience we created a zoom-level based appearance change. If the user enters the map with an overview of his search area, he sees all the object just as little dots. As he’s zooming into the street level, the indicators change to price pins.
The agents sometimes have reasons to not publish the complete address of a property. But if we wouldn’t include those objects into the map, we wouldn’t get an equal experience to the list. In the design workshop, we had plenty of ideas. It was clear, that those object should not stand out more than the others. So an extra list with all those objects clustered would option. It could even happen, that agents tend to use a list like this as a highlight option. So we needed to bring those objects directly on the map. The solution is a postcode clustering. We bring all objects without published addresses of a postcode in the center. In a zoomed-out level, it is a dot as same as the normal indicators. So they don’t stand out and are highlighted. And at a zoomed-in level, they have the number of clustered object instead of the price shown. One step further: if you click on those clustered indicators to see the results, the pagination appears. To support the understanding for the user, that these indicators are related to the postcode, we highlight this area. Clustering is also used for objects with the same address. To differentiate those two clustering options, the one with an address has a pin-triangle, the one without an address is just a rectangle.
Item Preview
Since the previous preview wasn’t really strong in terms of the information it was clear to add stuff like an image of the property, more meta information and interactions like favoriting and report. But the big challenge was as well to include the concept of clustered properties. In the following graphic, you see the three outcomes we created.
Standard Preview
This property preview appears as a standard version. You get the basic information and get access to the full detail page by tapping the preview.
Objects with same address
This preview appears if several properties are located on the exact same address. To highlight this case, there’s a hint in the top bar.
No exact address published
If there are several properties without published address in one postcode area, the user sees this preview. It contains also a hint about this special case in the top bar and additionally the postcode, that the user recognizes a different to the other clustering. Otherwise, it would just be overseen.
Polygones
To simply provide more orientation also of the users actual search area, we introduced the polygons. We tried out various styles but ended up with a simple opacity solution. Everything like colored borders or other highlighting would distract the user from the indicators and makes the experience more difficult. This way the polygons stay as much as needed in the background while they support perfectly the orientation.
Thanks to Caroline Smith, Lena Sarp , Rimas Albert, Leonie Brewin, Paul Befort and the rest of the team at ImmobilienScout24 for the time we’ve enjoyed together over the past few months.