E-gérance – Rental Agreement flow

client

Nexity E-gérance

ROLE

UX Research
Interaction Design
Visual Design

DURATION

12.2016-01.2017 (3 weeks)

link

E-gérance.fr

Initiated by Nexity, one of the leaders in the French property management market over 30 years, E-gérance is a digital platform that helps landlords manage their rental properties effortlessly.

One year after its first launch at the end of 2015, E-gérance found:

“The current sign up flow and the visual hierarchy of the current dashboard are unclear, which often got users frustrated and even overwhelmed platform manager with inquiries.”

Therefore, E-gérance approached us for design solutions to enhance user experiences.

Clients first presented content, design, and functions audit in the workshop, outlining problems users encountered with the current platform.

Secondly, we worked collaboratively to define and prioritize issues to solve as follows:

• Form-heavy online Rental Agreement Registration (RAR)
• Unclear task flow and visual hierarchy of the dashboard
• Repetitive sections:  “My properties section” and “my rental properties section

Below are previous RAR flow and dashboard

The design process of this project can be illustrated in the following graph. I led the process from step 2 to 8, making the design deliverables while communicating internally with PM and developers and externally with the client.

To start off, I created a provisional persona of a potential E-gérance user based on online user feedbacks and demographic statistics we had from real users data to cover the hypothesized customer: A middle-aged male professional with middle or high income.

I examined e-banking, e-commerce, real estate and insurance websites to find design patterns and language that E-gérance customers may already be familiar with.

I found:

• Most of them used the traditional accordion or a single page to reveal information progressively as design patterns, followed by static or a few micro interactions.
• I thought filling out forms should be as easy as a conversation so that the chatbot might be an option as well.
• I also looked at vacation rental-based sites to analyze user flows and think of ways to streamline the experience.

After an internal meeting with PM and technical Lead, we decide to take the design direction close to “e-banking” and “vacation rental-based” sites.

Based on the persona and research, the updated user flow was created to demonstrate the main structure of the process. The client and technical professionals were closely involved in this stage to make sure all stakeholders are on the same page about the scope and feasibility of the proposed features.

The updated RAR flow solves most of the problems gathered from the discovery phase with a much-improved UI. A clear sense of progress is created with a persistent nav that displays three new steps to the flow: Welcome, Information about the rental agreement(contract/rent/tenant/guarantor), and documents upload system. This gives the user a sense of context as they navigate through the entire flow.

Form for Renal Agreement Registration

It displays as four tabs with progress bars:

• Rental agreement ➝ Rent ➝ Tenant ➝ Guarantor (optional)

Users can start whatever tabs they want and leave the process if needed (autosaved).

Documents Upload System:

Step by step POPIN upload and edit process

I created almost all of the detailed screens in wireframe to communicate and iterate all the process with stakeholders (PM/Dev/Clients). Thus, at the visual design stage, the main Web/Mobile UI components styles were made to facilitate the implementation phase.