CProperty — vivienda en preventa en Metro Vancouver, ahora comparable

01Contexto

Una elección consciente

CProperty es un marketplace de vivienda en preventa —apartamentos y casas adosadas que se venden antes de construirse— en el Lower Mainland de la Columbia Británica. La C es de «conscious», consciente, y el titular principal lo repite: «Choose Consciously, Invest Delightfully.» Las direcciones de ejemplo están en el West End de Vancouver.

El brief del mercado, una nota que sigue en el archivo, lo recorre ciudad por ciudad: Vancouver y el North Shore, las Tri-Cities, Burnaby, New Westminster, Surrey, Richmond, Langley y un anillo exterior que llega hasta Abbotsford y White Rock. El diseño es un archivo de Figma de 13 páginas: siete flujos de producto (inicio, inmueble, promotora, listado de inmuebles, unidades y planos, inicio de sesión y blog), seis de ellos dibujados en anchos de escritorio, tableta y móvil, y el blog en escritorio y móvil, 76 pantallas en total, además de un sistema de diseño y una versión anterior archivada.

CProperty — la página del inmueble en escritorio: la galería, con el rango de precios y las cifras clave al lado, las pestañas, el resumen y los recuadros de información — Figura 02La página del inmueble en escritorio: la galería, con el rango de precios y seis cifras al lado, y después las pestañas y el resumen.

02Problema

Un depósito por un edificio que aún no está construido

Quien compra en preventa compromete dinero años antes de que haya nada que visitar: un depósito que se paga a plazos durante la obra, una tarifa de cesión si necesita vender el contrato antes de que termine la construcción, una cuota mensual de mantenimiento por pie cuadrado y una fecha de entrega a años vista. Las cifras que deciden la compra suelen estar en sitios distintos: el folleto de una promotora, una oficina de ventas, una hoja de cálculo.

La tarea de CProperty es ponerlas una junto a otra, primero para un proyecto y después entre unidades, para que el comprador vea cuánto cuesta una vivienda antes, durante y después de construirse.

CProperty — la parte superior de la página de un inmueble en el móvil, con marcadores numerados en el rango de precios y en tres filas de cifras — Figura 03La parte superior de la página de un inmueble en el móvil: el rango de precios y las cifras con las que planifica quien compra en preventa.

03Giro

De folletos para agentes a comparaciones para compradores

Una versión anterior del producto ocupa su propia página en el archivo: 57 frames que no son trabajo de Sina, por lo que aquí no se muestra ninguno. Sus clientes eran agentes inmobiliarios. Una cuenta premium de dos niveles daba acceso a los datos de cada unidad, a la comparación lado a lado y a folletos para presentar a clientes; los agentes tenían un panel de control con un generador de propuestas, y las promotoras publicaban sus propios proyectos y unidades.

El rediseño le da la vuelta. Los paneles de control y los niveles desaparecen, explorar es gratis y la intención de compra llega por dos formularios: «Contact Sales Center», bajo la tabla de unidades, y «Get Exclusive Information», en las páginas del inmueble y de la promotora, que pregunta si quien escribe es agente inmobiliario o comprador. Los agentes siguen teniendo cabida, pero como leads y no como suscriptores. La idea central del generador de propuestas, poner unidades una junto a otra, sobrevive en la página de comparación, que ahora compara dinero en lugar de especificaciones.

CProperty — la página de comparación rediseñada: tres unidades con sus cifras económicas, sus servicios, lo esencial del día a día y de la vivienda, y un CProperty Rating — Figura 04La página de comparación: tres unidades lado a lado; primero lo económico, después servicios, lo esencial y una calificación.

04Enfoque

El archivo registra el orden del trabajo

Los node IDs de Figma crecen a medida que se edita un archivo, así que la mediana de los IDs de cada frame ordena el trabajo. La base del sistema de diseño llegó primero, al crear el archivo. Después vinieron la página de inicio y la del inmueble; luego, casi a la vez, el listado de inmuebles con sus filtros y el flujo de inicio de sesión, y más tarde la página de la promotora. Las unidades, el detalle de la unidad y la comparación se dibujaron al final: la parte del producto con más decisiones.

Todos los flujos siguen la misma disposición: una tarjeta de título y, después, una columna por breakpoint (escritorio a 1440, tableta a 1028 y móvil a 360 o 393 píxeles), con una pantalla por estado. Una última pasada cambió el pie de página por uno nuevo en casi todas las pantallas de todas las páginas.

Los flujos, en el orden en que se dibujaron

01
Base del sistemaColor, tipografía, botones, cabecera y pie de página; los modales, formularios y toasts llegaron después
02
InicioHero, búsqueda, últimos proyectos, cómo funciona y preguntas frecuentes

05Solución

Filtros que hacen preguntas de inversor

La página del listado se abre con «Invest Delightfully with Selecting Project!» y una barra de filtros que plantea primero las preguntas de un inversor: ubicación, fecha de entrega, puntuación de inversión, depósito y precio. Dormitorios, baños, aparcamiento, trastero, tipo de inmueble, depósito total máximo y fecha de finalización esperan en «Advanced». Cada uno de los seis filtros está dibujado abierto: una cuadrícula de chips de ciudades, un calendario, controles deslizantes de puntuación, depósito y precio, y el panel avanzado.

La página del inmueble se lee como una lista de comprobación de la preventa. Junto a la galería hay un rango de precios y seis cifras: año de entrega, depósito, puntuación de inversión, pago mensual, tipos de plano y alquiler medio. Debajo, la página va del resumen a precio y gastos, pasando por unidades y planos, un calendario del depósito dibujado como plazos con fecha, diseño interior y exterior con extras de trastero y aparcamiento con su precio, y una sección de valor de la vivienda con gráficos del barrio. La sección de precio y gastos reúne escenarios de hipoteca según el pago inicial, pagos mensuales con distintos tipos de interés y el dinero que hay que pagar al cierre de la compra.

CProperty — la barra de filtros del listado de inmuebles con el panel «Advanced» abierto: tipo de inmueble, depósito máximo, fecha de finalización, dormitorios, baños, aparcamiento y trastero — Figura 05La barra de filtros con «Advanced» abierto: las preguntas de inversión en la barra y las del hogar, dentro.

CProperty — la sección de precio y gastos: escenarios de hipoteca según el pago inicial, una cuadrícula de pagos mensuales por tipo de interés y los gastos que hay que pagar al cierre de la compra — Figura 06Precio y gastos: escenarios según el pago inicial, una cuadrícula de pagos mensuales por tipo de interés y el dinero que hay que pagar al cierre. Las cifras del archivo son provisionales; el diseño es la estructura.

06Comparación

Comparar unidades, no edificios

La sección de unidades y planos es una tabla (proyecto, plano, dormitorios más espacio flex, ubicación, superficie, precio) con favorito, «More» y «Add to Compare» en cada fila, y un formulario «Contact Sales Center» debajo. El detalle de la unidad repite las cifras económicas de una sola unidad: precio, fecha de entrega, tarifa de cesión, cuota de mantenimiento por pie cuadrado, pago inicial y plano.

La página de comparación alinea tres unidades en el mismo orden: primero lo económico (total, tarifa de cesión, mantenimiento, pago inicial), después los servicios; lo esencial del día a día, como el aparcamiento y la carga de vehículos eléctricos; lo esencial de la vivienda, y un CProperty Rating de diseño interior y valor de la vivienda. La calificación convierte la promesa de la marca en un campo: la plataforma califica la vivienda, no solo el anuncio.

Cada unidad lleva un CProperty Rating, así que cada comparación termina con el juicio propio de la plataforma.

CProperty — la tabla de unidades y planos en escritorio, con favorito, «More» y «Add to Compare» en cada fila, sobre un formulario de contacto — Figura 07Las unidades como tabla, con «Add to Compare» en cada fila y el formulario de la oficina de ventas debajo.

CProperty — el detalle de una unidad en el móvil: dormitorios, baños, balcón, promotora y un CProperty Rating de diseño interior y valor de la vivienda

CProperty — el formulario «Get Exclusive Information» en el móvil, con un selector de agente inmobiliario o comprador

07Decisiones clave

Cinco decisiones detrás de la comparación

El rediseño se apoya en cinco decisiones que el archivo deja a la vista.

01
Dar las cifras gratis al comprador y tratar a los agentes como leads
La versión anterior vendía a los agentes inmobiliarios datos de las unidades, comparación lado a lado y folletos para clientes, con planes anuales o trimestrales. El rediseño abre esas cifras a todos los visitantes y canaliza la intención de compra a través de dos formularios, uno de los cuales pregunta si quien escribe es agente inmobiliario o comprador.
Compromiso
Los ingresos tienen que venir de los leads y no de las suscripciones, y el archivo no recoge ningún modelo para ponerles precio.
02
Mostrar el depósito como calendario, no como un único porcentaje
El depósito de una preventa se paga en plazos con fecha a lo largo de la obra, y una sola cifra oculta cuándo hay que pagar. La página del inmueble lo dibuja como recuadros, cada uno con su parte y su fecha.
Compromiso
Hay que introducir el calendario de cada proyecto, y el total tiene que coincidir con la cabecera, cosa que en la página de ejemplo no ocurre.
03
Comparar unidades, no proyectos

08Mi rol

La parte de Sina

Según el archivo. No nombra a ningún equipo ni registra quién decidió qué, así que esto es el trabajo que contiene el archivo, no una afirmación de autoría exclusiva.

Responsable

Los siete flujos de producto, seis de ellos en anchos de escritorio, tableta y móvil
La página del inmueble: el calendario del depósito, precio y gastos, y valor de la vivienda
La barra de filtros y sus seis estados abiertos
La tabla de unidades, el detalle de la unidad y la comparación de tres
Los formularios de captación de leads y el flujo de inicio de sesión de siete estados
La capa de marca del sistema de diseño: las escalas marrón y crema y 13 conjuntos de componentes

Corresponsable

Colaboración

El cliente, cuyo brief describía el mercado ciudad por ciudad

La versión anterior, guardada en el mismo archivo, no es trabajo de Sina: se describe solo como contexto y no se muestra ninguna de sus pantallas.

09Crítica

Cuatro depósitos en una página

El inmueble de ejemplo responde de cuatro maneras distintas a «¿cuánto pago antes de que terminen las obras?». La cabecera habla de un depósito del 30 %. El bloque de información, de un depósito total de 32 500 $ y un pago inicial del 25 %. El calendario del depósito habla de un 20 % en total, y sus plazos —8 %, 4 %, 4 % y 2 %— suman un 18 %.

El filtro de ubicación tiene el mismo tipo de hueco. El brief del mercado incluye entre sus ciudades Langley, Burnaby, Coquitlam, Port Coquitlam y Port Moody; los quince chips del filtro omiten Langley y Port Coquitlam y muestran Coquitlam dos veces, mientras que todas las unidades de ejemplo de la tabla de escritorio están en Langley. El filtro de la versión anterior sí incluía Langley, Port Coquitlam y Delta.

El panel de precio lleva la etiqueta «Deposite» y reutiliza el rango del control deslizante del depósito.
La fecha de entrega se elige entre los días de un solo mes, mientras que los años de entrega del archivo van de 2024 a 2026.
Los porcentajes llevan el signo delante (%30), y «Deposite» está mal escrito en todo el archivo.

La cifra más importante de la página es la que indica de forma menos coherente.

CProperty — las cifras de cabecera de la página del inmueble: un rango de precios y recuadros, entre ellos un depósito del 30 %

CProperty — la estructura del depósito: un 20 % en total, dibujado como plazos del 8 %, 4 %, 4 % y 2 % con sus fechas

CProperty — el filtro de ubicación abierto: quince chips de ciudades, con Coquitlam dos veces — Figura 10Quince chips: ni Langley ni Port Coquitlam, y Coquitlam dos veces.

10Sistema

Un sistema 0.0.1 en marrón y crema

El sistema de diseño lleva la etiqueta de versión 0.0.1 en once tableros: color, tipografía, cabecera y pie de página, botones, casillas y botones de opción, interruptores, perfil, modal, campos de formulario, migas de pan y toasts. Reúne 13 conjuntos de componentes con 248 variantes —solo los botones suman 90— y 67 estilos de color. Las escalas de marca son un marrón principal y un crema; el azul, el gris, el verde y el rojo marcan los estados. Una página de iconos añade 120 conjuntos de iconos en cinco tamaños, con tableros de iconos de servicios y de lugares.

Dos carencias muestran dónde se detuvo. No hay variables: la única colección de variables está vacía, así que cada color es un estilo. Y el tablero tipográfico documenta Poppins y Mazzard, mientras que la mayoría de las pantallas usan Hurme Geometric Sans 3, que solo aparece en uno de los 12 estilos de texto.

Sistema de diseño de CProperty, versión 0.0.1 — el tablero de color con escalas de marrón, crema, azul, gris, verde y rojo — Figura 11El tablero de color: las escalas de marca, marrón y crema, sobre los colores de estado, versión 0.0.1.

11Resultados

Un registro de diseño, no un lanzamiento

Nada en el archivo indica que CProperty llegara a lanzarse, y no hay cifras de uso ni de leads que presentar. Lo que contiene es un diseño responsive completo para el lado del comprador de un mercado de preventa.

pantallas en siete flujos: 76; Seis en anchos de escritorio, tableta y móvil; el blog, en escritorio y móvil; Entregable
componentes del sistema de diseño: 261; 13 conjuntos y 248 variantes, versión 0.0.1; Entregable
paneles de filtro dibujados abiertos: 6; Ubicación, fecha de entrega, puntuación de inversión, depósito, precio y «Advanced»; Entregable

Qué se entregó

Una página de inmueble con calendario del depósito y escenarios de hipoteca
Una barra de filtros con seis paneles abiertos
Una tabla de unidades, el detalle de la unidad y una comparación de tres
Formularios de captación de leads con selector de agente inmobiliario o comprador
Un flujo de inicio de sesión de siete estados

12Lo que aprendí

Lo que cambiaría

01
Una cifra, una fuente
El inmueble de ejemplo indica su depósito de cuatro maneras. En una página de preventa, el depósito es la cifra con la que planifica el comprador; debería guardarse una sola vez y mostrarse en todas partes, para que la cabecera y el calendario no puedan contradecirse.
02
Contrastar el resultado con el brief
El brief del mercado nombraba cada ciudad y cada barrio; el filtro de ubicación omitió dos y duplicó una tercera. Comparar el filtro terminado con el brief, línea por línea, lo habría detectado en minutos.
03
Documentar la tipografía que de verdad se usa
El tablero tipográfico declara Poppins y Mazzard, mientras que la mayoría de las pantallas usan Hurme Geometric Sans 3, que aparece en un único estilo de texto. Un sistema de diseño solo es un sistema si describe las pantallas a las que sirve.

Idioma