Home Search

A user-friendly property browsing experience

Properly’s Home Search is a search and discovery portal for real estate listings. It providers users with access to active and sold properties, the ability to filter and to save a search, and it allows users to favourite homes for later browsing.

My role was to support the overall design vision and iterations for this product, and I led design for several features including displaying neighbourhoods on a map, designing the property listing cards, and enhancing the experience of browsing property photos.

You can take Home Search for a spin here: https://www.properly.ca/buy/search/

Browsing property photos

The first thing users care about when browsing a listing is photos. I evolved our photo gallery from a 2-photo horizontal carousel to a 5-photo grid. The primary goal was to help visitors quickly understand what the home looked like and incentivize clicking in to see all photos.

Image gallery previews

The grid pattern also migrated to the desktop view to creative visual variety and to reduce scrolling to see all photos.

Home touring

If a user wanted a visit a home in person, our tour booking widget enabled a quick and seamless flow to choose a date and time, enter contact details, and submit a tour request. This information was passed to our agent team, which then contacted the home owner to confirm the date and time. Once availability was confirmed, the customer and agent made plans to meet at the home in person for the tour.

Neighbourhood boundaries

The design challenge was visualizing a neighbourhood selection on a map. After many iterations of border patterns, I landed on this “lights out” effect, where the map becomes dimmed but the selected neighbourhood lights up.

Property listing cards

Presenting home details evolved into a layout and information hierarchy design challenge! I iterated on how to best display information about a property, such as the listing price, home features, and address. We wanted to keep the photo free of unnecessary obstructions and use white space, font size, and text colour to present property details.

This pattern had to scale across the list view, map view, and mobile views.