خانه‌های پیش‌فروش ونکوور بزرگ را می‌شود کنار هم سنجید: با جدول پیش‌پرداخت و تاریخ هر قسط، مقایسه‌ی واحد به واحد و امتیاز خود پلتفرم؛ همه رایگان برای خریدار.
01زمینه
CProperty مارکت‌پلیسی برای خانه‌های پیش‌فروش در لوئر مین‌لند بریتیش کلمبیاست، یعنی آپارتمان‌ها و تاون‌هاوس‌هایی که پیش از ساخته شدن فروخته می‌شوند. C در نام محصول از conscious می‌آید، یعنی آگاهانه، و تیتر صفحه‌ی اصلی هم همین را تکرار می‌کند: «Choose Consciously, Invest Delightfully.» نشانی‌های نمونه‌ی طرح‌ها در وست‌اند ونکوور است.
بریف بازار یادداشتی است که در خود فایل مانده و منطقه را شهر به شهر معرفی می‌کند: ونکوور و نورث شور، تری‌سیتی، برنابی، نیو وست‌مینستر، سوری، ریچموند، لنگلی، و حلقه‌ای بیرونی که تا ابتسفورد و وایت‌راک می‌رسد. کل طراحی در یک فایل Figma با ۱۳ پیج است و هفت جریان محصول دارد: صفحه‌ی اصلی، صفحه‌ی ملک، صفحه‌ی سازنده، فهرست املاک، واحدها و پلان‌ها، ورود و بلاگ. شش جریان در عرض دسکتاپ، تبلت و موبایل کشیده شده‌اند و بلاگ در دسکتاپ و موبایل، که روی هم ۷۶ صفحه می‌شود. یک سیستم طراحی و آرشیوی از نسخه‌ی قبلی هم در فایل هست.
02مسئله
خریدار پیش‌فروش سال‌ها پیش از آنکه چیزی برای بازدید وجود داشته باشد، تعهد مالی می‌پذیرد: پیش‌پرداختی که در طول ساخت قسط‌به‌قسط پرداخت می‌شود، هزینه‌ی واگذاری قرارداد برای وقتی که لازم شود قرارداد را پیش از تکمیل بفروشد، شارژ ماهانه به ازای هر فوت مربع، و تاریخ تحویلی که سال‌ها بعد است. عددهایی که خرید به آن‌ها بستگی دارد معمولاً در جاهای مختلفی پخش‌اند، مثل بروشور سازنده، دفتر فروش یا یک صفحه‌گسترده.
کار CProperty این است که این عددها را کنار هم بگذارد، اول برای یک پروژه و بعد میان واحدها، تا خریدار ببیند یک خانه پیش از ساخت، در طول ساخت و پس از آن چقدر برایش تمام می‌شود.
03تغییر مسیر
نسخه‌ی قبلی محصول در پیج جداگانه‌ای از فایل مانده است: ۵۷ فریم که کار سینا نیستند و برای همین هیچ‌کدام اینجا نمایش داده نمی‌شوند. مشتری‌های آن نسخه مشاوران املاک بودند. حساب ویژه دو سطح داشت و داده‌ی واحدها، مقایسه‌ی واحدها کنار هم و بروشور برای ارائه به مشتری را در اختیار کاربر می‌گذاشت. مشاوران املاک داشبوردی با ابزار ساخت پروپوزال داشتند و سازنده‌ها پروژه‌ها و واحدهای خودشان را ثبت می‌کردند.
بازطراحی این منطق را برعکس می‌کند. داشبوردها و سطح‌های اشتراک حذف شده‌اند، مرور ملک‌ها رایگان است و علاقه‌مندی کاربر از طریق دو فرم ثبت می‌شود: «Contact Sales Center» زیر جدول واحدها، و «Get Exclusive Information» در صفحه‌های ملک و سازنده، که می‌پرسد فرستنده مشاور املاک است یا خریدار. مشاوران املاک هنوز جایی در محصول دارند، اما به‌عنوان سرنخ فروش، نه مشترک. ایده‌ی اصلی ابزار پروپوزال، یعنی کنار هم گذاشتن واحدها، در صفحه‌ی مقایسه باقی مانده و این صفحه حالا به جای مشخصات، پول را مقایسه می‌کند.
04رویکرد
در Figma شناسه‌ی نودها با ویرایش فایل بالا می‌رود، پس میانه‌ی شناسه‌های هر فریم ترتیب کار را نشان می‌دهد. اول، هم‌زمان با راه‌اندازی فایل، پایه‌های سیستم طراحی ساخته شد. بعد صفحه‌ی اصلی و صفحه‌ی ملک کشیده شدند، سپس فهرست املاک با فیلترهایش و جریان ورود، تقریباً هم‌زمان، و بعد صفحه‌ی سازنده. واحدها، جزئیات واحد و مقایسه آخر از همه کشیده شدند؛ همان بخشی از محصول که بیشترین تصمیم‌ها در آن گرفته می‌شود.
همه‌ی جریان‌ها یک‌جور چیده شده‌اند: یک کارت عنوان و بعد برای هر بریک‌پوینت یک ستون، یعنی دسکتاپ با عرض ۱٬۴۴۰، تبلت با ۱٬۰۲۸ و موبایل با ۳۶۰ یا ۳۹۳ پیکسل، و برای هر حالت یک صفحه. در دور آخر، فوتر تازه‌ای تقریباً در همه‌ی صفحه‌های همه‌ی پیج‌ها جایگزین شد.
05راهحل
صفحه‌ی فهرست املاک با جمله‌ی «Invest Delightfully with Selecting Project!» شروع می‌شود و بعد نوار فیلتری می‌آید که اول سراغ پرسش‌های یک سرمایه‌گذار می‌رود: موقعیت، تاریخ تحویل، امتیاز سرمایه‌گذاری، پیش‌پرداخت و قیمت. اتاق خواب، سرویس بهداشتی، پارکینگ، انباری، نوع ملک، حداکثر کل پیش‌پرداخت و تاریخ تکمیل در پنل «Advanced» مانده‌اند. هر شش فیلتر در حالت باز هم کشیده شده‌اند: شبکه‌ای از چیپ‌های شهر، یک تقویم، اسلایدر برای امتیاز سرمایه‌گذاری، پیش‌پرداخت و قیمت، و پنل «Advanced».
صفحه‌ی ملک مثل چک‌لیست خرید پیش‌فروش خوانده می‌شود. کنار گالری، بازه‌ی قیمت و شش عدد آمده است: سال تحویل، پیش‌پرداخت، امتیاز سرمایه‌گذاری، پرداخت ماهانه، انواع پلان واحد و میانگین اجاره. پایین‌تر، بخش‌های صفحه به این ترتیب می‌آیند: نمای کلی، واحدها و پلان‌ها، جدول پیش‌پرداخت که به شکل قسط‌های تاریخ‌دار کشیده شده، طراحی داخلی و بیرونی با قیمت جداگانه برای انباری و پارکینگ اضافه، و بخش ارزش ملک با نمودارهای محله. در انتها قیمت و هزینه‌ها آمده است: سناریوهای وام مسکن بر اساس پرداخت اولیه، پرداخت ماهانه در نرخ‌های بهره‌ی مختلف، و پول نقدی که هنگام انتقال سند لازم است.
06مقایسه
واحدها و پلان‌ها در یک جدول آمده‌اند، با ستون‌های پروژه، پلان، اتاق خواب به‌علاوه‌ی فلکس، موقعیت، مساحت و قیمت. هر ردیف دکمه‌ی علاقه‌مندی، «More» و «Add to Compare» دارد و فرم «Contact Sales Center» زیر جدول است. صفحه‌ی جزئیات واحد همین ارقام مالی را برای یک واحد تکرار می‌کند: قیمت، تاریخ تحویل، هزینه‌ی واگذاری قرارداد، شارژ ماهانه به ازای هر فوت مربع، پرداخت اولیه و پلان.
صفحه‌ی مقایسه سه واحد را با ترتیبی یکسان کنار هم می‌گذارد. اول ارقام مالی می‌آید: قیمت کل، هزینه‌ی واگذاری قرارداد، شارژ ماهانه و پرداخت اولیه. بعد از آن امکانات، ملزومات زندگی مثل پارکینگ و شارژر خودروی برقی، ملزومات سکونت، و امتیاز CProperty برای طراحی داخلی و ارزش ملک می‌آیند. این امتیاز وعده‌ی برند را به یک فیلد داده تبدیل می‌کند: پلتفرم به خود خانه نمره می‌دهد، نه فقط به آگهی آن.
هر واحد امتیاز CProperty دارد، پس هر مقایسه با قضاوت خود پلتفرم تمام می‌شود.
جزئیات واحد: ملزومات سکونت و امتیاز CProperty.
فرم «Get Exclusive Information» می‌پرسد فرستنده مشاور املاک است یا خریدار.
07تصمیمهای کلیدی
بازطراحی روی پنج انتخاب بنا شده که در فایل دیده می‌شوند.
نسخه‌ی قبلی داده‌ی واحدها، مقایسه‌ی کنار هم و بروشور مشتری را با اشتراک سالانه یا سهماهه به مشاوران املاک میفروخت. بازطراحی این عددها را به روی هر بازدیدکنندهای باز می‌کند و علاقه‌مندی کاربر را به دو فرم هدایت می‌کند که یکی از آن‌ها می‌پرسد فرستنده مشاور املاک است یا خریدار.
پیش‌پرداخت پیش‌فروش در طول ساخت و در قسط‌های تاریخ‌دار پرداخت می‌شود و اگر فقط یک عدد نشان داده شود، معلوم نیست پول کی باید پرداخت شود. صفحه‌ی ملک پیش‌پرداخت را به شکل کارتهایی نشان می‌دهد که هر کدام سهم و تاریخ خودش را دارد.
هزینه‌ی واگذاری قرارداد، شارژ ماهانه به ازای هر فوت مربع و هزینه‌ی اضافهی پارکینگ یا شارژر خودروی برقی به واحد و پلان بستگی دارد. برای همین «Add to Compare» در ردیف هر واحد هست و صفحه‌ی مقایسه ارقام مالی سه واحد را کنار هم می‌گذارد.
وعده‌ی برند، یعنی انتخاب آگاهانه، به یک فیلد تبدیل می‌شود: امتیاز CProperty برای طراحی داخلی و ارزش ملک، روی هر واحد و در هر مقایسه.
موقعیت، تاریخ تحویل، امتیاز سرمایه‌گذاری، پیش‌پرداخت و قیمت روی نوار فیلترند و اتاق خواب، سرویس بهداشتی، پارکینگ و انباری در پنل «Advanced» قرار دارند. این نوار برای خریداری طراحی شده که قبل از انتخاب پلان تصمیم میگیرد پولش را کجا بگذارد.
08نقش من
این فهرست از روی فایل نوشته شده است. فایل نام هیچ تیمی را نمیبرد و تصمیم هیچکس را ثبت نکرده است، پس این فهرست فقط کاری را نشان می‌دهد که در فایل هست و ادعای طراحی انفرادی نیست.
نسخه‌ی قبلی که در همین فایل بایگانی شده، کار سینا نیست؛ فقط برای روشنشدن زمینه توصیف شده و هیچ صفحهای از آن نمایش داده نمیشود.
09نقد
ملک نمونه به پرسش «پیش از تکمیل ساختمان چقدر باید بپردازم؟» چهار جواب متفاوت می‌دهد. بالای صفحه پیش‌پرداخت ۳۰٪ آمده است. بخش اطلاعات، کل پیش‌پرداخت را ۳۲٬۵۰۰ دلار و پرداخت اولیه را ۲۵٪ می‌گوید. جدول پیش‌پرداخت جمع را ۲۰٪ نوشته است، در حالی که قسط‌هایش، یعنی ۸٪، ۴٪، ۴٪ و ۲٪، روی هم ۱۸٪ می‌شوند.
فیلتر موقعیت هم همین نوع ناهمخوانی را دارد. بریف بازار از میان شهرهایش لنگلی، برنابی، کوکیتلام، پورت کوکیتلام و پورت مودی را نام می‌برد. در پانزده چیپ فیلتر، لنگلی و پورت کوکیتلام نیستند و کوکیتلام دو بار آمده است، در حالی که همه‌ی واحدهای نمونه در جدول دسکتاپ در لنگلی‌اند. فیلتر نسخه‌ی قبلی، لنگلی، پورت کوکیتلام و دلتا را داشت.
مهمترین عدد این صفحه، ناهماهنگترین عدد آن هم هست.
بالای صفحه: پیش‌پرداخت ۳۰٪.
جدول اقساط: ۲۰٪ در مجموع، با قسطهایی که روی هم ۱۸٪ می‌شوند.
10سیستم
سیستم طراحی یازده بورد دارد: رنگ، تایپوگرافی، هدر و فوتر، دکمه‌ها، چک‌باکس و رادیو، تاگل‌ها، پروفایل، مودال، فیلدهای فرم، بردکرامب‌ها و توست‌ها. روی همه‌ی آن‌ها نسخه‌ی 0.0.1 نوشته شده است. سیستم ۱۳ مجموعه‌ی کامپوننت با ۲۴۸ واریانت و ۶۷ استایل رنگ دارد. ۹۰ واریانت از این‌ها فقط مال دکمه‌هاست. طیف‌های برند یک قهوه‌ای اصلی و یک کرم‌اند و آبی، خاکستری، سبز و قرمز وضعیت‌ها را نشان می‌دهند. یک پیج آیکون هم ۱۲۰ مجموعه آیکون در پنج اندازه اضافه می‌کند، همراه با بوردهایی از آیکون‌های امکانات و مکان‌ها.
دو جای خالی نشان می‌دهد کار روی سیستم کجا متوقف شد. هیچ متغیری تعریف نشده است: تنها کالکشن متغیرها خالی است، پس همه‌ی رنگ‌ها به شکل استایل تعریف شده‌اند. بورد تایپوگرافی هم Poppins و Mazzard را مستند کرده، اما بیشتر صفحه‌ها با Hurme Geometric Sans 3 چیده شده‌اند و این فونت فقط در یکی از ۱۲ استایل متن آمده است.
11نتایج
در فایل هیچ شاهدی نیست که CProperty راه‌اندازی شده باشد و عددی هم از میزان استفاده یا سرنخهای فروش در دست نیست. آنچه فایل در خود دارد، طراحی کامل و واکنشگرای سمت خریدار برای یک بازار پیش‌فروش است.
12آنچه یاد گرفتم
ملک نمونه پیشپرداختش را به چهار شکل اعلام می‌کند. در صفحه‌ی پیش‌فروش، پیش‌پرداخت همان عددی است که خریدار برنامهاش را بر اساس آن میچیند. این عدد باید یک بار ذخیره شود و همهجا از همان منبع نمایش داده شود، تا بالای صفحه و جدول پیش‌پرداخت نتوانند دو عدد متفاوت نشان دهند.
بریف بازار همه‌ی شهرها و محلهها را نام برده بود، اما فیلتر موقعیت دو تا از آن‌ها را جا انداخت و سومی را دو بار آورد. اگر فیلتر نهایی سطر به سطر با بریف مقایسه میشد، این خطا در چند دقیقه پیدا میشد.
بورد تایپوگرافی Poppins و Mazzard را اعلام می‌کند، اما بیشتر صفحه‌ها با Hurme Geometric Sans 3 چیده شده‌اند و این فونت فقط در یک استایل متن آمده است. سیستم طراحی فقط وقتی سیستم است که همان صفحههایی را توصیف کند که برایشان ساخته شده.