Skip to Content Skip to Navigation
Couple trying to select an apartment

Better UX for browsing apartments

28 September 2016

For the better part of a year we’ve been working closely with Perth-based property developers, Finbar, on a number of websites to promote their apartment buildings. One of the key questions we wanted to address along the way was “how could we provide a better user experience for browsing yet-to-be built apartments through a digital interface?”.

This post explores the challenges we faced along the way in addressing this question, to the final outcome of the new ‘Apartment Explorer’ including some initial results.

Civic Heart is a new apartment and commercial precinct currently in development by Finbar in South Perth, Western Australia. It will house 294 apartments across 32 floors, plus four floors of commercial spaces including a supermarket, restaurants and cafés, medical suites, and retail amongst other businesses.

As a part of the new web presence, we were tasked with finding a solution that gives users the ability to browse through those 294 apartments that fall within 1 of 3 major apartment categories, across 33 apartment floors, with up to a maximum of 11 different apartment configurations on any one floor. That’s a lot of information to fit into a seamless interface, let alone handling all the unique information for each individual apartment.

So where do we start?

Getting underway meant looking over all the content available and dividing that up into mandatory information versus supplementary details that might engage the user further. Striking a balance between the two can be tough, particularly when it comes to making sure the most valuable information gets necessary attention.

Our initial go-to solution was a filter styled approach with show/hide fade transitions like we had used on other apartment websites.

Example image of Motive Apartments Floorplan Explorer

However, we realised this was an opportunity to explore something different – not because we needed to be different, but because we saw how we could meet our content requirements in a more functional, logical, creative and aesthetically pleasing way. Ultimately, we wanted to give visitors a more rewarding experience that didn’t feel dull or cumbersome to use.

The way we saw it, the best possible solution would reflect the shopping process a potential property buyer would encounter in an offline environment. First, they would select a category of apartment (which may vary by price and polish); then by floor or bed/bath combinations; then finally by the juicy details like floor plans, specifications (such as internal sizing, fittings, appliances and finishings), visual renders and apartment balcony views.

It was important to find a solution that would also be inviting, would make it easy for users to explore and compare available information, showcased different apartments across different floor levels, and felt consistent from start to finish.

Translating all of that to an interface, we presented the solution in a format that slides horizontally based on user selection, showing a maximum of 3 key panels as seen below.

Image showing the rough wireframe or structure

Early on in our exploration we decided to incorporate a visual of the entire apartment building and allow interactive selection of floors and apartment categories. This reduces effort on the user’s part (since we’re combining the first two stages of the shopping process), establishing from the outset that the information they want is only a quick click away.

A more detailed look

All right, you’ve made it this far. You’re probably hanging out for a visual so I won’t keep you in suspense. Although the core process is linear, each stage offers interactions that either propel you forward or backwards, or reveal new content on top. I’ll explain…

Step 1 – Category Selection

Image showing Apartment Explorer Step 1

The Civic Heart apartment explorer begins with a building overview where the user can select their apartment category. There are 3 categories, but we’ve also included the Commercial and Lower Levels as this tool will be accessed from a few different pages.

Image showing Apartment Explorer Step 1 - Hover

Each apartment category shows a preview on hover, which also updates the building visual on the right to indicate the tower floors it covers. This visual is also interactive and clickable to progress through to the next step.

Step 2 – Select Apartment / Floor

Image showing Apartment Explorer Step 2

Once the user selects a category, the panel slides across to the left with a highlight on the lowermost available floor. Once the slide transition is complete we introduce a cut-out of the active floor, showing the structural layout and the available apartments. It was important at this stage to provide direction and details on the key areas of Perth each balcony would overlook; handy factors for any buyer’s decision-making.

From here, the building render gives the ability to select a specific floor. If I’m viewing Premium Apartments on level 13, for example, I can navigate to level 5 or level 16 with one click on the left, updating the cut-out on the right. I can also jump between major categories right into Sky Homes or Penthouse categories without having to navigate back to the first screen.

This means users have a way to explore key decision-making factors (floor, category and apartment) around the entire tower all from the one screen.

Using drone technology, Finbar are able to offer prospective buyers a preview of what to expect from the balcony of their future apartment. Each floor in the explorer features 360° balcony views accessible from each apartment, which would previously have been labour intensive to capture. As a sales tool, the balcony views were introduced so the entire floor views could be compared.

Image showing Apartment Explorer Step 2 - Balcony Views

In the image above, the instructions in the centre offer an aid to understanding the the interaction. It disappears within a few seconds of opening the view once it has served its purpose.

While developing this feature, we realised potential buyers may want to compare balcony views on a particular floor, or even between similar apartments across different floors. So we introduced additional options (in the top left) that allow the user to control their view according to the current level and the current apartment. With a miniature cut-out diagram to highlight the active apartment, the user can navigate floors up and down, and switch between apartments on the same floor level, all without having to close and reopen the balcony view.

Closing the balcony view return the user to the floor and cut-out view, allowing them to continue checking out apartment specifications, floorplans and other information if they choose.

Step 3 – View Apartment Details

Image showing Apartment Explorer Step 3 - Apartment Information

The final step is the individual apartment panel. Here the user can see the floorplan as well as key information for the chosen apartment. We also introduce a call to action prompting the user to enquire about this particular apartment with Finbar; clicking it reveals a contact form.

Image showing Apartment Explorer Step 3 - Apartment Enquire Form

Are we giving away too much, too soon?

The biggest challenge in creating an information-rich sales experience is removing the incentive for your audience to get in touch. The key objective for Civic Heart’s apartment explorer is to generate leads and improve the saleability of the complex and its apartments. Throughout the project, we often had to stop and ask ourselves, are we giving away too much information, for no return?

After all, this tool provides an opportunity for buyers to engage directly with Finbar. In the end, after consultation with the client, we added a prompt for the user to request access to the full apartment explorer.

Image showing Apartment Explorer Step 1 - Register Information

The downside, as designers and user experience professionals would know, is that fewer people may end up using the entire tool due to the extra effort involved.

However, given the nature of Civic Heart apartments as a product and the norms in Finbar’s industry, this reality posed little risk as we knew the tool would present a really valuable experience to people who were prepared to share some basic information in exchange for more information for themselves – aka. sincere buyers.

The solution was to entice visitors with quick registration, followed by an immediate reward of the information they are looking for.

Tying it all together

I believe the final product offers a clean experience that delights through animation, transitions and the reward of lots of information in a small space. Why not take a look for yourself, or watch the video we’ve captured below showing the interaction.

Looking beyond Civic Heart, we’ve been able to reuse this same tool on other Finbar apartment websites (Vue Tower and Concerto Apartments), making only cosmetic tweaks to suit each brand. The analytics so far have shown successful user exploration (users moving back and forth the panels) plus a number of apartment enquiries from within the tool itself.

After being live to the public for a while, we’re really happy with the numbers we’re looking at. Civic Heart has turned roughly 20% of unique interactions into enquiries.

Development geared for conversions is always an open book on refinements and tweaks. With more time to dedicate we would love to dive deeper and A/B test ideas to see what performs the best, however for now we’ll continue to monitor its activity and note any ideas to potentially address in the future.

Like this post? Keep up with us on Twitter and Instagram.