Your Home – Real Estate Cross Platform

Your Home.ch is a cross-platforms design for a web app which can be deployed as a market store app or browsed through internet.

“Your Home.ch” is a project focused on the way users do house-hunt online. The idea shaped during the Covid-19 pandemic. I was starting my User Experience Nanodegree, therefore I decided to investigate the Real Estate portals’ world, seeking for pain points and new opportunities to deliver a user-tailored experience
Users often don’t know about the place where they need to relocate. Furthermore, sometime the solution must be found remotely.

Duration: 27th April – 19th May 2020

Activities

Your Home.ch is a end to end project and it covers all the aspects of a User Experience and Interface case study:

Identification of the problem to investigate.
Competitive analysis.
User researches for qualitative and quantitative data (interviews, surveys and personas).
Synthesis of the collected data (affinity maps, feature ideation, feature prioritization).
Sketches, sketches, sketches.
Workflow and Lo- fidelity prototype, iterate.
Style guide, design library, and accessibility standards.
Hi-fidelity prototype.
Usability test and iterate.

Design process

Understanding user needs

User persona

Persona archetype for Real estate case study

Semi-structured interviews

I recruited 4 participants for semi-structured interview sessions. I then organized the datas in a Miro whiteboard with affinity diagrams.

To read the notes please visit the Miro Whiteboard

Survey to collect quantitative data

The next step was to run a survey to validate or not the qualitative datas collected with the semi-structured interview. It was shared within targeted users living in 3 different countries, therefore adopting different portals for their house hunting sessions.

Key findings from researches

«I never found services like post offices, supermarkets, pharmacies in the map or in the advertisement, I had always to leave the website and look at them by myself».
Participant 2

Users declare they prefer a Pc to look for a new house, but they use more often the smartphone, even when they are at home.
Surprisingly, the price of the house is important but is not the priority number 1.
3 participants of 4 admitted that their number one priority is the position of the house.
3 participant of 4 admitted that the presence of nearby services of a potential house is important or very important.

Define

Competitive analysis

Focused on the features used for the actual research moment and on the most important portals of Switzerland (homegate.ch), Italy (immobiliare.it) and USA (Zillow.com).

Competitive analysis (features)	Map divided in clickable zones	Draw the perimeter on the map	Prices on map	Nearby services on map
Homegate (Switzerland)	Yes	No	No	No
Immobiliare .it (Italy)	Yes	Yes	No	No
Zillow(USA)	No	No	No	Only schools

Competitive analysis for features

Ideate

Feature ideation and prioritisation

Through the Synthesis of the datas I ideate the following features:

Add “Nearby services” in filters;
landing in a map view and
show the prices on the map;
switch to a List view;
show desired nearby services on a map when selected in filters;
favourites;
notification;
on site notifications;
account needed for on site notification and to publish advertisements.

For the feature prioritization I collaborated with an experienced software developer and engineer. Thanks again!

It ended up that the Key features, challenging and strategic to implement are:

– the switch between the Map and List view;

receive notification;

favourites.

GPS- on site notification, for which I had to strive a bit, since it is very difficult to implement but actually feasible and strategic.

Easier to implement, therefore less strategic but also fundamentals features are:

Main Filters
Prices on Map
Additional filters;
Services on map.

Important decisions

During this stage:

I categorized the main filters and the additional filters. The main filters are displayed on the Landing / Homepage and their function is to narrow down the research to a primary scope;
User arrive to a Map view of results with interactive price tags, so that the price and position priorities are conjunted in a single view. Of course has the opportunity to switch to a classic List view at any time if wished;
I abandoned the idea to divide the map in zones because I realized that is either a too exclusive either a too inclusive action for the users to take: if they know already where, what is the point? If they know already where, how does it help? Does the user know if the locations at the border or just outside the border will be considered? Does a particular user need this consideration or not? What is the benefit at the end? Those and more were all the questions that brought me to the conclusion that the division in zones is fancy but not so useful and that a single interactive map tailors the research to the user needs.

Workflow

During the sketch stage I also started to think about a logic workflow for the users to use the app/website.

The flow I am going to illustrate here is

The journey that the users do from the beginning of the research until the moment they will contact or not the advertiser.

It is not shown the entire asset of the platform fuctionalities.

Flow from the beginning of the house hunt until the contact with the advertiser.

Prototype

Sketches

With this good quantity of datas I finally started to sketch, I am happy to share with you some of sketches, which are representative of different sketch phases: from the very first until the more defined ones.

Low-fidelity wireframes

Finally it was time to bring the best ideas developed during the sketch phase in the digital world. After the first iteration, I tested the interactions and resulted that was difficult for the users to identify the List/Map View and Filters buttons on the first flow. Therefore it was needed to iterate with a second version that you can see below.

Design patterns, style guide and accessibility

Finally, I transformed the Low Fidelity prototype in the first High Fidelity prototype.

The Design Patterns I selected are very common and usual to the users. The design is kept to the functionalities without forgetting desiderability in the graphic design.

As usual, I dedicated special attention to color accessibility before to set my color palette. AAA is the goal!

Color contrast ratio in color palette scores AAA on all combinations.

Time to iterate

To have a more complete idea on the usability of the flow before to run a usability test, at this stage I added:

the “Nearby services feature” in the filters view;
the “Advertisement details page” with all the related house information, the new added Nearby services on map, and advertiser’s contact info and contact form on pop-up, accessible with a floating button.