desktop_long_charges_creation_1.png

End of tenancy experience redesign: charges creation

My contribution: organising and leading workshops, researching, creating wireframes and prototypes, conducting usability testing sessions, handling assets to developers.

Overview

Flatfair is a deposit alternative provider for renting a property. Instead of paying a traditional deposit worth 5-6 week's rent, with flatfair tenants pay a small, one-off check-in fee worth one week’s rent. After the tenancy is over, the landlord or agent has a possibility to submit charges against the tenants for any damages done during the tenancy.

I was re-designing flatfair charges creation experience for landlords and agents.

Goals

  • Increase the percentage of flatfair plans closed without charges

  • Decrease the risk of landlords adding unlawful or unfair charges.

  • Decrease the risk of tenants not paying for their charges.

  • Decrease average flatfair's liability size. The bigger the amount of the charges - more flatfair risks to cover if tenants don't pay.

  • Decrease the amount of time that the customer support and end of tenancy teams spend solving the issues regarding end of tenancy process.

Initial research & workshops

In order to create a new experience, we had to analyse our current flow.

1. I tested our current charges creation flow, took screenshots and mapped all of the experience on Miro.

EOT_charges_creation_2.jpg

a) Current user flow

EOT_charges_creation_3.jpg

b) Example of the current UI

2. I gathered all of the customer feedback about the end of tenancy experience from the customer support team.

3. I analysed relevant data on Metabase and watched recordings on Hotjar.

4. I organised the workshop with the end of the tenancy team to analyse our current flow and gather current pain points.

5. I also organised a second workshop with the main stakeholders to discuss our current pain points and brainstorm a few possible solutions.

6. I created the survey to interview agents who are using flafair.

Problems

  • Agents submit charges after the expiration date. 28 days to submit the charges - it's not shown on the portal.

  • Agents submit charges while tenants are still in the property. The end of tenancy team needs to know the moving out date of the tenant.

  • Agents are submitting unlawful and unfair charges. Some landlords/agents don't know what to charge and what is reasonable, so they try to guess the values of specific damages. It results in unfair charges that tenants don't want to accept.

  • Agents are submitting charges that suppose to be covered by separate insurance products.

  • Agents make mistakes when creating charges. Some examples of these mistakes include duplicate charges, obvious input errors (such as adding £9999 for cleaning, or £0 when there is an obvious charge).

  • Tenant contact details are outdated. We don't collect up to date information (phone number, move out address) of the tenants and it makes it more difficult to reach them.

  • There is no multiple file upload. Agents/Landlords struggle with uploading multiple evidence. Currently, you have to select all of them one by one.

  • Very easy to remove added charge during the creation process. There is no notification after pressing "Remove".

  • Flatfair doesn't ask for enough documents to reduce the company's future risks.

Solutions

Based on the above problems identified, I worked on addressing them by coming up with potential solutions:

  • Make sure that we ask for additional documents and up to date information in order to reduce potential future risks for the company.

  • Educate the users on their rights, responsibilities and the importance of providing extra documents and correct, up to date information.

  • Create a clearer visual form hierarchy by grouping related fields. It's even more important in this specific case since we will be adding some additional steps to the flow.

  • Make making mistakes more difficult for the agents by blocking them in the flow if necessary, showing clear error validation messages, guiding with notification boxes and tooltips.

  • Create a component to allow multiple document upload.

  • Create a dynamic timer component to show how much time left to complete the specific step.

Design process

1. User flows. I worked on user flows to make sure that all of the new documents and required steps are included in the new flow. I gathered feedback from the product team and the main stakeholders.

EOT_charges_creation_4.jpg

c) New user flow

2. Basic wireframes. I quickly created some basic wireframes to establish the layout and gathered feedback again this time including some developers.

3. High fidelity mockups and prototypes. I started working on high fidelity mobile and desktop mockups to establish a visual hierarchy and layout for the charges creation experience.‍ After several feedback loops with the main stakeholders and product team, I iterated on my flow and created the final version to test with the users.

EOT_charges_creation_5.png

c) Full new desktop experience

New design examples
EOT_charges_creation_10.png
EOT_charges_creation_7.jpg
EOT_charges_creation_9.jpg

Testing

I conducted 4 usability testing sessions with the account managers to learn if they are able to submit charges successfully. I wrote a script and observed how they interacted with the prototype.

The overall impression was great. Users thought that the flow was very straight forward, they understood what is required from them, quickly identified which forms they had to fill and felt guided through the whole flow.

Improvements
  • It was not completely clear which fields are optional. Solution: consistency in using the copy "optional" and "required".

  • Few people didn't know how to add an additional charge from the review page. Solution: added a clear "Edit" button next to the charges box that would open all of the charges.

  • 1 person worried that users will only add the balance of what's left after adding the amount covered by insurance instead of adding the full amount. Solution: since we need to get the full amount. I moved the "Insurance/rental legal protection" step to the end of the flow.

After working on improvements, I prepared all of the files for development and did a final presentation and estimation session with developers.

Outcome and learnings

This project was implemented quite recently, so it will take some time to start seeing how it is changing our user's behaviour. However, we can already see that our data collection quantity increased and there are no applications created for the tenants that are still in the property. Additionally, I have received positive feedback from agents about the possibility to upload multiple documents, saving them time.

Key learnings
  • Collaboration between different teams is the key. When re-designing such an important part of the experience, we need to make sure that we collect as much valuable data before starting to work on the design as possible. We didn't include the sales team in the beginning and got some very important insights from them in the middle of the process that re-shaped the whole experience and made us divide this project into 2 smaller ones.

  • Descope and divide giant projects into smaller ones. We made a mistake in trying to build 2 separate products at once (1) Charges creation for deposit alternatives 2) Charges creation for traditional deposits). Even though both of them are about the end of tenancy charges creation, we found out that strategies to achieve the goals should be completely different for these 2 products. We decided to descope it and focus on deposit alternatives but we lost quite a big amount of time.

  • Focus on the user. At the end of the day, we are solving user problems. So always keeping personas and the actual problems in the back of your mind is very important as it's easy to lose sight of this when you're focused on the daily tasks.