Knight Frank, making renting less dreary for tenants

Emanuela Cosentino
8 min readDec 29, 2017

--

General Assembly UXDI22, Concept Project 4.

Overview:

The third project was a group concept project for Knight Frank, an estate agent founded in London in 1896.

They have 411 offices in 59 countries and about 14000 employees worldwide.

The Brief:

Our team of 4 was assigned a brief to help the business improve the process of renting properties, without removing the human element of it, by using mobile devices.

This will allow new tenants to interact with their agent and process the paperwork; starting from the moment they select a property - up until they receive keys to their new home.

The below case study is a report of the UX Design process.

Discover: What are competitors doing?

Competitive Analysis Results

At the beginning of our UX process we did a competitive analysis where we visited 4 other websites who offer similar services.

This was done to assess what other competitors offer and what features our clients would expect from our app.

  • Only one competitor offers a LiveChat service (Foxtons)
  • Only two competitors offer a service where tenants can sign their paperwork via the app (Rentr & Morgan Randall)

The above features will be crucial to our app in order to meet the brief’s criteria and fill the visible gap in the market.

They will also improve the process of renting properties, by allowing tenants to use their mobile devices, from the comfort of their offices or homes.

It’s now time to do some research to find out how the renting process works.

Discover: Contextual Inquiry, how does Knight Frank operate?

Site Visit

Before starting our user research, we conducted a site visit to one of the Knight Frank branches in the City.

We met with the head of lettings, Tom, who was very helpful and gave us the below information for our research:

  • The overall process may take up to a month but it can be shorter according to the clients’ needs.
  • Their current app is only for searching properties and arranging viewings.
  • It’s always the same agent that deals with the client from the viewing until the contract is signed.
  • Knight Frank has a digital signature service available and most of the paperwork is processed digitally.
  • Face-to-face contact is compulsory only when the agent has to check the tenants’ passport or visas.
  • They currently use Facetime, Skype, emails and Docusign to communicate with tenants.

The site visit has given us a clearer understanding that allowed us to start our user research and define what the renting process is like for tenants.

Define: Who are our users and what are their pain points?

After finding out how the renting process works at Knight Frank, it was time to find out what the pain points of renting properties are.

We conducted a number of interviews to find trends and identify the common pain points in the renting process.

The user interviews revealed that the renting process was a stressful one and that people had negative feelings towards estate agents.

“I’ve only had bad experiences with letting agents; the only good experience was leaving them.”

This made us realise that there was a lot to be done to change such views about our client.

Other users said very similar things to the statement below, which has helped us detect the major pain points:

“I had no idea where I was in the process or how long it would take.”

The main key takeaways from our research are as follows:

  • The renting process is stressful.
  • The duration of time the paperwork takes to be finalised is unknown, with no way for the tenant to track its progress.
  • There no single communication channel, everything was done via different channels.
  • There is never a single point of contact, too many agents dealing with one tenant.
Experience Map

The experience map👆🏽 depicts that the renting process has got many pain points.

My team and I will work on them and improve the renting experience exponentially.

Subsequently, the above pain points supported us in defining our main persona that we will keep in focus when designing the app.

Define: Who is our persona and what is the scenario we will focus on?

Meet Sam

The user research helped us define Sam as our main persona and define the problem we are trying to solve.

The main problem is that users can’t track their paperwork when renting.

Scenario:

Sam is a tech-savvy lady who has had enough of people’s clutter and wants to move into her own flat.

She has three weeks to move out.

She has found a flat she likes and her offer has been accepted.

She now has to process the paperwork and get ready for her move.

The app we are designing for Knight Frank will help her fill out the paperwork, process it and track it on her mobile device.

It will be a companion app she will download after agreeing on a property.

The agent will email her a property number, she will create a password to fill out her personalised paperwork and track it efficiently.

We also incorporated a LiveChat feature, to keep the human element within the app.

It will also give Sam a single point of contact whenever she would like to speak to her agent.

As we knew from both the brief and our user findings the most important issue to tackle was to make the process fast, efficient and easy to track.

Therefore we focused on tackling this issue in our design studio session.

Develop: Design Studios and Exploring Possible Solutions.

Design Studio

A design studio was conducted within the team as a starting point to the Develop phase of our design process.

We reviewed the brief, the problem we are trying to solve and the scenario we are focusing on.

Further to that, we brainstormed on some sketches for the key screens for our app and decided on a final version.

Finally we sketched the initial low fidelity version of our app and conducted user tests to verify that our solution was useful and usable.

Initial Wireflow

The initial tests we conducted revealed that:

  • Some of the features on our prototype were not clear while some had no real value for the user.
  • The buttons were not visible
  • Some of the forms contained unnecessary fields, which made the application longer.

The feedback we received from the user tests helped us reiterate our second version, which we digitised.

Deliver: Digital Prototype & Final Solution.

Initial Low Fidelity Wireframes

We digitised our first solution with the changes from the first user tests and took out the prototype for some further tests.

Once we summarised our user tests the next iterations were in a higher fidelity prototype as seen below.

Login Screen

Upon opening the app the users are met with the login screen👆🏽.

The first comments we received from our users were that they would feel safer if they created the password themselves, as the app will store their confidential data.

So we added the password field as per the findings from the tests.

Homepage Screens

The homepage👆🏽 was also one of our main screens, as Sam will be using it a lot.

The feedback we received for the above screen was that on the first sketch the users did not know if the buttons listed were clickable.

We made some changes and added some arrows and conducted further tests, which helped us understand that the progress bar at the top had no value.

On the final iteration we:

  • Removed the progress bar.
  • Turned the required actions the user has to do into buttons with rounded corners.
Application Form Screens

The application form👆🏽 also had to be seamless so we tested it.

The user tests confirmed that some fields in the form were not needed so we removed them.

Moreover the insight we got was that the initial progress bar looked like a slider and did not tell the user how much of the form was left.

Finally we iterated and designed:

  • A numbered progress bar.
  • A shorter form.
Tenancy Contract Screens

The Tenancy Contract screen👆🏽 is what the user will see once she signs the contract.

The big check mark in the middle implied that the signing was complete for both the tenant and the landlord, which users found misleading.

The refresh button in the second iteration was not usable because it meant the user will have to go back to the app several times to check the status.

Finally we iterated and replaced:

  • The check mark with some clearer text.
  • The “Refresh” function with a notification Sam will receive once the landlord signs the contract.

Once we had finished our user tests we managed to build the final version of the Knight Frank app.

  • We made some final changes to the buttons to make them clearer and made them red to comply with our clients brand guidelines.
  • We added some text and colours to the buttons on the homepage to show the user the progress of each section of the process, the text was added to make it accessible for every possible user.
  • We added some beautiful translucent pictures on the background to make the form filling process pleasurable without distracting the user.

The final high fidelity mockup was then tested to check for final issues it may have.

We are proud to say despite the amount of forms they had to fill user’s thought our solution was very useful.

Some users mentioned to us that they would not hate renting houses as much if the process was as easy as our app makes it.

The future updates of our app will include:

  • A multi tenant feature to make it easier for flat-shares.
  • Multiple payment methods for an even more improved User Experience.

As this was only a two week sprint those will be done in future design sprints for the client.

Thank you for taking the time to read about how we theoretically made Knight Frank the very first estate agent tenants love.

Please click on the below link if you would like to test our current prototype 😊

--

--

Emanuela Cosentino

UX Designer, saving good people from bad User Experience one iteration at a time.