Carsparency Pro — پلتفرم نمایشگاه‌داران، از پیشنهاد تا انتقال سند
نمایشگاه‌دار در مارکت‌پلیس Carsparency در امارات اول در مزایده‌های زمان‌دار پیشنهاد می‌دهد و بعد از برد، خرید را در پنج مرحله تا انتقال سند پیش می‌برد.
شرکت
Carsparency
نقش
طراح محصول
نوع
محصول
صنعت
مارکت‌پلیس خودرو · B2B
تیم
طراح محصول؛ تعداد اعضا و نقشهای تیم در فایل‌ها ثبت نشده است
ابزارها و فناوریها
Figma
مسئله
نمایشگاه‌دار خودرویی را می‌برد که هرگز از نزدیک ندیده است. قیمت، پرداخت، مدارک، تحویل و انتقال سند هنوز باقی است و هرکدام می‌تواند معامله را متوقف کند.
نقش
مسئولیت طراحی محصول را در پلتفرم نمایشگاه‌داران پیش بردم؛ هم در اپ و هم در نسخه‌ی وب دسکتاپ، از فهرست مزایده تا انتقال سند.
نتیجه
طراحی ۱۲۹ فریم اپ و ۱۶۷ فریم دسکتاپ برای کل چرخه‌ی خرید. در فایل‌ها تاریخ انتشار یا دادهای از میزان استفاده ثبت نشده است.
شکل 01
شکل 01اپ نمایشگاه‌داران: فهرست مزایده‌های زنده با فیلتر برند و سال، شیت ثبت پیشنهاد، و سفارشهای در جریان که هرکدام نشان می‌دهند در کدام مرحله‌ی خرید هستند.
01زمینه
پلتفرم نمایشگاه‌داران را هم‌زمان برای اپ و سایت دسکتاپ طراحی کردم.
Carsparency یک مارکت‌پلیس خودروی کارکرده در امارات بود. فروشنده‌های شخصی خودرو را آگهی می‌کردند، کارشناس وضعیتش را ثبت می‌کرد و نمایشگاه‌داران تأییدشده در مزایده‌های زمان‌دار برای خریدش رقابت می‌کردند. Pro بخش نمایشگاه‌داران است؛ همان محصولی که خریدارها با آن کار می‌کردند.
فایل Figma هر دو نیمه‌ی محصول را دارد. چهار صفحه‌ی اپ مزایده‌ها، سفارش‌ها، حساب کاربری و ورود را پوشش می‌دهند و چهار صفحه‌ی وب همین بخش‌ها را در عرض دسکتاپ تکرار می‌کنند. این صفحه‌ها در مجموع ۱۲۹ فریم اپ و ۱۶۷ فریم دسکتاپ دارند که بیشترشان Stateهای مختلف همان صفحه‌ها هستند، نه صفحه‌های تازه.
شکل 02فهرست مزایده در دسکتاپ: تب‌های «زنده»، «پیش‌رو» و «موجودی»، پنل فیلتر برای قیمت، کارکرد، سال، برند و فاصله، و روی هر کارت پیشنهاد فعلی در برابر ارزش منصفانه‌ی بازار (Fair Market Value).
02مسئله
بردن مزایده وسط مسیر خرید است، نه پایان آن
نمایشگاه‌دار روی خودرویی پیشنهاد می‌دهد که ندیده، در برابر رقیبانی که نمی‌بیند، و شمارش معکوس هم جلو می‌رود. صفحه‌های مزایده باید کمک می‌کردند نمایشگاه‌دار این تصمیم را سریع و با دلیلی روشن بگیرد.
بعد بخش سخت‌تر شروع می‌شود. پس از بسته شدن مزایده، قیمت خودرو هنوز باید نهایی شود، پولش در چند مرحله پرداخت شود، مدارکش کامل شود، تحویل داده شود و سندش به‌طور قانونی منتقل شود. این کار بین نمایشگاه‌دار، فروشنده و کارکنان Carsparency جلو می‌رود و در هر مرحله ممکن است متوقف شود. فلو خیلی از مارکت‌پلیس‌ها با پیشنهاد برنده تمام می‌شود، اما این فلو ادامه پیدا می‌کند.
03فلو
هر خرید از پنج مرحله‌ی شماره‌دار می‌گذرد
بزرگ‌ترین بخش فایل مزایده نیست، سفارش‌هاست. هر خودرویی که نمایشگاه‌دار در مزایده برده، از وضعیت‌های «در حال مذاکره»، «در انتظار» و «خریداری‌شده» می‌گذرد. هیچ کارتی فقط «در انتظار» نمی‌نویسد؛ کارت می‌گوید سفارش در کدام‌یک از پنج مرحله است و گام بعدی چیست.
وضعیت را در تمام کارت‌ها و صفحه‌های جزئیات در جای ثابتی گذاشتم: نواری رنگی با فقط یک دکمه کنارش، تا نمایشگاه‌دار همیشه ببیند قدم بعدی با خودش است یا نه.
چرخه‌ی خرید، به همان ترتیبی که در فایل آمده است
01
پیشنهادفهرستهای زنده، پیش‌رو و موجودی؛ پیشنهاد عادی، پراکسی، خودکار یا خرید فوری؛ Stateهای برد و باخت.
02
مذاکرهاگر فروشنده نپذیرد، نمایشگاه‌دار پیشنهادش را بالا می‌برد یا قیمت فروشنده را میپذیرد.
در حال باخت
شکل 04سفارشهای در جریان در دسکتاپ. نوار زیر هر کارت شماره و نام مرحله را نشان می‌دهد، مثلاً «۳ از ۵، در انتظار تسویه»، و دکمهی بالای آن تنها اقدامی است که آن مرحله لازم دارد.
04تصمیم‌های کلیدی
چهار تصمیمی که روز کاری نمایشگاه‌دار را شکل می‌دهند
این انتخاب‌ها در فریم‌ها پیداست، اما دلیلشان در فایل ثبت نشده است؛ پس دلیل‌های زیر را از روی شیوه‌ی ساخت صفحه‌ها نوشتم.
01
ارزش منصفانه‌ی بازار زیر هر پیشنهاد
نمایشگاه‌داری که زیر فشار زمان پیشنهاد می‌دهد، به نقطه‌ی مرجعی نیاز دارد که از پیشنهاد بقیه نیاید. برای همین، ارزش‌گذاری پلتفرم را کنار پیشنهاد فعلی گذاشتیم، هم در فهرست و هم در صفحه‌ی جزئیات، تا هر پیشنهاد یک مقایسه باشد، نه یک حدس.
بده‌بستان
با این کار، خود ارزش‌گذاری هم جای بحث پیدا می‌کند؛ پیشنهادی که خیلی بالاتر از Fair Market Value باشد، این سؤال را پیش می‌کشد که چرا.
02
شماره‌گذاری مراحل پس از بسته‌شدن مزایده
«در انتظار» به نمایشگاه‌دار نمی‌گوید چه باید بکند. «مرحله‌ی ۱ از ۵، در انتظار پیش‌پرداخت» می‌گوید کجای کار است، چقدر مانده و نوبت کیست.
گزینه‌های دیگر
فقط یک وضعیت «در جریان»، یا صفحه‌ای جدا برای خط زمانی.
03
یک قالب جزئیات برای کل چرخه
صفحه‌ی خودرویی که نمایشگاه‌دار از آن پیشنهاد داد، همان صفحه‌ای است که بعد تحویل را در آن پیگیری می‌کند. فقط نوار وضعیت و تنها اقدامش تغییر می‌کند، پس نمایشگاه‌دار بین مراحل لازم نیست چیزی را از نو یاد بگیرد.
05راه‌حل
مزایده سریع پیش می‌رود و کارهای اداری بعدش همیشه پیداست
بخش مزایده را برای مقایسه‌ی سریع طراحی کردم. شمارش معکوس در دقیقه‌های آخر قرمز می‌شود، یک برچسب رنگی می‌گوید «در حال برد» یا «در حال باخت»، و با پیشنهاد پراکسی و خودکار، نمایشگاه‌دار می‌تواند بدون اینکه مدام ساعت را نگاه کند رقابت کند.
بخش سفارش را طوری طراحی کردم که نمایشگاه‌دار بتواند به آن اعتماد کند. در مرحله‌ی پیش‌پرداخت، قبل از کسر هر مبلغی، مبلغ قابل پرداخت، موجودی در دسترس و کیف پول نشان داده می‌شود. ریز قیمت تک‌تک کسورات را جدا نشان می‌دهد، فهرست مدارک نام هر برگه‌ای را که برای انتقال لازم است می‌آورد، و هر مرحله به‌جای یک خطای کلی، State خطای خودش را دارد؛ مثل پرداخت ناموفق، رد شدن مدرک آپلودشده یا اضافه‌پرداخت.
مزایده‌ها: زنده، پیش‌رو و موجودی، با فیلتر و مرتب‌سازی
پیشنهاد: پیشنهاد عادی، پراکسی، خودکار و خرید فوری، با پیام‌های موفقیت و خطا
سفارش‌ها: مذاکره، پیش‌پرداخت، تسویه، رسید پرداخت، تحویل و انتقال سند
حساب کاربری: کیف پول، حساب‌های بانکی در حال بررسی، مدارک، اعلان‌ها و راهنما
شکل 05جزئیات خودرو در دسکتاپ. کارت قیمت، پیشنهاد فعلی را کنار ارزش منصفانه‌ی بازار (Fair Market Value)، زمان باقیمانده و دو راه پیشنهاددادن میگذارد: پراکسی یا مستقیم.
در حال مذاکره
در انتظار تحویل
شکل 06همان کارت قیمت در دو مرحله. فقط نوار وضعیت و اقدام عوض می‌شود: در حال مذاکره با فروشنده، با «افزایش قیمت»، و سپس در انتظار تحویل خودرو.
پیش‌پرداخت
ریز قیمت
شکل 07پیش‌پرداخت و ریز قیمت، بریده از دیالوگهای دسکتاپ: مبلغ قابل پرداخت در برابر موجودی در دسترس، سپس قیمت خالص، تخفیفها و کسورات پیش از مبلغ نهایی.
شکل 08نقشه‌ی بازشده‌ی خودرو که در فایل Pro کشیده شده است: سقف، کاپوت، درها و سپرها صاف کنار هم، با نمادهایی برای فرورفتگی، خطوخش و رنگشدگی. همین طرح در صفحه‌ی ایرادهای گزارش کارشناسی هم به کار رفته است.
06همه‌ی صفحه‌ها
۲۱۶ صفحه‌ی موبایل و ۱۷۰ صفحه‌ی دسکتاپ
در ۲۷ سپتامبر ۲۰۲۶ همه‌ی صفحه‌های فایل Pro در Figma بررسی شد و از هر فریمی که اندازه‌ی یک صفحه‌نمایش را داشت خروجی گرفته شد: صفحه‌های موبایل با عرض ۳۹۰ پوینت و صفحه‌های دسکتاپ با عرض ۱٬۴۴۰ پیکسل. چهار صفحه‌ی اپ در این فایل ۱۲۹ فریم دارند و چهار صفحه‌ی وب ۱۶۷ فریم دسکتاپ. هر فریم فقط یک بار آمده است. با اضافه شدن چیدمان‌های موبایل خود وب و صفحه‌ی Updates، روی‌هم ۲۱۶ صفحه‌ی موبایل و ۱۷۰ صفحه‌ی دسکتاپ می‌شود. هر دو فهرست مسیر نمایشگاه‌دار را دنبال می‌کنند: ورود، فهرست مزایده‌ها و جزئیات یک خودرو، بعد سفارش‌هایی که با بردن مزایده باز می‌شوند (مذاکره، پیش‌پرداخت، تسویه و رسید پرداخت، سند و تحویل) و در آخر حساب کاربری، حساب‌های بانکی، کیف پول و راهنما.
بیشتر فریم‌های موبایل صفحه‌های وب همان فریم‌های اپ‌اند و فقط یک بار آمده‌اند. ۴۲ فریمی که فرق دارند زیر «وب موبایل» آمده‌اند. این فریم‌ها قیمت‌های دلاری، متن واقعی «حریم خصوصی»، «درباره‌ی ما» و «راهنما»، Stateهای خالی و یک شیت اشتراک‌گذاری دارند. تب‌های «بازطراحی» صفحه‌ی Updates را نشان می‌دهند: صفحه‌ی جزئیات خودرو که از نو ساخته شده و نقشه‌ی ایرادها دارد، ورود با شماره‌ی تلفن و Stateهای بارگذاری. اندازه‌های App Store و کانسپت‌های کارت مزایده هم تب‌های خودشان را دارند. ایمیل‌ها و شماره‌تلفن‌های نمونه و عکس پرتره‌ی نمونه پوشانده شده‌اند، و همین‌طور اسکرین‌شات انتقال بانکی‌ای که به‌عنوان رسید پرداخت نمونه به کار رفته است.
07اکوسیستم
مسیر خودرو از گوشی فروشنده شروع شد و اینجا تمام می‌شود
هرچه نمایشگاه‌دار در Pro می‌خواند، قبلاً در بخش‌های دیگر محصول ساخته شده است. فروشنده خودرو را در ویزارد وب توصیف کرده، کارشناس آن را در اپ کارشناسی تأیید کرده و اپراتورها در بک‌آفیس قیمتش را تعیین کرده و نمایشگاه‌داران را دعوت کرده‌اند. در Pro این پرونده به دست خریدار می‌رسد.
اجزای مشترک در تمام فایل‌ها دیده می‌شوند؛ همان پرونده‌ی خودرو (بازه‌ی کارکرد، مشخصات GCC، مالک سند، سوابق سرویس)، همان درجه‌بندی وضعیت، همان واژه‌های قیمت (اینجا Fair Market Value و در بک‌آفیس Fair) و همان دیزاین سیستمی که همه روی آن ساخته شده‌اند.
08نقش من
سهم سینا
این فهرست را از روی فایل Pro نوشتم. تعداد اعضای تیم و اینکه چه کسی چه تصمیمی گرفت در فایل‌ها ثبت نشده است؛ پس این فهرست کاری را نشان می‌دهد که در فایل هست، نه اینکه همه را به‌تنهایی طراحی کرده باشم.
مسئولیت با من
↳طراحی ناوبری و ساختار اپ و نسخه‌ی وب دسکتاپ
↳طراحی فهرست مزایده، فیلترها و Stateهای پیشنهاد عادی، پراکسی و خودکار
↳طراحی فلوهای حساب کاربری، کیف پول، حساب بانکی و مدارک، همراه با Stateهای بررسی‌شان
↳طراحی نقشه‌ی بازشده‌ی خودرو برای مشخص کردن محل آسیب
مسئولیت مشترک
—
همکاری
↳همکاران مهندسی و عملیات که نامشان در فایل‌ها نیامده است
در فایل یک صفحه‌ی Updates و چند نسخه‌ی آزمایشی شماره‌دار از کارت (Test 2 تا Test 7) هم هست؛ یعنی کارت مزایده را در چند دور اصلاح کردم، نه اینکه یک‌باره کشیده باشم.
09نتایج
آنچه در فایل تحویل دادم
این‌ها شمار فریم‌های طراحی‌شده است، نه نتیجه. هیچ تاریخ انتشار، آمار استفاده یا نرخ تبدیلی در فایل‌های Carsparency ثبت نشده است.
فریم اپ
۱۲۹
چهار صفحه‌ی اپ: مزایده‌ها، خودروهای من، حساب کاربری، و ورود و آنبوردینگ
خروجی تحویل‌شده
فریم دسکتاپ
۱۶۷
چهار صفحه‌ی وب که همین بخش‌ها را در عرض ۱٬۴۴۰ پیکسل تکرار می‌کنند
خروجی تحویل‌شده
مرحله‌ی شماره‌دار سفارش
۵
از پیش‌پرداخت تا رسید پرداخت، هرکدام با وضعیت و اقدام خودش
خروجی تحویل‌شده
آنچه تحویل شد
↳فهرست مزایده، فیلتر و مرتب‌سازی
↳پیشنهاد عادی، پراکسی، خودکار و خرید فوری
↳مذاکره و پیشنهاد متقابل
↳پیش‌پرداخت، تسویه و رسید پرداخت
↳پیگیری تحویل و انتقال سند
↳کیف پول، حساب‌های بانکی و مدارک
10آنچه یاد گرفتم
درس‌های این کار
01
مرحله‌ی بعد از State موفقیت را هم طراحی کن
فلو خیلی از مزایده‌ها با پیشنهاد برنده تمام می‌شود. اینجا آن نقطه تقریباً وسط راه بود و فریم‌هایی که بعد از آن طراحی کردم (پرداخت‌ها، مدارک و تحویل) از صفحه‌های مزایده بیشتر شدند.
02
در نمایش وضعیت، عدد از صفت گویاتر است
«مرحله‌ی ۳ از ۵، در انتظار تسویه» به سه سؤال نمایشگاه‌دار جواب می‌داد: کجا هستم، چقدر مانده و قدم بعدی چیست. «در انتظار» به‌تنهایی به هیچ‌کدام جواب نمی‌داد.
03
داده‌ی نمونه موارد دشوار را پنهان می‌کند
تمام کارت‌های فایل یک خودرو و یک قیمت را نشان می‌دادند؛ پس چیدمان را هیچ‌وقت با عنوانی بلند، خودرویی ارزان کنار خودرویی گران یا پیشنهادی خیلی بالاتر از ارزش‌گذاری‌اش امتحان نکردم.
پیشپرداختپرداخت از کیف پول یا بهصورت آنلاین، با نمایش موجودی در دسترس پیش از هر چیز.
04
تسویهریز قیمت، تسویهی نهایی و رسید پرداخت، با Stateهای ردشده و اضافه‌پرداخت.
05
انتقالدر انتظار تحویل خودرو، سپس در انتظار انتقال سند، و در پایان خریداری‌شده.
در حال برد
پیشنهاد پراکسی
شکل 03کارت پیشنهاد در سه State: در حال باخت، در حال برد، و هنگام تعیین پیشنهاد پراکسی. خط Fair Market Value در همه‌ی آنها زیر پیشنهاد میماند.
بده‌بستان
صفحه کوتاه نمیشود و گزارش کارشناسی در همه‌ی مراحل زیر کارت قیمت میماند.
04
نشاندادن هزینهی برد پیش از درخواست آن
در ریز قیمت، قیمت خالص خرید، تخفیفها و کسورات را جدا از هم آوردیم و شیت پیشنهاد هم هزینهی حمل و ضمانت تمدیدشدهی خریدار را اضافه می‌کند تا نمایشگاه‌دار هزینهی تمامشده را ببیند، نه فقط قیمت نهایی مزایده را.
شکل 09همه‌ی صفحه‌ها در عرض گوشی، اول اپ فلو به فلو و بعد چیدمان‌های موبایل خود وب و بازطراحیها. هر صفحه را باز کنید تا تمامش را ببینید.
شکل 10همه‌ی صفحه‌های دسکتاپ، فلو به فلو. هر صفحه را باز کنید تا تمامش را ببینید.
