UX Designer projects
Front-end Developer projects
Barcelona Property Finder
Site disabled

Role: User researcher, Interaction Designer, Front-end Developer


Located in Barcelona, ​​it is an independent organization in charge of conducting an audit on the properties in which the client may be interested and is in charge of the management of the purchase process.


Client: Barcelona Property Finder

Work process: User Research, Benchmarking Study, Heuristic Analysis, Personas, Card Sorting, Prototyping, User Testing, Front-end Developer

Duration: April 2015 / August 2015


UX Designer tools:

Research, Surveys, Pencil, Paper, Axure, inVision, Sketch, Validately

Front-end developer tools:

Bootstrap, Css/3, Html/5, Wordpress, Php, jQuery, Wordpress plugins, Less, Sublime text
captura de imagen Barcelona Property Finder


Business goals:

Create a landing page where the user finds all the information correctly nested.

Create a platform that the client can manage, update content, generate new content.

The platform must be created in English and Spanish.

It must be responsive.

User goals:

The user can trust the management of the purchase of a property and the platform must provide a corporative image.

The user must find all the information on how the platform operates with a correct hierarchy.

Implement a communication path between the user and an operator.


The client raised the need to show images of floors / houses on each of the pages as a main part of the content hierarchy.

Provide the user with a platform that clearly describes the purpose of the product and that the client can access the information effectively.

The solution


In order to obtain information on how to shape the target user, forms were sent to stakeholders and people with certain purchasing power were interviewed.

In this way, we gathered enough information to create two models of people, a real estate agent and a user with a good purchasing power. The comments received from the users helped us to reinforce the needs of the stakeholders previously defined by the client.

Subsequently, a benchmarking study was conducted to obtain the strengths and weaknesses of the competition.

Persona 1

captura de imagen Barcelona Property Finder

Persona 2

captura de imagen Barcelona Property Finder

Card sorting

It was not necessary to implement card sorting due to the simplicity of the architecture. The landing page platform did not include sublevels in the navigation, which further reduced the navigation complexity, so the navigation hierarchy was defined together with the client and stakeholders.

The main basis for defining navigation was based on the study of comparative evaluation and the analysis of information provided by the user.

Content architecture

A simple conceptual map was created to define the content architecture for the landing page administration.

captura de imagen Barcelona Property Finder


After defining the content architecture we worked on the hierarchy of contents in sketches, with this methodology it was possible to refine the proposed designs. It was possible to establish a scalable and modular structure because it was not a complex environment. All the work was done thinking about the growth in the architecture of the platform The ideas were finally based on the contribution of everyone in the team and stakeholders which led us to the following conclusions.

captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder


We worked a minimalist structure with a layout of three breakpoints, 1280px, 786px, 420px, where the main component of each page would be an image of a floor that would occupy 40% of height and 100% of width, followed by a description of the section .

The main image on each page was defined as the large-scale image of the example floors and secondly, a description of each process.

Both the header and the footer were defined static to facilitate navigation to the user and reduce the loss of orientation.

The hierarchy of the header was defined emphasizing cross-reading and rapid scanning of content, specially on mobile devices. With this premise, the first view of the user should provide 80% of the information.

captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder
captura de imagen Barcelona Property Finder


The conclusions were positive, after the results of the analysis carried out during the test phase, the high fidelity prototypes corroborated both the user’s facility to move on the home page through the main navigation, and the tasks proposed for the concretion of conversion of the users, in this case that the user gets to get in touch with the client.

The objectives proposed by the team during the development based on each of the phases were also met.

The qualitative data of the analysis showed that the platform gave an image of trust and seriousness, one of the main objectives of the client.

We work with the idea of ​​a minimalist environment where the components were distributed hierarchically and without discomfort in the user’s attention.

captura de imagen Barcelona Property Finder captura de imagen Barcelona Property Finder captura de imagen Barcelona Property Finder


With the high-fidelity prototypes completed, two types of test, navigation and moderate remote tasks were carried out.

A navigation test to avoid false affordances and confirm that the user is located at all times.
A task test to corroborate the concretion of the objectives by the client and the users.

After analyzing the results, the final design is implemented. The design was run by the client.

diseño final, google analytics

© 2017 Copyright Pablo Goris