Rubén RomeroDiseñador UX/UI y Frontend
Todo el trabajo

Portal Inmobiliario: Experiencia de Reserva Interactiva

Rediseño de la web de una constructora para que buscar casa se parezca a reservar en Airbnb: filtros claros, información clave a la vista, favoritos y el barrio como punto de partida.

Buscador de planos en escritorio con filtros y resultados, junto al listado de planos en móvil.
Cliente
Constructora de viviendas semipersonalizadas (EE. UU.)
Rol
Diseño UX/UI, Investigación UX
Año
2024
Equipo
Equipo de Twelve Legs Marketing (gestión de proyecto y desarrollo)
Herramientas
Figma

Contexto

Una constructora estadounidense de viviendas semipersonalizadas, que edifica en grandes urbanizaciones planificadas con piscinas, parques y zonas comunes, quería rehacer su web. Vende de dos formas: planos de vivienda que el comprador personaliza antes de construir, y casas ya terminadas o a punto de estarlo, listas para entrar a vivir.

El proyecto lo hice con el equipo de Twelve Legs Marketing. Me encargué del diseño UX/UI de todo el sitio y de parte de la investigación; la gestión y el desarrollo los llevaron mis compañeros. Es confidencial, así que los nombres de la marca, los barrios y los planos que aparecen en las imágenes son ficticios.

Reto

La arquitectura de información era caótica. Las promociones quedaban escondidas a varios clics, no había precios base, los mapas de parcelas estaban al final de las páginas de cada barrio y los testimonios vivían en una página que nadie visitaba.

Detrás había una realidad compleja: cada barrio tiene sus propias normas y no todos los planos se pueden construir en todos. Además, las dos formas de venta funcionan distinto. Una casa lista para entrar tiene dirección, precio y características exactas; un plano tiene un precio base distinto en cada barrio y rangos de superficie y dormitorios.

Proceso

En las sesiones con el cliente volvíamos una y otra vez a la misma referencia: Airbnb. Allí eliges primero dónde quieres estar, filtras por lo que te importa y ves las fotos y los datos clave de cada opción sin entrar en ella. Aquí pasa lo mismo: quien compra una casa nueva decide antes el barrio que la vivienda.

A partir de ahí definí tres caminos de entrada: empezar por un barrio y ver qué planos caben en él, empezar por un plano y ver en qué barrios está disponible, o ir directo a las casas listas para entrar. El objetivo transversal era reducir clics: que la información importante estuviera siempre a la vista.

También investigué la paginación frente al botón de «cargar más» en los listados, teniendo en cuenta tanto la experiencia de uso como el SEO, para decidirlo con el equipo de desarrollo.

Buscador de planos con filtros por características, barrio, rango de precio y superficie, mínimos de dormitorios, baños y garaje, y rejilla de resultados.
El buscador: filtros por características, barrio, precio, superficie, dormitorios, baños y garaje. Nombres ficticios.

Solución

  • Buscador con filtros tipo Airbnb. Características (una planta, suite principal abajo, patio cubierto…), barrio, precio, superficie y mínimos de dormitorios, baños y garaje, con el número de resultados en cada opción.
  • Tarjetas que se pueden explorar sin entrar. Cada tarjeta tiene su propio carrusel de fotos, el barrio donde está disponible, el precio y los datos básicos. Las de casas listas para entrar muestran valores exactos y un solo barrio; las de planos, rangos.
  • Fichas con lo importante arriba. Galería, precio base en cada barrio, planos técnicos, características estándar y el tour virtual, con las acciones de compartir, descargar la información y guardar siempre visibles.
  • Favoritos con cuenta. El corazón de cada tarjeta guarda el plano o la casa, y para conservarlos hay que registrarse. En la cuenta, los favoritos se separan en casas listas y planos.
  • Formularios con contexto. Los formularios recogen el plano, el barrio y los filtros que ha usado cada persona, para que el equipo de ventas sepa qué busca antes de llamarla.
Ficha de un plano de vivienda con galería, precio base por barrio, planos técnicos y características estándar.
La ficha del plano: galería, precio base por barrio, planos y características, con guardar y compartir siempre a mano.
Página de cuenta con las viviendas guardadas en favoritos, separadas en casas listas para entrar y planos.
Los favoritos, en la cuenta del usuario.

Versión móvil

El sitio también está diseñado para móvil. El menú se despliega a pantalla completa con el buscador arriba, los filtros del buscador se abren en un panel propio con el número de resultados en el botón, y en la ficha la petición de información queda fija al alcance del pulgar.

Tres pantallas móviles: home, menú con buscador y listado de planos con filtro y orden.
Buscar en móvil: home, menú y listado de planos. Nombres ficticios.
Dos pantallas móviles: panel de filtros por características, barrio, precio y superficie, y ficha de un plano.
Filtros en panel propio y ficha del plano con la petición de información siempre visible.

Resultado

La web está en producción, con la lista de favoritos con registro y el mapa interactivo de parcelas funcionando. Los compradores pueden ver precios base, filtrar por lo que necesitan y guardar sus opciones sin llamar a nadie.