CASE STUDY -
Web Design

A classy, conversion focused website for Harcourts

I worked with Harcourts (Hoverd & Co) to design a modern, industry leading website that helps them generate property leads and attract more team members.

Read the case study

“Finn has been a great help for our ongoing Webflow projects. He has supported us in developing our website as we have expanded as a company, adding vital skills and experience where we have knowledge gaps.

Finn helped identify these knowledge gaps and has helped upskill the team to allow us to be self sufficient.”

Chris Poole
Global Head of Marketing - APLYiD
Finn Dollimore
UX Designer & Webflow Expert
hello@finndollimore.com

Website strategy and
user experience

During discovery, I met with Kiri Hoverd, head of growth and strategy on the Hoverd & Co team. Together we identified Harcourt’s goals for the project. They wanted to stand out as industry leaders and they wanted a professional, custom website that would be unmistakably theirs! As I probed deeper, I asked Kiri about their business goals. 

I identified two core business goals:

  • Attract leads by offering a property appraisal
  • Attract high performing team members 

It was discovering these goals that allowed me to make informed decisions during the UX design process. First, let’s discuss one of the most crucial parts of the website: the appraisal form.

High converting
appraisal form:

The free appraisal (property valuation) was our lead generation strategy. Website visitors can share details about their homes with Harcourts by filling out an appraisal form. Then they receive a valuation on their home. The only question was. What kind of form would generate the most leads?

I had the chance to speak to the director of Salience agency in the UK, Andy Cooper. Thanks to Andy’s expertise on conversion rate optimization, we found the ideal lead generation device would be a multi-step form.

Our multi-step form

Multi-step forms have been shown to have a much higher completion rate than normal forms. Have you noticed that whenever you sign up for a new app, they onboard you with step 1, step 2, 3 etc…? This is because users prefer information to be presented in bite sized chunks, step by step.

Avoiding common traps

The problem with forms on most property websites is that they overwhelm the user with too many questions, or look intimidating. Here’s a form on a local competitor’s website:

With those wide input fields, even a simple form looks intimitating...

It was crucial that users perceived our appraisal form as 'quick' and 'easy'. This would increase engagement with the form and also increase conversions. We are able to achieve this, even though our form had total of ten fields.

Creating the steps

As mentioned, users love it when content is broken into bite sized chunks. We began by dividing the required information into three key ares:

  • House information
  • Contact details
  • Type of appraisal

This helps users to focus on the same information during each step. It also allows us to tell them there are only three steps away from getting their valuation.

Form design

I came up with a modern design that separates the application into the three easy steps. Form input fields are shorter, helping them appear easier to fill out. The user is lead through a smooth user experience being told what each step is about. The language is conversational, delivering a human-centric user experience. We also added icons to some fields to optimise clarity.

Finally, the three bars at the top of the form signal to the user where they are in the form process. They also indicate there are only three steps until completion. This makes the form appear quick and easy to fill out. Therefore more users are likely to engage with it.

Mobile -  users can fill out the form from anywhere

Because the form is mobile responsive, users can complete the appraisal form wherever they are, day or night. Friends may also share this page via mobile messaging apps. For these reasons, it is important the form is available on mobile devices.

A powerful lead generation tool

Harcourts now have a system to attract perfectly qualified leads - someone interested in selling or renting their home. This form can be turned into a Webflow symbol, and placed throughout their website to generate more leads.

Generating job applications

During our second call, Les Hoverd, director of Hoverd & Co stated that the careers page was “crucial” to the success of the new website. The goal of this page was to inspire high performing real estate agents to join their team.

Reach for the stars

The hero section featured a trail of squares containing the portraits of Hoverd & Co’s team. It reminded me of the milky way, so I recommended the inspirational heading “Reach for the stars.”

As the user moves down the page, they can see testimonials from the harcourts team and read about the benefits of working with them. The user is finally greeted with a modern form that allows them to submit an application.

Helping users find the right information

On every website, there are often multiple users, each visiting for different reasons. In the case of a property company, there are users interested in

  • Buying property
  • Selling their house
  • Renting a property
  • Becoming a real estate agent

Rather than try to target every user on each page, I designed pages to address each user group separately. We added a categories section that directs users to their place on the website. I put this categories section right under the hero/header section, allowing users to spend minimal time reading content that doesn't apply to them.

The same cards layout would serve as the 'how to' section for the Buying, Selling and Property Management pages ect...

Visual design:

Colour pallet

We came up with a professional, bold colour pallet. It keeps the design accessible for the user, but also allows us to add a splash of bright Harcourts blue to our pages.

This blue allows us to direct the users’ attention to certain elements on the page, helping us lead them through a clear journey. I used the colour pallet to design both light and dark sections. This keeps the design engaging as the user moves down the page.

Typography

For headings and large text, we used the typeface Sherika. The idea was to push the boundaries with a creative, yet professional typeface. Our font size was overall large, helping with accessibility. Sherika is slightly harder to read than fonts like Roboto or Open Sans - but it’s much more interesting. By increasing the font size, it is easier for site visitors to read content. This is often best practice when using creative fonts.

For smaller text we used a highly accessible System UI font. This would help us keep legibility on smaller text in places like the navigation bar and the footer.

Layout:

It was important the layout of information was accessible, easy to understand and also looked beautiful. A bold, minimal layout helps the user consume content on the page, but also gives a premium, high quality look to the design. It was perfect for our visual language.

Designing for SEO

For any agency, SEO is an important factor for attracting traffic and qualified leads.

One of my creative ways to help companies optimise their pages for SEO is by adding an SEO tagline above the main heading. This allows the content writer to add in a longer, SEO friendly h1 with multiple keywords - without taking up too much space.

A great place to add long-tail keywords

Google does not distinguish between headings based on size. Instead, it looks for the h1 heading tag - which can be applied to any heading on the page, regardless of what it looks like. As a result, Harcourts can have a short, powerful heading "buying a property"- without missing out on SEO juice. Or having to write "Property for sale Auckland". The SEO tagline is tagged as an h1 and the main large heading is an h2.

Elements of delight

I used a few animations throughout the project. This was to keep the user experience interesting and joyful while exploring the website.

On profile cards I added a hover effect to show a card tilt revealing a blue background behind the image.

This is faster than on the website

The home hero has images of the Harcourts team that are everchanging.

Elements on service pages 'spring' into view.

Final words

As a project, the Harcourts Hoverd & Co website represents a nice balance of what I strive for in every project: A uniquely creative, yet professional design, that performs well as a business and marketing asset. This is the standard that all agencies and service providers should strive for in their designs. Stand out and be unique, without undermining professionalism, business needs or user experience.

Finn Dollimore
UX Designer & Webflow Expert
hello@finndollimore.com