We wanted to show, on the map, a variety of information for each listing (e.g. price range, number of listings in an apartment block). Due to screen real estate limitations, involved developers from the very beginning of design to understand technical limitations of both showing & clustering data.
Display price range inside one building in order to
.gif)
Display various information at each zoom level to satisfy people at different stages of the journey.
How can we display listings in a small screen without being cluttered and overwhelming?
Location & Price are the most important factors when it comes to house hunting
While conducting research on other projects, we discovered that map is one of the most important features to help people to find a place to live.
According to the research findings we knew that price is one of the key factors for home seekers, showing price upfront on the map will accelerate their house hunting process. As mentioned before, we need to cluster multiple listings in one single building to declutter the information.
The question is… price v.s no. of listings which one should be presented?
Reviewing other metropolis with skyscrapers such as New York, Singapore or HongKong, we found portals either show numbers of listings in one building or a small area, or they display all listings as dots on the map. None of them display price upfront if there are multiple listings in one small area/ building.
Shows every listing & price on the map
Shows no. of listings. When users zoom in the red bubbles will split to more bubbles
Shows listing as a dot from a higher level, once users start zooming in it shows price of every listing in the view port
Shows price tags at any zoom level
Shows price tags at any zoom level
From the business point of view, the product owner thought it might be too risky not to tell users the amount of listings as other portals do. In addition, it is important to let users know we have many listings than our competitors that they can find their next home.
However, the job to be done here is to find a place to live, which is the place in a location the users prefer and within their budget. Numbers of listings in this area might not help users during the process.
We believe that by showing price range could help users to find an affordable/ suitable property & have an idea of the price range in the area that they are interested in. Moreover, the price differences among different communities are distinct especially in Dubai.
In order to persuade internal stakeholders, we proved that 50% of our users rated price as the most important factor from the survey we did in our app & we would also test their attitudes towards price range during the usability testing later.
While using the map, people tend to explore and be more playful. Instead of showing every single listing on the map in a higher zoom level, we decided to just use one pin to trigger people to zoom in to see more details to declutter & in exchange for more helpful information (e.g. parks, landmarks, transports) on the map.
Use one pin to summarise the property and trigger people to zoom in to see more details
One size fits all? How to personalise for newcomers & experienced expats?
To cater for newcomers, we decided to show them quick facts about different communities, the price range and a link to read more guides about the community to help them decide where to live.
Therefore, once experienced expats search by their desired location, we will show listings with price on the map to help them make the decision
With the map in the background and limited screen real estate, we experimented with different tags, cards, map colours etc. We did this to lower cognitive load but display enough information on the screen to facilitate the customer's decision-making process whilst also reducing computing time from our database.
There weren't any tools in the market that could allow us to create a zoomable map prototype.
To reduce the development risk, we decided to create a static map and observe if people pinch to zoom in/out and asked them what do they expect to see after they pinch. And test it again once we develop the MVP.
I conducted several rounds of user-testing with colleagues, our customers & non-customers with a mix of newcomers & experienced expats to make sure we tackle the risks before development.
1. Different price types
The first thing they noticed was the price of different listings. They were confused between tags with single price & price range but once they start clicking on it they got it.
2. Quick zoom
The quick zoom button doesn’t weave into the user’s natural behaviour. Users would just zoom in and out to explore the map.
3. Layer
Some users had to guess what does the icon mean.
4. More (…)
Users were not quite sure what does the more (…) tag mean but they would click or keep zooming in to find out
5. Clickable areas
Users knew the grey overlay are the boundaries of the communities but they did not realise it is clickable
We soon had a meeting with product owner & developers to prioritise all the changes from our testing. After the meeting we decided to fix those issues with high impact on users low effort for business first!
One size fits all will make both users confused. We should always stick to one job to be done at a time.
Though Google Maps uses layer icon that doesn’t mean our users will understand it’s function. We should be careful about icon without label and always do our own test.
Consistency (showing price range all the time) and native usage (people tend to zoom instead of click to find out more information on the map) can accelerate learning curve and lower cognitive load.
Simplicity - considering what is the most important information that we really need to show to users