مطالعه موردی فروشگاه اختصاصی
پتلاک؛ طراحی فروشگاه اختصاصی پلاک حیوانات با پیشنمایش زنده
نمونه کار طراحی و توسعه پتلاک؛ فروشگاه اختصاصی سفارش پلاک حیوانات با شخصیسازی، پیشنمایش زنده SVG، پرداخت آنلاین و پنل مدیریت.
- نام پروژه
- پتلاک
- وضعیت
- فعال و آنلاین
- زمان اجرای ثبتشده
- ۲۰ روز
- مدل اجرا
- 2 مرحله
- هسته فنی
- Laravel + SVG
پتلاک چه محصولی است؟
معرفی پروژه
پتلاک یک فروشگاه آنلاین اختصاصی برای سفارش پلاک حیوانات خانگی است. کاربر مدل و رنگ پلاک را انتخاب میکند، نام حیوان خانگی و شماره تماس صاحبش را روی پیشنمایش زندهٔ محصول میبیند و با یک پرداخت سریع سفارشش را ثبت میکند.
نقش کدنوا: تولید فیزیکی، حکاکی و ارسال پلاک بر عهدهٔ کارفرماست. کار کدنوا طراحی و توسعهٔ سامانهٔ انتخاب، شخصیسازی، پیشنمایش، پرداخت و مدیریت سفارش بوده است
یک محصول شخصیسازیشده به چیزی بیشتر از فرم خرید عمومی نیاز داشت
مسئله پروژه
تصمیم پیش از پرداخت
مشتری باید پیش از خرید، نتیجه واقعی نام و شماره تماس را روی مدل و رنگ انتخابشده میدید.
تنوع اطلاعات هر محصول
مدلها میتوانستند رنگها، اندازهها و فیلدهای سفارش متفاوتی داشته باشند و این تفاوت باید از پنل مدیریت کنترل میشد.
خرید ساده روی موبایل
فرایند انتخاب، شخصیسازی، ورود اطلاعات و پرداخت باید در چند مرحله کوتاه انجام میشد و روی صفحه لمسی هم قابل استفاده میماند.
هماهنگی سفارش و پرداخت
سفارش تنها پس از پرداخت موفق نهایی میشد و اطلاعات شخصیسازی باید بدون اختلاف به پنل مدیریت منتقل میشد.
خروجی مورد انتظار کارفرما
هدفهای اجرایی
- ثبت سفارش آسان در چند کلیک و تجربه کاربری مناسب در موبایل و دسکتاپ.
- پیشنمایش لحظهای نام پت، شماره تماس و رنگهای انتخابی روی طرح پلاک.
- مدیریت محصولات، دستهبندیها، رنگها، قیمتها و فیلدهای اختصاصی هر محصول.
- اتصال پرداخت آنلاین، هزینه ثابت ارسال و پیامکهای اطلاعرسانی سفارش.
- پنل قابل استفاده برای مدیریت روزانه محصولات و پیگیری وضعیت سفارشها.
طراحی و توسعه صفر تا صد سامانه فروش
نقش کدنوا
تحلیل مسیر خرید
تقسیم فرایند به انتخاب طرح، شخصیسازی، اطلاعات حساب و آدرس، پرداخت و پیگیری سفارش.
UI و تجربه واکنشگرا
طراحی رابط ساده و هماهنگ با هویت بصری پتلاک برای دسکتاپ، تبلت و موبایل.
توسعه اختصاصی
پیادهسازی Front-end، Back-end، دیتابیس، پیشنمایش SVG و پنل مدیریت با Laravel.
هسته Quick Order، پیشنمایش SVG و مدیریت داینامیک محصولات با فروشگاهساز آماده پیادهسازی نشده است.
از انتخاب محصول تا ثبت سفارش در پنج گام
گردش کار اصلی
-
1
انتخاب مدل
کاربر مدل پلاک مناسب را از میان محصولات فعال انتخاب میکند.
-
2
شخصیسازی
رنگ، نام پت، شماره تماس و فیلدهای اختصاصی محصول ثبت میشوند.
-
3
پیشنمایش
نتیجه شخصیسازی روی SVG بدون بارگذاری مجدد صفحه نمایش داده میشود.
-
4
آدرس و پرداخت
اطلاعات گیرنده، هزینه ارسال و مبلغ نهایی کنترل و به درگاه ارسال میشود.
-
5
پیگیری سفارش
پس از پرداخت موفق، سفارش ثبت و از پنل کاربر و مدیریت قابل پیگیری است.
پیشنمایش SVG باید با سفارش ثبتشده یکسان میماند
تصمیم فنی اصلی
نام حیوان خانگی و شماره موبایل به عناصر مشخص داخل فایل SVG متصل شدند. رنگها، متن و اطلاعات محصول در مرورگر بهصورت زنده تغییر میکردند و اندازه و موقعیت نوشته متناسب با طول ورودی تنظیم میشد.
برای جلوگیری از اختلاف میان ظاهر پیشنمایش و سفارش نهایی، اطلاعات فقط در Front-end کنترل نشدند؛ ورودیهای نهایی در سمت سرور نیز اعتبارسنجی و همراه سفارش ذخیره شدند.
دلیل انتخاب SVG: حفظ کیفیت در اندازههای مختلف، حجم مناسب و امکان تغییر زنده رنگ و متن بدون ساخت تصویر جداگانه برای هر ترکیب.
مدیر برای اضافهکردن مدل یا فیلد جدید به تغییر کد وابسته نیست
محصول و فیلدهای داینامیک
مدیریت محصول و رنگ
افزودن، ویرایش، فعالسازی، قیمتگذاری و تعیین رنگهای قابل انتخاب برای هر مدل.
فیلدهای اختصاصی محصول
تعریف فیلد متنی، عدد، شماره تماس، متن چندخطی یا آپلود فایل با ترتیب و وضعیت اجباری قابل تنظیم.
مدیریت محتوای سایت
کنترل تصاویر، اسلایدرها، تیترها، راههای ارتباطی و بخشهای عمومی بدون ویرایش مستقیم کد.
ساختار قابل توسعه
افزودن مدلها، طرحها، رنگها و دادههای جدید بدون بازطراحی هسته فرایند سفارش.
ثبت سفارش، مبلغ نهایی و نتیجه پرداخت به یک جریان واحد متصل شدند
پرداخت و سفارش
- محاسبه مبلغ محصول و افزودن هزینه ثابت ارسال پیش از پرداخت.
- امکان تغییر هزینه ارسال و تنظیمات درگاه از پنل مدیریت.
- اتصال به درگاه پرداخت زیبال و ثبت اطلاعات پرداخت برای سفارش مربوطه.
- نهاییسازی سفارش پس از پرداخت موفق و جلوگیری از ثبت ناقص در پرداخت ناموفق.
- نمایش پیام واضح نتیجه پرداخت و ارسال اطلاعرسانیهای مرتبط با سفارش.
مسیر اصلی خرید فقط نسخه کوچکشده دسکتاپ نیست
تجربه موبایل
صفحه اصلی، کارت محصولات، فرم شخصیسازی، کنترلهای انتخاب رنگ، فیلدهای سفارش، دکمه اقدام و نتیجه پرداخت برای صفحه موبایل بازچینی شدند. هدف این بود که کاربر بتواند با اسکرول طبیعی و کنترلهای لمسی مناسب، پیشنمایش را ببیند و خرید را کامل کند.
ابزارها براساس مسئله انتخاب شدند
فناوریها
- Laravel
- PHP
- MySQL
- JavaScript
- SVG
- Zibal Payment
- SMS Service
- Responsive UI
پروژه در ۲۰ روز و دو مرحله اجرا شد
مراحل اجرا
-
1
مرحله اول: فروشگاه و مدیریت پایه
راهاندازی فروشگاه اختصاصی، نمایش محصولات، فرایند سفارش، حساب کاربری، پرداخت و پنل مدیریت محصولات و سفارشها.
-
2
مرحله دوم: شخصیسازی و اتصالها
افزودن پیشنمایش SVG، فیلدهای تکمیلی، پنل پیامکی و هزینه ثابت حملونقل.
یک فرایند یکپارچه از انتخاب محصول تا مدیریت سفارش
نتیجه قابل اثبات
پروژه فعال و آنلاین است و کاربر میتواند بدون هماهنگی دستی طولانی، مدل و رنگ را انتخاب کند، نام پت و شماره تماس را روی طرح ببیند، مبلغ نهایی را پرداخت کند و سفارش را ثبت کند. مدیر نیز محصولات، رنگها، فیلدها، هزینه ارسال و وضعیت سفارشها را از پنل کنترل میکند.
مرز ادعا: در اطلاعات فعلی، آمار تأییدشدهای درباره افزایش فروش، نرخ تبدیل یا تعداد سفارشها ثبت نشده است؛ بنابراین این Case Study نتیجه تجاری عددی منتشر نمیکند.
پتلاک چه چیزی از کدنوا نشان میدهد؟
توانمندی اثباتشده
طراحی سایت اختصاصی
ساخت تجربه فروش متناسب با محصول، بهجای محدودشدن به فرم عمومی فروشگاهی.
توسعه نرمافزار تحت وب
هماهنگی محصول، فیلدهای داینامیک، پرداخت، وضعیت سفارش و پنل مدیریت در یک سیستم.
حل مسئله با رابط تعاملی
تبدیل شخصیسازی محصول به پیشنمایش زنده و قابل اعتماد پیش از پرداخت.