CProperty — Presale-Wohnungen in Metro Vancouver, vergleichbar gemacht

01Kontext

Die bewusste Wahl

CProperty ist ein Marktplatz für Presale-Wohnungen im Lower Mainland von British Columbia – Eigentumswohnungen und Townhouses, die verkauft werden, bevor sie gebaut sind. Das C steht für „conscious“, also bewusst, und die Hero-Zeile greift das auf: „Choose Consciously, Invest Delightfully.“ Die Beispieladressen liegen im West End von Vancouver.

Das Briefing zum Markt liegt als Notiz in der Datei und geht Stadt für Stadt vor: Vancouver und die North Shore, die Tri-Cities, Burnaby, New Westminster, Surrey, Richmond, Langley und ein äußerer Ring bis Abbotsford und White Rock. Das Design ist eine Figma-Datei mit 13 Seiten: sieben Produkt-Flows (Startseite, Objekt, Bauträger, Objektliste, Einheiten und Grundrisse, Anmeldung und Blog), sechs davon in Desktop-, Tablet- und Mobile-Breite gezeichnet und der Blog für Desktop und Mobile, insgesamt 76 Screens, dazu ein Design System und ein Archiv mit einer früheren Version.

CProperty — die Objektseite auf dem Desktop: die Galerie mit Preisspanne und Kennzahlen daneben, die Tabs, der Überblick und die Info-Kacheln — Abbildung 02Die Objektseite auf dem Desktop: die Galerie, daneben die Preisspanne und sechs Kennzahlen, darunter die Tabs und der Überblick.

02Problem

Eine Anzahlung auf ein Gebäude, das noch nicht steht

Wer im Vorverkauf kauft, bindet Geld, Jahre bevor es etwas zu besichtigen gibt: eine Anzahlung, die während des Baus in Teilzahlungen fällig wird, eine Abtretungsgebühr, falls der Vertrag vor der Fertigstellung weiterverkauft werden muss, ein monatliches Hausgeld pro Quadratfuß und ein Übergabetermin, der Jahre entfernt liegt. Die Zahlen, die über den Kauf entscheiden, stehen meist an verschiedenen Stellen: in der Broschüre eines Bauträgers, in einem Verkaufsbüro, in einer Tabelle.

Die Aufgabe von CProperty ist es, sie nebeneinanderzustellen, erst für ein Projekt, dann über mehrere Einheiten hinweg, damit Käufer sehen, was eine Wohnung vor, während und nach dem Bau kostet.

CProperty — der obere Teil einer Objektseite auf dem Smartphone, mit nummerierten Markierungen an der Preisspanne und an drei Reihen von Kennzahlen — Abbildung 03Der obere Teil einer Objektseite auf dem Smartphone: die Preisspanne und die Zahlen, nach denen Presale-Käufer planen.

03Kurswechsel

Von Broschüren für Makler zu Vergleichen für Käufer

Eine frühere Version des Produkts liegt auf einer eigenen Seite der Datei: 57 Frames, die nicht von Sina stammen; deshalb ist hier keiner davon zu sehen. Sie richtete sich an Makler. Ein Premium-Konto in zwei Tarifen schaltete Daten zu jeder Einheit, den direkten Vergleich und Broschüren für Kundenpräsentationen frei; Makler hatten ein Dashboard mit einem Angebotsgenerator, und Bauträger legten ihre Projekte und Einheiten selbst an.

Das Redesign kehrt das um. Dashboards und Tarife sind verschwunden, das Stöbern ist kostenlos, und Kaufinteresse kommt über zwei Formulare herein: „Contact Sales Center“ unter der Tabelle der Einheiten und „Get Exclusive Information“ auf den Objekt- und Bauträgerseiten; dieses Formular fragt, ob der Absender Makler oder Käufer ist. Makler werden weiterhin bedient – als Leads, nicht als Abonnenten. Die Kernidee des Angebotsgenerators, Einheiten nebeneinanderzustellen, lebt in der Vergleichsseite weiter, und die vergleicht jetzt Geld statt technischer Daten.

CProperty — die überarbeitete Vergleichsseite: drei Einheiten mit Finanzdaten, Ausstattung, Alltags- und Wohnungsmerkmalen und einem CProperty Rating — Abbildung 04Die Vergleichsseite: drei Einheiten nebeneinander, zuerst die Finanzdaten, dann Ausstattung, Merkmale und ein Rating.

04Vorgehen

Die Datei verrät die Reihenfolge der Arbeit

Node-IDs in Figma steigen, während eine Datei bearbeitet wird; die Median-ID jedes Frames bringt die Arbeit also in eine Reihenfolge. Das Fundament des Design Systems kam zuerst, beim Anlegen der Datei. Es folgten Startseite und Objektseite, dann etwa gleichzeitig die Objektliste mit ihren Filtern und der Anmelde-Flow, danach die Bauträgerseite. Einheiten, Detailansicht und Vergleich entstanden zuletzt – der Teil des Produkts, in dem die meisten Entscheidungen fallen.

Jeder Flow ist gleich aufgebaut: eine Titelkarte, dann eine Spalte pro Breakpoint (Desktop mit 1440, Tablet mit 1028 und Mobile mit 360 oder 393 Pixeln), mit einem Screen pro Zustand. In einem letzten Durchgang wurde der Footer in fast jedem Screen auf jeder Seite gegen einen neuen ausgetauscht.

Die Flows in der Reihenfolge ihrer Entstehung

01
Fundament des SystemsFarbe, Typografie, Buttons, Header und Footer; Modals, Formulare und Toasts kamen später
02
StartseiteHero, Suche, neueste Projekte, Funktionsweise und FAQ

05Lösung

Filter, die Anlegerfragen stellen

Die Listenseite beginnt mit „Invest Delightfully with Selecting Project!“ und einer Filterleiste, die zuerst die Fragen eines Anlegers stellt: Standort, Übergabetermin, Investment-Rating, Anzahlung und Preis. Schlafzimmer, Badezimmer, Stellplätze, Abstellräume, Objekttyp, maximale Gesamtanzahlung und Fertigstellungstermin warten unter „Advanced“. Jeder der sechs Filter ist geöffnet gezeichnet: ein Raster aus Städte-Chips, ein Kalender, Schieberegler für Rating, Anzahlung und Preis sowie das Panel „Advanced“.

Die Objektseite liest sich wie eine Presale-Checkliste. Neben der Galerie stehen eine Preisspanne und sechs Kennzahlen: Übergabejahr, Anzahlung, Investment-Rating, monatliche Rate, Grundrisstypen und Durchschnittsmiete. Darunter führt die Seite vom Überblick bis zu Preis und Kosten. Dazwischen liegen Einheiten und Grundrisse, ein Anzahlungsplan aus datierten Teilzahlungen, Innen- und Außengestaltung mit Aufpreisen für Abstellraum und Stellplatz sowie ein Abschnitt zum Immobilienwert mit Diagrammen zur Nachbarschaft. Der Bereich Preis und Kosten zeigt Hypothekenszenarien nach Eigenanteil, monatliche Raten bei verschiedenen Zinssätzen und den Betrag, der bei Kaufabschluss fällig wird.

CProperty — die Filterleiste der Objektliste mit geöffnetem Panel „Advanced“: Objekttyp, maximale Anzahlung, Fertigstellungstermin, Schlafzimmer, Badezimmer, Stellplätze und Abstellräume — Abbildung 05Die Filterleiste mit geöffnetem Panel „Advanced“: die Anlegerfragen auf der Leiste, die Fragen zum Haushalt dahinter.

CProperty — der Bereich Preis und Kosten: Hypothekenszenarien nach Eigenanteil, ein Raster monatlicher Raten nach Zinssatz und die bei Kaufabschluss fälligen Kosten — Abbildung 06Preis und Kosten: Szenarien nach Eigenanteil, ein Raster monatlicher Raten nach Zinssatz und der Betrag, der bei Kaufabschluss fällig wird. Die Zahlen in der Datei sind Platzhalter; das Design ist die Struktur.

06Vergleich

Einheiten vergleichen, nicht Gebäude

Der Bereich Einheiten und Grundrisse ist eine Tabelle (Projekt, Grundriss, Schlafzimmer plus Flex-Raum, Standort, Größe, Preis) mit Favorit, „More“ und „Add to Compare“ in jeder Zeile und einem Formular „Contact Sales Center“ darunter. Die Detailansicht wiederholt die Finanzdaten für eine einzelne Einheit: Preis, Übergabetermin, Abtretungsgebühr, Hausgeld pro Quadratfuß, Eigenanteil und Grundriss.

Die Vergleichsseite stellt drei Einheiten in derselben Reihenfolge nebeneinander: zuerst die Finanzdaten (Gesamtpreis, Abtretungsgebühr, Hausgeld, Eigenanteil), dann Ausstattung, Alltagsmerkmale wie Stellplatz und E-Ladestation, Wohnungsmerkmale und ein CProperty Rating für Innengestaltung und Immobilienwert. Das Rating macht das Markenversprechen zu einem Datenfeld: Die Plattform bewertet die Wohnung selbst, nicht nur das Inserat.

Jede Einheit trägt ein CProperty Rating, also endet jeder Vergleich mit dem eigenen Urteil der Plattform.

CProperty — die Tabelle der Einheiten und Grundrisse auf dem Desktop, jede Zeile mit Favorit, „More“ und „Add to Compare“, darunter ein Kontaktformular — Abbildung 07Einheiten als Tabelle, mit „Add to Compare“ in jeder Zeile und dem Formular für das Verkaufsbüro darunter.

CProperty — die Detailansicht einer Einheit auf dem Smartphone: Schlafzimmer, Badezimmer, Balkon, Bauträger und ein CProperty Rating für Innengestaltung und Immobilienwert

CProperty — das Formular „Get Exclusive Information“ auf dem Smartphone, mit einem Schalter für Makler oder Käufer

07Entscheidungen

Fünf Entscheidungen hinter dem Vergleich

Das Redesign beruht auf fünf Entscheidungen, die die Datei sichtbar macht.

01
Käufern die Zahlen kostenlos geben und Makler als Leads behandeln
Die frühere Version verkaufte Maklern Daten zu Einheiten, direkte Vergleiche und Kundenbroschüren im Jahres- oder Dreimonatsabo. Das Redesign öffnet diese Zahlen für alle Besucher und leitet das Kaufinteresse über zwei Formulare, von denen eines fragt, ob der Absender Makler oder Käufer ist.
Abwägung
Der Umsatz muss aus Leads statt aus Abos kommen, und die Datei hält kein Preismodell dafür fest.
02
Die Anzahlung als Zahlungsplan zeigen, nicht als einzelnen Prozentsatz
Eine Presale-Anzahlung wird in datierten Teilzahlungen über die Bauzeit geleistet, und eine einzelne Zahl verschleiert, wann das Geld fällig ist. Die Objektseite zeigt sie als Kacheln, jede mit ihrem Anteil und ihrem Datum.
Abwägung
Für jedes Projekt muss der Zahlungsplan eingepflegt werden, und die Summe muss mit dem Kopfbereich übereinstimmen – was sie auf der Beispielseite nicht tut.
03
Einheiten vergleichen, nicht Projekte
Abtretungsgebühren, Hausgeld pro Quadratfuß und Aufpreise für Stellplatz oder E-Ladestation unterscheiden sich je nach Einheit und Grundriss. Deshalb steht „Add to Compare“ in jeder Zeile der Tabelle, und die Vergleichsseite stellt die Finanzdaten von drei Einheiten nebeneinander.

08Meine Rolle

Sinas Anteil

Aufgeführt anhand der Datei. Sie nennt kein Team und hält nicht fest, wer was entschieden hat; dies ist also die Arbeit in der Datei, kein Anspruch auf alleinige Urheberschaft.

Verantwortet

Die sieben Produkt-Flows, sechs davon in Desktop-, Tablet- und Mobile-Breite
Die Objektseite: Anzahlungsplan, Preis und Kosten sowie Immobilienwert
Die Filterleiste und ihre sechs geöffneten Zustände
Die Tabelle der Einheiten, die Detailansicht und der Dreiervergleich
Die Lead-Formulare und der Anmelde-Flow mit sieben Zuständen
Die Markenebene des Design Systems: die Farbskalen in Braun und Creme und 13 Komponentensets

Mitverantwortet

Mitgearbeitet

Der Auftraggeber, dessen Briefing den Markt Stadt für Stadt beschrieb

Die frühere Version, die in derselben Datei archiviert ist, stammt nicht von Sina. Sie wird hier nur als Kontext beschrieben, und keiner ihrer Screens wird gezeigt.

09Kritik

Vier Anzahlungen auf einer Seite

Das Beispielobjekt beantwortet die Frage „Wie viel zahle ich vor der Fertigstellung?“ auf vier verschiedene Arten. Der Kopfbereich nennt eine Anzahlung von 30 %. Der Infoblock nennt eine Gesamtanzahlung von 32.500 $ und einen Eigenanteil von 25 %. Der Anzahlungsplan nennt insgesamt 20 % – und seine Teilzahlungen von 8 %, 4 %, 4 % und 2 % ergeben zusammen 18 %.

Der Standortfilter hat eine Lücke derselben Art. Das Markt-Briefing nennt unter seinen Städten Langley, Burnaby, Coquitlam, Port Coquitlam und Port Moody; die fünfzehn Chips des Filters lassen Langley und Port Coquitlam weg und zeigen Coquitlam doppelt, während jede Beispieleinheit in der Desktop-Tabelle in Langley liegt. Der Filter der früheren Version hatte Langley, Port Coquitlam und Delta noch enthalten.

Das Preis-Panel ist mit „Deposite“ beschriftet und übernimmt die Spanne des Anzahlungsreglers.
Der Übergabetermin wird aus den Tagen eines einzigen Monats gewählt, während die Übergabejahre in der Datei von 2024 bis 2026 reichen.
Prozentwerte stehen mit dem Zeichen voran (%30), und „Deposite“ ist durchgehend falsch geschrieben.

Die wichtigste Zahl der Seite ist die, die sie am wenigsten einheitlich angibt.

CProperty — die Kennzahlen im Kopfbereich der Objektseite: eine Preisspanne und Kacheln, unter anderem mit einer Anzahlung von 30 %

CProperty — die Anzahlungsstruktur: insgesamt 20 %, dargestellt als Teilzahlungen von 8 %, 4 %, 4 % und 2 % mit ihren Terminen

CProperty — der geöffnete Standortfilter: fünfzehn Städte-Chips, in denen Coquitlam zweimal vorkommt — Abbildung 10Fünfzehn Chips: kein Langley, kein Port Coquitlam und zweimal Coquitlam.

10System

Ein 0.0.1-System in Braun und Creme

Das Design System trägt auf elf Boards die Versionsangabe 0.0.1: Farbe, Typografie, Header und Footer, Buttons, Checkboxen und Radiobuttons, Toggles, Profil, Modal, Formularfelder, Breadcrumbs und Toasts. Es umfasst 13 Komponentensets mit 248 Varianten – allein 90 davon entfallen auf Buttons – und 67 Farbstile. Die Markenskalen sind ein Hauptbraun und ein Creme; Blau, Grau, Grün und Rot kennzeichnen Zustände. Eine Icon-Seite ergänzt 120 Icon-Sets in fünf Größen, dazu Boards mit Ausstattungs- und Orts-Icons.

Zwei Lücken zeigen, wo es stehen geblieben ist. Es gibt keine Variablen: Die einzige Variablensammlung ist leer, also ist jede Farbe ein Stil. Und das Typo-Board dokumentiert Poppins und Mazzard, während die meisten Screens in Hurme Geometric Sans 3 gesetzt sind, die nur in einem der 12 Textstile vorkommt.

CProperty Design System, Version 0.0.1 — das Farbboard mit Farbskalen in Braun, Creme, Blau, Grau, Grün und Rot — Abbildung 11Das Farbboard: die Markenskalen in Braun und Creme über den Zustandsfarben, Version 0.0.1.

11Ergebnisse

Eine Designdokumentation, kein Launch

Nichts in der Datei belegt, dass CProperty an den Start ging, und es gibt keine Nutzungs- oder Lead-Zahlen zu berichten. Die Datei enthält ein vollständiges responsives Design für die Käuferseite eines Presale-Marktes.

Screens in sieben Flows: 76; Sechs Flows in Desktop-, Tablet- und Mobile-Breite; der Blog für Desktop und Mobile; Gelieferter Output
Design-System-Komponenten: 261; 13 Sets und 248 Varianten, Version 0.0.1; Gelieferter Output
geöffnet gezeichnete Filterpanels: 6; Standort, Übergabetermin, Investment-Rating, Anzahlung, Preis und „Advanced“; Gelieferter Output

Was geliefert wurde

Eine Objektseite mit Anzahlungsplan und Hypothekenszenarien
Eine Filterleiste mit sechs geöffneten Panels
Eine Tabelle der Einheiten, eine Detailansicht und ein Dreiervergleich
Lead-Formulare mit Schalter für Makler oder Käufer
Ein Anmelde-Flow mit sieben Zuständen

12Gelernt

Was ich ändern würde

01
Eine Zahl, eine Quelle
Das Beispielobjekt gibt seine Anzahlung auf vier Arten an. Auf einer Presale-Seite ist die Anzahlung die Zahl, nach der Käufer planen; sie sollte einmal gespeichert und überall angezeigt werden, damit sich Kopfbereich und Zahlungsplan nicht widersprechen können.
02
Das Ergebnis mit dem Briefing abgleichen
Das Markt-Briefing nannte jede Stadt und jedes Viertel; der Standortfilter ließ zwei davon weg und führte eine dritte doppelt. Den fertigen Filter Zeile für Zeile mit dem Briefing abzugleichen, hätte das in Minuten aufgedeckt.
03
Die Schrift dokumentieren, die wirklich im Einsatz ist
Das Typo-Board nennt Poppins und Mazzard, während die meisten Screens in Hurme Geometric Sans 3 gesetzt sind, die in einem einzigen Textstil vorkommt. Ein Design System ist nur dann ein System, wenn es die Screens beschreibt, denen es dient.

Sprache