در حال بارگذاری

CASE STUDYنئون لندNeon Land

نئون را قبل از خرید روی دیوار ببینید.

فروشگاه تابلوهای نئون LED با یک فرق: مشتری طرح، اندازه و رنگ نور را خودش انتخاب می‌کند و نتیجه را همان لحظه روی دیوار می‌بیند. فروشگاه کامل با سفارش اختصاصی، پرداخت قسطی و یک معماری که مرورگر را هرگز به ووکامرس وصل نمی‌کند.

مشتری
نئون لند
حوزه
تابلو نئون سفارشی
دامنه‌ی کار
فروشگاه آنلاین با پیکربندی سفارش
سال
۱۴۰۵
کار ما
تجربه کاربریفروشگاه اینترنتیمعماری فرانت‌اند
نئون لند — نئون را قبل از خرید روی دیوار ببینید.
01 / NEED

نیاز

تابلو نئون سفارشی را نمی‌شود از روی عکس کاتالوگ فروخت: مشتری باید متن، فونت، اندازه و رنگ نور خودش را ببیند. علاوه بر آن، معماری فروشگاه نباید مرورگر را به ووکامرس وصل کند.

  • پیش‌نمایش سفارش قبل از خرید
  • پیکربندی چندمرحله‌ای بدون گم‌کردن مشتری
  • پرداخت قسطی در کنار خرید عادی
  • سرعت صفحه، بدون وابستگی مستقیم به ووکامرس
02 / SOLUTION

راهکار

پیکربند چهار مرحله‌ای با پیش‌نمایش زنده‌ی نئون روی دیوار، و معماری‌ای که داده را از ووکامرس می‌گیرد اما مرورگر را هرگز مستقیم به آن وصل نمی‌کند.

  • پیش‌نمایش زنده روی تصویر دیوار
  • پیکربندی چهار مرحله‌ای
  • پرداخت قسطی در همان مسیر خرید
  • لایه‌ی میانی بین مرورگر و ووکامرس
صفحه‌ی اصلی نئون لند با تابلوی نئون روشن روی زمینه‌ی تیره
صفحه‌ی اصلی — نور، قبل از هر چیز.

01کشف

هر تابلو یک سفارش شخصی است.

تابلوی نئون به سفارش ساخته می‌شود: متن یا طرح، اندازه، رنگ نور. فروشگاه استاندارد — انتخاب محصول، سبد، پرداخت — دقیقاً همان چیزی را حذف می‌کند که تابلو را می‌فروشد: دیدنش روشن، روی دیوار خودت.

و سبد خرید چند میلیونی است؛ پرداخت قسطی یک گزینه‌ی تزئینی نیست.

  • تنوع عملاً بی‌نهایت: طرح × اندازه × رنگ نور
  • تصمیم خرید بصری است، نه مقایسه‌ی مشخصات
  • دو مسیر متفاوت: طرح آماده و سفارش اختصاصی
02تصمیم

پیکربندی چهار مرحله‌ای، پیش‌نمایش زنده.

سفارش اختصاصی چهار قدم دارد: انتخاب طرح، انتخاب اندازه، انتخاب رنگ نور، تأیید و تحویل. در تمام این مسیر، تابلو روی یک دیوار واقعی پیش‌نمایش می‌شود و با هر تغییر، همان لحظه عوض می‌شود.

معماری هم یک تصمیم صریح داشت: فرانت‌اند یک کلاینت عمومی و غیرقابل اعتماد است. مرورگر هرگز مستقیم با ووکامرس حرف نمی‌زند؛ یک لایه‌ی واسط (BFF) اعتبارنامه‌ها را نگه می‌دارد، ورودی را اعتبارسنجی می‌کند و فقط مدل‌های نرمال‌شده را برمی‌گرداند. قیمت، تخفیف، موجودی، کوپن و جمع کل همیشه سمت سرور محاسبه می‌شوند.

  • پنج دسته: انگیزشی، عاشقانه، دکور خانه، کافه و رستوران، گیمینگ
  • طرح‌های آماده با پیش‌نمایش روی دیوار، و مسیر سفارش اختصاصی
  • خطاها به فارسی و نرمال‌شده؛ هیچ پیام وردپرس یا PHP به کاربر نمی‌رسد
03ساخت

صفحه‌ی اصلی؛ نور روی زمینه‌ی تیره.

زمینه‌ی تیره انتخاب زیبایی‌شناختی نیست؛ نئون روی دیوار تیره خوانده می‌شود. اسلایدر، دسته‌ها، محصولات ویژه، بخش سفارش اختصاصی، مراحل کار، پروژه‌های واقعی، اینستاگرام و سؤال‌های متداول — با یک نوار پیشرفت اسکرول در بالای صفحه.

بخش «اول انتخاب کن دنبال چی هستی» با دسته‌ها و «طرح‌هایی که بیشتر دوستشان داریم»
دسته‌ها و طرح‌های منتخب — هر طرح روشن، روی دیوار واقعی.
دیوار نئون «کدومش مال توئه؟» با تابلوهای روشن در نماهای مختلف
«کدومش مال توئه؟» — دیوار نئون، جایی که تصمیم بصری گرفته می‌شود.
04ساخت

بیست‌ویک صفحه، یک قرارداد داده.

محصولات، جزئیات محصول، جست‌وجو، سبد، پرداخت، تشکر، حساب کاربری، سفارش‌ها و جزئیات سفارش، آدرس‌ها، علاقه‌مندی‌ها، گارانتی، ورود، ثبت‌نام، بازیابی رمز، تماس، درباره، سؤال‌های متداول. همه روی یک قرارداد داده‌ی واحد که مستقل از ووکامرس تعریف شده؛ اگر فردا بک‌اند عوض شود، رابط کاربری خبردار نمی‌شود.

در حالت توسعه، یک بک‌اند شبیه‌سازی‌شده با تأخیر واقعی و همه‌ی حالت‌های خطا — شبکه، سرور، نشست منقضی، کوپن نامعتبر، موجودی ناکافی — کار می‌کند تا هر صفحه قبل از اتصال به سرور واقعی تست شده باشد.

  • ۲۱ صفحه، یک مدل داده‌ی نرمال
  • پرداخت قسطی به‌عنوان بخشی از جریان خرید، نه یک بنر
  • نشست با کوکی HttpOnly سمت سرور؛ هیچ اعتبارنامه‌ای در مرورگر نمی‌ماند
بخش «طرح خودتو روشن کن» و «چطور سفارش بدم؟» با چهار مرحله‌ی سفارش اختصاصی
سفارش اختصاصی — چهار قدم، و پیش‌نمایش در تمام مسیر.
تحویل

دمو زنده است.

نسخه‌ی نمایشی با بک‌اند شبیه‌سازی‌شده در دسترس است و همه‌ی جریان‌ها — از پیکربندی تا پرداخت — قابل تجربه‌اند. اتصال به ووکامرس واقعی از طریق همان لایه‌ی واسط انجام می‌شود، بدون تغییر در رابط کاربری.

اعداد زیر مشخصات نسخه‌ی نمایشی‌اند.

۲۱
صفحه
۴
مرحله‌ی سفارش اختصاصی
۵
دسته‌ی محصول
۰
اتصال مستقیم مرورگر به ووکامرس