Your house mockup

Your Home – Real Estate Cross Platform

what and why

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

my role

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 a problem to investigate;
  • competitive analysis;
  • user researches for qualitative and quantitative datas (interviews, surveys and personas);
  • Synthesis of the collected datas (affinity maps, feature ideation, feature prioritization);
  • Sketches, sketches, sketches;
  • Workflow and Low – Fi prototype, iterate;
  • Style guide and Pattern lybrary, accessibility;
  • Hi-Fi prototype, iterate;
  • Usability test and iterate.

Analysis and Synthesis

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 between the three of the major Real Estate portals of Switzerland Italy and Usa.

user researches

persona – building empathy

Persona: house hunting from San Francisco to Zurich

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

Research report

Miro whiteboard

running the survey for quantitative datas

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
  1. 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.
  2. Surprisingly, the price of the house is important but is not the priority number 1.
  3. 3 participants of 4 admitted that their number one priority is the position of the house.
  4. 3 participant of 4 admitted that the presence of nearby services of a potential house is important or very important.
Statistics from the survey

feature ideation and prioritization

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 Valerio Lucantonio, experienced software developer and engineer. Thanks again!

Features prioritization

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.

Fortunately nothing on the “Not worth it” sector and only Account on the “Maybe later”.

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.

Sketches on different stages of ideation. You can also find them on the Whiteboard.

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.

lo-fi

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.

Iteration 2 of the Lo-Fi wireframes: Labels under the rounded buttons added

hi-fi

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.
Excerpt from the Style guide and design library.

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.
Detail of the section of the filters where the nearby services were added

usability test

Using Look Back I recruited participants to test the prototype,.

insights

  • 40% of participants did not tap on the Price chips on the map to interact with them although asked to interact with the map.

I observed users were unable to find the call to action on the map and on the filters because they didn’t look clickable.

time to iterate

According to my observations, I added a shadow effect also on the prices on the map containers, that took the tooltip shape.

Hi-Fi screens and workflow after usability test

Note: Due to the current Covid-19 situation, I could test only using a self paced remote tool. I assume that giving to the users the opportunity to test a product designed for mobile holding an actual mobile device would have given slightly different outcomes. This could be an interesting next step, understanding if the test outcomes were biased by the modality of the test.

Prototype

Prototype in Figma