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
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.
Understanding user needs
I recruited 4 participants for semi-structured interview sessions. I then organized the datas in a Miro whiteboard with affinity diagrams.
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.
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|
|Immobiliare .it (Italy)||Yes||Yes||No||No|
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;
- 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;
- 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.
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.
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.
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.
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!
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.
Using Look Back I recruited participants to test the prototype,.
- 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.