メトロバンクーバーのプレセール（竣工前販売）住宅を、比べられるものに。日付入りのデポジット（手付金）スケジュール、住戸ごとの比較、プラットフォーム独自の評価を、買い手は無料で使える。
01背景
CPropertyは、ブリティッシュコロンビア州ローワーメインランドのプレセール住宅、つまり建設前に販売されるコンドミニアムやタウンハウスのためのマーケットプレイスだ。Cはconscious（意識的な）の頭文字で、ヒーローのキャッチコピー「Choose Consciously, Invest Delightfully.」もそれを繰り返している。サンプルの住所は、バンクーバーのウェストエンドにある。
市場ブリーフは、ファイル内に残るメモに都市ごとに記されていた。バンクーバーとノースショア、トライシティーズ、バーナビー、ニューウェストミンスター、サレー、リッチモンド、ラングレー、そしてアボッツフォードやホワイトロックまで広がる外周部だ。デザインは13ページからなるひとつのFigmaファイルにまとまっている。7つのプロダクトフロー（ホーム、物件、デベロッパー、物件一覧、住戸と間取り、サインイン、ブログ）のうち6つをデスクトップ、タブレット、モバイルの幅で、ブログをデスクトップとモバイルの幅で描いた計76画面に、デザインシステムと以前のバージョンのアーカイブが加わる。
02課題
プレセールの買い手は、見学できる建物が存在する何年も前にお金を投じる。建設中に分割で支払うデポジット、竣工前に契約を売却する必要が生じたときの契約譲渡手数料、1平方フィートあたりで毎月かかる管理費、そして何年も先の引き渡し日。購入を左右するこうした数字は、たいていデベロッパーのパンフレット、販売センター、スプレッドシートと、ばらばらの場所にある。
CPropertyの役割は、それらの数字をまずひとつのプロジェクトについて、次に住戸をまたいで並べ、住まいが建つ前、建設中、建った後にいくらかかるのかを買い手が見られるようにすることだ。
03方向転換
ファイルには、プロダクトの以前のバージョンが専用のページに残されている。57フレームあるが、Sinaの仕事ではないため、ここでは一枚も掲載していない。販売先は不動産エージェントで、2つのプランがあるプレミアムアカウントでは、各住戸のデータ、並べての比較、顧客へのプレゼンテーション用パンフレットが使えた。不動産エージェントには提案書ビルダー付きのダッシュボードがあり、デベロッパーは自社のプロジェクトと住戸を自ら登録していた。
リデザインは、それをひっくり返した。ダッシュボードも料金プランもなくなり、閲覧は無料になり、購入の意思は2つのフォームを通じて届く。住戸表の下にある「Contact Sales Center」と、物件ページとデベロッパーページにある「Get Exclusive Information」だ。後者は、送信者が不動産エージェントか買い手かを尋ねる。不動産エージェントも引き続き対象だが、有料会員としてではなく、見込み客（リード）としてだ。提案書ビルダーの核にあった考え方、つまり住戸を並べて比べることは比較ページとして生き残り、いまでは仕様ではなくお金を比べている。
04アプローチ
FigmaのノードIDはファイルが編集されるにつれて大きくなるため、各フレームのIDの中央値から作業の順序がわかる。最初に、ファイルの立ち上げ時にデザインシステムの基盤が入った。続いてホームと物件ページ、次にフィルター付きの物件一覧とサインインのフローがほぼ同時期に、そしてデベロッパーページ。住戸一覧、住戸詳細、比較は最後に描かれた。プロダクトの中で最も判断が集中する部分だ。
どのフローも同じ構成で並ぶ。タイトルカードに続いて、ブレークポイントごとの列が並び（デスクトップは1,440、タブレットは1,028、モバイルは360または393）、状態ごとに1画面ずつ置かれている。最後の仕上げでは、すべてのページのほぼすべての画面に新しいフッターが差し替えられた。
05ソリューション
一覧ページは「Invest Delightfully with Selecting Project!」という見出しと、投資家の問いを先に置いたフィルターバーで始まる。エリア、引き渡し日、投資レート、デポジット、価格だ。寝室、浴室、駐車場、収納、物件タイプ、デポジット総額の上限、竣工日は「Advanced」の中に控えている。6つのフィルターはどれも開いた状態で描かれている。都市チップのグリッド、カレンダー、レート・デポジット・価格のスライダー、そして「Advanced」パネルだ。
物件ページは、プレセールのチェックリストのように読める。ギャラリーの横には、価格帯と6つの数字が並ぶ。引き渡し年、デポジット、投資レート、月々の支払い額、間取りタイプ、平均家賃だ。その下のページは概要から始まり、住戸と間取り、日付入りの分割払いとして描かれたデポジットのスケジュール、収納や駐車場の有料オプションを含むインテリアとエクステリアのデザイン、周辺エリアのグラフを備えた物件価値のセクションを経て、価格と諸費用へと続く。そこには頭金別の住宅ローンのシナリオ、金利ごとの月々の返済額、決済時に必要な現金が示されている。
06比較
住戸と間取りは表になっている（プロジェクト、間取り、寝室数＋フレックス、所在地、広さ、価格）。各行にはお気に入り、「More」、「Add to Compare」があり、表の下には「Contact Sales Center」のフォームがある。住戸詳細は、ひとつの住戸について費用面を繰り返し示す。価格、引き渡し日、契約譲渡手数料、1平方フィートあたりの管理費、頭金、プランだ。
比較ページは、3つの住戸を同じ順序で並べる。まず費用面（総額、契約譲渡手数料、管理費、頭金）、次に共用施設、駐車場やEV充電といった暮らしの基本項目、住まいの基本項目、そしてインテリアデザインと物件価値についてのCProperty Rating。この評価は、ブランドの約束をひとつのデータ項目に変える。プラットフォームが評価するのは、掲載情報だけでなく住まいそのものだ。
すべての住戸にCProperty Ratingが付くので、どの比較もプラットフォーム自身の判断で締めくくられる。
住戸詳細：住まいの基本項目とCProperty Rating。
07主要な意思決定
リデザインは、ファイルから読み取れる5つの選択の上に成り立っている。
以前のバージョンは、住戸データ、並べての比較、顧客向けパンフレットを、年間または3か月の契約で不動産エージェントに販売していた。リデザインはそれらの数字をすべての訪問者に開放し、購入の意思を2つのフォームに集める。そのひとつは、送信者が不動産エージェントか買い手かを尋ねる。
プレセールのデポジットは、建設期間を通じて日付の決まった分割払いで支払われる。ひとつの数字だけでは、お金がいつ必要になるのかが見えない。物件ページはそれをタイルで描き、それぞれに割合と日付を示している。
契約譲渡手数料、1平方フィートあたりの管理費、駐車場やEV充電のオプションは、住戸やプランによって異なる。だから「Add to Compare」を住戸表のすべての行に置き、比較ページで3つの住戸の費用面を並べる。
08私の役割
ファイルから整理した一覧。ファイルにはチームの記載も、誰が何を決めたかの記録もないため、これはファイル内の作業であり、単独で手がけたという主張ではない。
同じファイルにアーカイブされている以前のバージョンは、Sinaの仕事ではない。背景として説明しているだけで、その画面は一枚も掲載していない。
09批評
サンプル物件は「竣工までにいくら払うのか」という問いに、4通りの答えを出している。ヘッダーはデポジット30%。情報ブロックはデポジット総額32,500ドルと頭金25%。デポジットのスケジュールは合計20%で、しかもその分割払い（8%、4%、4%、2%）を足すと18%にしかならない。
エリアフィルターにも同じ種類の抜けがある。市場ブリーフは、ラングレー、バーナビー、コキットラム、ポートコキットラム、ポートムーディを都市として挙げている。ところがフィルターの15のチップにはラングレーとポートコキットラムがなく、コキットラムが2回出てくる。しかもデスクトップの表に並ぶサンプル住戸は、すべてラングレーにある。以前のバージョンのフィルターには、ラングレー、ポートコキットラム、デルタが含まれていた。
ページで最も重要な数字が、最も一貫性なく示されている。
ヘッダー：デポジット30%。
10システム
デザインシステムには、11枚のボードにわたってバージョン0.0.1と記されている。カラー、タイポグラフィ、ヘッダーとフッター、ボタン、チェックボックスとラジオボタン、トグル、プロフィール、モーダル、フォームフィールド、パンくずリスト、トーストだ。248のバリアントを持つ13のコンポーネントセット（ボタンだけで90）と、67のカラースタイルがある。ブランドのランプはメインのブラウンとクリームで、ブルー、グレー、グリーン、レッドが状態を表す。アイコンページには5サイズの120のアイコンセットがあり、共用施設や場所のアイコンを集めたボードも加わる。
2つの抜けが、このシステムがどこで止まったかを示している。まず、バリアブルがない。唯一のバリアブルコレクションは空で、すべての色がスタイルとして定義されている。次に、タイプボードはPoppinsとMazzardを記載しているが、ほとんどの画面はHurme Geometric Sans 3で組まれており、この書体は12のテキストスタイルのうちひとつにしか登場しない。
11成果
CPropertyがローンチしたことを示す証拠はファイルになく、報告できる利用数やリード数もない。ファイルにあるのは、プレセール市場の買い手側を網羅したレスポンシブデザインだ。
12学んだこと
サンプル物件は、デポジットを4通りに示している。プレセールのページでは、デポジットは買い手が計画の拠りどころにする数字だ。一度だけ保存して、あらゆる場所にそれを表示すべきであり、そうすればヘッダーとスケジュールが食い違うことはありえない。
市場ブリーフはすべての都市と地区を挙げていたが、エリアフィルターはそのうち2つを落とし、3つ目を重複させた。完成したフィルターをブリーフと1行ずつ照らし合わせていれば、数分で気づけたはずだ。
タイプボードはPoppinsとMazzardを掲げているが、ほとんどの画面はHurme Geometric Sans 3で組まれており、この書体はテキストスタイルひとつにしか登場しない。デザインシステムは、それが支える画面を記述していてこそシステムと呼べる。
「Get Exclusive Information」は、送信者が不動産エージェントか買い手かを尋ねる。
ブランドの約束である「意識的な選択」が、ひとつの項目になる。インテリアデザインと物件価値についてのCProperty Ratingが、すべての住戸とすべての比較に付く。
バーにはエリア、引き渡し日、投資レート、デポジット、価格が並び、寝室、浴室、駐車場、収納は「Advanced」の中に控えている。このバーが想定する買い手は、間取りを選ぶ前に、どこにお金を投じるかを決めようとしている。
スケジュール：合計20%だが、分割払いを足すと18%。