بازطراحی پلتفرم فروشگاهی

نمای کلی

یک مارکت‌پلیس منطقه‌ای با بیش از ۴۰۰ فروشنده نیاز به بازسازی کامل داشت. پلتفرم اولیه نرخ رهاسازی سبد خرید ۶۸٪ در موبایل، فرآیند پرداختی ۷ مرحله‌ای، و یکپارچگی طراحی صفر میان ویترین‌های فروشندگان مختلف داشت.

هدف: کاهش اصطکاک، یکپارچه‌سازی زبان بصری، و ارائه‌ی تجربه‌ای موبایل-محور که فروشندگان بتوانند بدون شکستن برند آن را سفارشی‌سازی کنند.

مسئله

تحقیقات کاربری سه نقطه‌ی شکست حیاتی را نشان داد:

1. شکاف اعتماد — صفحات محصول فاقد نشانه‌های اجتماعی (social proof) بودند و کیفیت تصاویر میان فروشندگان ناهمگون بود.
2. اصطکاک در پرداخت — پرداخت ۷ مرحله‌ای بدون گزینه‌ی مهمان و بدون ذخیره‌ی روش پرداخت.
3. کارایی — LCP معادل ۸٫۴ ثانیه روی 4G؛ تصاویر بهینه‌سازی‌نشده و بدون CDN ارائه می‌شدند.

فرآیند

کشف و تحقیق

• تست‌های کاربردپذیری هدایت‌شده با ۱۲ شرکت‌کننده در موبایل و دسکتاپ
• تحلیل نقشه‌ی حرارتی (heatmap) و ضبط جلسات (۲ هفته، ۴۰٬۰۰۰ نشست)
• بنچمارک رقبا: فرآیندهای پرداخت Shopify، Zalando، Amazon

طراحی

• کتابخانه‌ی کامپوننت در Figma: بیش از ۸۰ کامپوننت، ۴ مقیاس فاصله‌گذاری، ۳ سطح برند
• پرداخت ساده‌شده: از ۳ مرحله به آکاردئون تک‌صفحه‌ای با اعتبارسنجی درون‌خطی
• سامانه‌ی ویترین فروشنده: چارچوب برند ثابت، هیرو و رنگ تاکیدی قابل‌سفارشی‌سازی

مهندسی

• مهاجرت از یک مونولیت PHP به Next.js App Router + tRPC API
• Stripe Payment Element جایگزین فرم کارت اختصاصی شد — دامنه‌ی PCI به SAQ-A کاهش یافت
• CDN از Cloudinary + تبدیل خودکار به WebP/AVIF؛ بارگذاری تنبل تصاویر با جای‌گیر تار (blur placeholder)

نتایج

پشته‌ی فناوری

Next.js 15 · TypeScript · Tailwind CSS · Stripe · tRPC · Prisma · PostgreSQL · Cloudinary · Figma

---

به‌دنبال ساختی سریع و متمرکز بر تبدیل هستید؟ خدمات توسعه‌ی وب من، مطالعه‌ی موردی رشد ارگانیک سئو، یا شروع یک پروژه را ببینید.