Ricky Synnot

Fixed to responsive — redesigning property listings on realestate.com.au

December 5, 2016

A post-launch product design review of recent improvements we made to our core property user interface on realestate.com.au.

A real multi-device view of our sold property channel.

The web team at realestate.com.au recently launched a responsive re-build of the sold channel on our web product. While there are countless front and back end stats that we can celebrate, this post will take you through three key areas of UX design we undertook.

Lets talk UX improvements… some are easy and some hard to measure. These three improvements played a key role in lifting the satisfaction our customers have with our product, and provide key learnings to guide us in future product design work.

Responsive interface design.

In the past, we had separate desktop and mobile website codebases. While the mobile website was highly optimised with a low footprint (in KB), the time had come for us to acknowledge how our users expect our web product to perform, and the devices they choose to access it with.

A key design challenge we faced was the need to present equivalent property listing information in each view irrespective of the browsing device the customer chose. To solve this, along with other UX pains, we elected a responsive design approach.

This made a lot of sense — in order to always display our property listings equally on any web enabled device, we agreed that a single responsive presentation layer was fairly straightforward to build. It also gave us the opportunity to learn & iterate on individual breakpoints later on. We developed smart presentation principles so our layouts could optimise the display of property listings relative to the customer’s device.

We shipped this fluid responsive layout for the sold channel. We anticipate this will drive more cross-device browsing, lift the number of our multi device users, and ultimately encourage more enquiries sent to Australian real estate agents.

Design for medium width devices

During our design discovery phase, we identified our medium-width screen browsing experience (think portrait tablets) as being seriously neglected. We were down-scaling our fixed-width desktop website to fit these devices, and served large ads in frequently tapped areas.

After consulting with agents in metropolitan and regional locations across the Australia, we interviewed customers, looked back through our research, reviewed best-in-class responsive interface examples and formulated our strategic approach.

We proposed that a single column content layout on medium-width devices would improve our product. We agreed that treating this device range more like small screen mobile devices is more in line with how they are used, compared to ‘fixed’ or ‘mounted’ desktop browsing situations.

We employed our ‘One-thing-at-a-time’ design principle, as we believe this aligns with how users process content in a mobility style situation, e.g.: on a tram, on the couch, public transport, away from home.

Search result screen as it appears on a medium width device.

We’re really proud of our result. In short, it reduces the screen area allocated to introductory text, filters and potentially interruptive advertisements. It raises the emphasis and y-position of the first sold property listing which, through research, we found critical to improving our overall UX.

Comparing the sold property listing card as it appears on medium width devices.

Another big focus was on the type size we were serving on these screens. We found the down-scaling caused some text to be unreadable at arms length, and needed to be increased.

We found increased engagement and more focussed browsing behaviours with the new single column layout. The layout presents property listings and integrated advertisements together, and is specifically optimised for medium screen devices.

By correcting the down-scaling issue incurred with our fixed-width site, we reduced ‘accidental’ advertisement engagements that occurred during scrolling and navigation gestures.

Typographic improvements

We also looked at the information architecture contained in our property listing cards, and the surrounding text elements on the page. On the search results template, we took steps to improve the reading lines and scanability of the results.

Comparing search result set headers.

On the property page, we re-organised all the text information into more meaningful groups. Rather than simply ‘switching on’ our brand typeface Museo as we’ve done on the Buy & Rent interfaces, the web UX team carefully considered how we could best use this typeface to communicate the property listing content.

Comparing property card type setting.

While they appear to be small improvements, we are confident we have produced a more refined typographic style. We’ve shipped more accessible property listing content and optimised the readability of our content for sit-down and stand up mobility browsing situations.

We hope these changes will ultimately improve the confidence our customers have when engaging with the Australian property market. If we’re successful, that will drive increased volume of higher quality leads to real estate agents.

By incrementally improving the way our product looks, as well as how it works, we’re creating a better first impression for new users. For our loyal Australian user base, we’re raising the expectations of our product, and better delivering on the experience we promise.

The Experience Design Team at realestate.com.au is a multi-disciplinary, diverse group of talented designers based in Melbourne, Australia. Read more about the team and the way we work at http://rea.design.