User Flow + User Interface proposal to a housing platform

InLife

The project

About the company

InLife is a digital Housing Platform connecting Landlords and Rentees together, in a much simplified an seamless way, for mid to long term furnished stays, and therefore widely used by students. Based in sunny Lisbon, InLife operates in Portugal, Spain and Italy.

Purpose of the project

  • Find a user-friendly platform for a digital signature contract

  • Create a process & user flow for landlords to draft and sign the digital contracts

  • Include in the flow the payment to be insured

  • Identify the optimal location in InLife’s Information Architecture to add this new section

  • Create this flow for desktop

  • Create a visual cohesive concept aligned with InLife’s branding and UI elements

The Project

The challenge

To ensure a smooth rental experience both for landlords and tenants, it is important to have a legally binding signed contract and payment received before the tenant’s arrival (security deposit and administrative fees). The idea is to simplify that process.

Therefore, it is essentially a system that enables efficient management and signing of digital contracts, guaranteeing their legal validity for both landlords and tenants.

These contracts should be securely saved on our platform for easy access and reference.

To achieve this, our focus is on developing a user friendly and efficient digital system to create and manage the contracts, to guarantee the protection for both sides.

Provided by the client

  • Information Architecture

  • Branding Book

  • Design System

  • Problem Statement

  • How Might We

Not provided by the client

  • Access to the current platform

  • User flow of the process of activity

The Project

Time frame —

10 days

Role —

  • Product Designer

  • UX Researcher

  • UI Designer

Process

  • Empathise & Define

  • Ideation

  • Branding & UI Elements

  • From Low Fidelity to High Fidelity with User-testing & Feedback

Tools

  • Competitive Analysis

  • 1 Survey + 3 Interviews

  • Affinity Diagram

  • User Persona

  • Wireframing

  • User Testing

  • Desirability Testing

  • User Flow

  • Figma

The Process

Gathering context about the problem

I had the opportunity to meet 2 stakeholders — Manuel, Head of Product and Miguel, UX UI designer. I could understand more about the context behind the challenge of the current process:

  1. Right now, the future tenant finds the property online, on InLife’s platform. A first fee is required: First Rent + InLife fees.

  2. The tenant can then start a discussion with the landlord or property owner, and arrange the check-in.

  3. The tenant arrives to discover the property during the check-in.


  4. It is then during the check-in, that the tenant discovers different legal binding rules to the contract

  5. and receives additional Admin fees from the landlord, lacking transparency from the beginning.

This process has been shared to InLife by its users to be overall frustrating, lacking flow and transparency prior to the check-in and is the heart of the Challenge. I do not have access to the metrics, as an external designer to InLife, and as I received this challenge as core mission. The whole idea is to smoothen this part of the process, which will positively impact both the landlord and the tenant.

Discovering the market — None of the competitors included the contract in a digital form. If this didn’t allow me to see how they proceeded to dot it, it showed me that InLife could be one of the first to implement it! Different E-Contract solutions existed, from PandaDoc to DocuSign, and a few in between.

Quantitative & Qualitative Research: Surveys, Interviews & Affinity Diagram

  • 1 Survey was sent out to Landlords

  • 3 Interviews of landlords or property managers

  • 1 additional interview with Joao from InLife’s Account Manager team and who is often in contact with InLife’s Landlords

To sort out the information from the different interviews and to define Key insights for the project, I moved forward with an Affinity Diagram.

Key insights from the landlord’s point of view

  • Safety & Trust are crucial

  • Payments — “It would be great to share a view on the different fees”

  • Contracts — “Reminders & notifications are crucial”

  • “It can quickly become difficult to track information and messy between all the different situations and properties.”

The 3 first insights are key for my platform UI design and important steps to include, also guiding me on the choice of the E-Contract solution.

The 4th one on the other hand — My Assumption was that this element would really be a key component to improve the User Experience of the platform.

I decided to create a User Persona to represent my user and to be designing for him, with insights I received from my different interviews.

From there, I worked on 2 parts for the project:

  1. The UI + Flow of the step-by-step payment and contract signature process.

  2. The UI of the landlord’s platform to gather all the information related to a property + the Flow from being notified that a contract has been signed by a tenant, and is ready to be uploaded onto the Landlord’s space.

Let’s start by focusing on this second part for this Case Study.

The Process

Ideation

100% of the interviewees talked about the painful process of needed to track everything on Excel sheets regarding maintenance and cleaning for example, and do not offer a clear overview and easy tracking of what has been done for each property. It also makes the process very manual and time consuming.

So you would be able as a Landlord, to go into this card and track the current information status:

  • Is the property occupied? 🏡

  • By whom? 👥

  • What is the contract, its details and has it been signed? 📋

  • Have the payment been fully done and is every month’s rent set up and on track? 💳

  • Check-in done? Yes, no, when? 🗝️📆

  • What is the state of the property in terms of maintenance, what were the last things done? 🔧

  • What is the cleaning schedule and who takes care of it? 🛎️

  • Who were the previous tenants and when did they stay? 🎓

Low Fidelity Wireframes & User Testing

The intention of the “Property Card” is to be able to gather in one place on the platform, all the information regarding a property. This idea is based on the interviews done with the Property managers and Landlords.

A part of this idea was also to be able to clearly follow the steps of the Contract, Payment and Check-in process — Key prior to the tenant’s arrival and for a seamless arrival.

So I thought of a clear overview appearing on the Property card — Here drawn on Low Fidelity on the Landlord’s space on Desktop.

Getting feedback

3 testers provided me direct feedback

& I understood different key points for a more seamless experience:

Listings page

  • The users liked the presentation of the properties as a listing, with property cards showing details and key information.

  • The users struggled with the navigation bar and the flow of the different filters, following the key status of the Contract, Payment, Check-in and where to find the information.

Into a listing (property card) & Creating a contract

  • The users liked to be able to draft a contract directly in the Property’s Card.

  • The users struggled with the presentation of the section.

Confirmation of the contract stage fulfilled

  • The users liked that they would get notified once the contract would be signed by the tenant, the progression bar showing the accomplishment of the different steps and what is to come.

  • The users struggled with how to proceed with the next steps.

Following the status of each step

  • The users liked the clear presentation of the steps and if they were completed or not, including a timeline of the events for each step.

  • The users struggled with the navigation and why the Booking dates appeared in the top.

The Process

Branding & UI elements

I did not have access to InLife’s platform on purpose, but different elements guided me in my branding choices to respect the company’s identity:

  • InLife’s Branding Book including the colour palette, typography & text styles, and on the slide 4.3 the specific colour palette for landlords, differentiated from the tenants.

I chose to keep a small selection from the colour palette, and created Brand Attributes for my design, based on the look & feel of the company, and what I wanted to convey through my design of the platform.

I kept the idea of blue + a light grey that I changed to a light blue contrast color, a pairing that I found more elegant — a liberty that I took to suggest to the client as they wanted to see a new kind of UI proposal from what they had on their side. For the contrasting colors, I kept the ones from the Company’s branding book.

Moodboard

I chose to make a little moodboard of screens from other desktop platforms to have different ideas of Navigation bars, Logo placement, Property showing, Progression bars, Listings, that would translate the information set up while conveying the Attributes of the Brand.

The Process

From Low Fidelity to High Fidelity

After applying the feedback from the User Testing on the Low Fidelity Wireframes, a second round of User Testing was done on the Mid Fidelity Wireframe, accompanied by Desirability Testing on specific parts of the User Interface like the Navigation Bar.

Mid Fidelity Wireframe — Reservations page, prior to a tenant sending a request

High Fidelity Wireframe — Listings

The Navigation Bar was made with categories listed from the Interview made with Joao, Account Manager at InLife.

The Reservations was important for InLife’s users as it allowed a quick overview of the properties not booked yet.

Through User Testing, modifications were made between Mid Fidelity and High Fidelity.

  • The Button “Manage Reservation” was confusing by its location, which I moved next to the Property description and renamed to “See Property Details”.

  • The Booking dates were removed from the Property Card but will appear when clicking on “See Property Details”, for less details.

  • The Search Bars were moved up, next to the drop down menus, in order to be able to add the “Sort by” drop down and the “Active / In Progress / Inactive” filters, asked for during User Testing.

  • On the High Fidelity Wireframe, you can also see the CTA appearing clearly if an action is required by the Landlord, here “Schedule Check-in” appearing. He will have received a notification, and as long as the action is not complete, the CTA will remain in Primary State. When complete, it deactives and moves into the background with in Secondary state, no action then required.

  • The Navigation Bar was simplified to be less confusing for the User, with on the right everything related to ones account and notifications, and the main categories in the middle.

  • A little nice to have was added with Roberto’s photo uploaded, to personnalise his Landlord’s space, for the user wanting to spend time on the InLife platform, key objective of the Company.

The Solution

I did not receive access to the Landlord’s platform as InLife was curious to see the User Interface + Flow I would create without having access, but if I go into the homepage of InLife, I can share a little Before & After:

Before

After

The Solution

User Interface + User Flow

User Interface Design Proposal on the Landlord side — High Fidelity

My Listings Page, with a Call to Action for our Landlord, Roberto

My Listings Page, filtered on the Properties with Contract Pending

The Landlord’s Space & Documentation Management

  • A clear, light User Interface and personal Landlord Space

  • Creating elegant listings for the Landlords to manage their different properties, which can count from 1 to 500 properties.

  • Including filtering needs — by status of Occupation (tenant), Contract, Payment, Check-in, for the landlord to be able to quickly have an overview as well as tracking easily.

  • A key feature of this Design, based on the UX Research — On the Property Listings cards, creation of tags and their status, showing the status of the different steps to complete before check-in: Tenant, Contract, Payment, Check-in. Adding quick action buttons next to the tags so the landlord can make an action to make the process move forward. When the action is done, the tag status is updated and the buttons turn to disabled.

  • Summary information appearing in the property’s presentation card: Name, Location, Monthly rental price, ID Tag for easy research and CTA to see more into the Property Details, photographs of the Property.

User Flow on the Landlord User Interface — Contract signed and ready to be uploaded by the Landlord onto the Property Card

The Landlord has received a notification indicating that the tenant has signed the contract via the external e-contract platform, and can now upload it on his space on the platform, to finish the last steps before the tenant’s arrival, and keep all the details and related documents for each property in one space. This overviews allows the Landlord to have a clear view on their listing, to follow any step that is needed and to stock any related document.

By following the CTA indicated by the notification, the landlord can pleasantly be guided by the platform and follow the update and completion of the rental’s preparation before the arrival of the tenant.

What stood out & how it could positively impact the user, based on the User’s needs found in User Research

  • A personal and interactive platform on their space as a Landlord, with a clear overview of their listings of properties

  • The creation of a “Property Card” where the Landlord can access all information and documents (including contracts) for the property in one place

  • Clear information on each property’s status, with the help of tags, each step including color indication + color-blind friendly indication, allowing step by step progression and tracking of a property status and tenant application

The Solution

A mapped out Design

Thank you so much for going through my Case Study, I hope you enjoyed it!

If you are interested in discovering the other part of the solution including the UI + User flow of the Payment & contract signature steps, this will be added as a second part to the Case study.

Caroline