وقتی که مسیر خرید در وبسایت فروشگاهی مشخص نباشه حتی وفادارترین هواداران هم از خرید از باشگاه محبوبشون دلسرد میشن. این اتفاقی بود که برای باشگاه ملوان بندرانزلی که پرافتخارترین و یکی از اصیل ترین تیم های شمال کشور است، پیش اومده بود. به دلیل جریان کاربری مبهم و نامشخص بودن مسیر خرید در وبسایت قبلی، اکثر هواداران نمیتونستن با ثبت خرید، از تیم محبوبشون حمایت کنن. اما نتیجه این پروژه فراتر از انتظار بود، استقبال آنقدر زیاد بود که در مدت چند هفته اول موجودی اکثر محصولات تمام شد و انبار قادر به شارژ محصولات نبود (اگر محصولات مرتب شارژ میشدن، نرخ آمارها فراتر از این مقدار میرفت).
نرخ تبدیل
افزایش فروش
بازگشت سرمایه
هزینه پشتیبانی
باشگاه ملوان با اهداف مشخصی وارد این پروژه شد. میخواست بار پشتیبانی رو کاهش بده، نبود فروشگاه فیزیکی رو جبران کنه، کیت‌ها و لباس های فصل جدید رو در دسترس هوادارانش قرار بده و به نیاز هوادارانی که برای خرید وارد وبسایت میشن پاسخ درست بده. چالش اصلی ما برای این پروژه نبود دیتای مورد نیاز برای بررسی رفتار و نیاز کاربر و فرصت فقط 2 هفته‌ای برای طراحی و پیاده سایزی بود که محدودیت شدیدی برای ما ایجاد کرد.
از آنجایی که هیچ نرم افزار Digital analytics روی وبسایت قبلی نصب نبود و ما هم فرصت نصب کردن و بررسی داده‌ها را نداشتیم صرفا به تجربیات اخیر تیم فروش پشتیبانی، کامنت‌های هواداران زیر پست های مرتبط و مقالاتی علمی که از قبل خوانده بودیم برای طراحی نسخه اول اکتفا کردیم.
در نتیجه این بررسی‌ها 4 مورد کلیدی برای ما روشن شد. اولین مورد، شفاف نبودن مسیر خرید بود که کاربر نمیدانست از کجا فروشگاه و کالایی که با قصد خرید وارد آن وارد وبسایت شده رو پیدا کنه.
دومین مورد بهینه نبودن برای نسخه موبایل بود با اینکه 96.2% (آمار نسخه فعلی) از ترافیک سایت از طریق موبایل بود اما وبسایت برای کاربران این دستگاه بهینه نشده بود.
سومین مورد سایز لباس بود، هیچ بخشی برای راهنمای سایز در نظر گرفته نشده بود و کاربران نگران انتخاب سایز اشتباه بودن که اصطلاحا “Size Anxiety” گفته میشه.
چهارمین مورد نامشخص بود وضعیت سفارش بود، یعنی بعد از پرداخت کاربر هیچ اطلاعی از وضعیت سفارش خود نداشت، که باعث افزایش بار پشتیبانی میشدند.
با مشخص شدن موارد اصلی و به دلیل محدودیت زمانی به جای استفاده از خلاقیت و تست آن، از راه کارهایی که قبلا آزموده شدن استفاده کردیم. برای رفع نامشخص بودن مسیر خرید، باید سایت فروشگاه رو از سایت اصلی جدا می‌کردیم و یک sub-domin جدا بهش اختصاص می‌دادیم تا کاربر با وارد شدن به وبسایت متوجه باشه که در چه مسیری قرار داره و کجا باید بره. برای رفع مشکل دوم، وبسایت رو باید در سه نسخه دسکتاپ، تبلت و موبایل دیزاین می‌کردیم که کاربران با هر دستگاهی بتونن از وبسایت استفاده کنن. برای رفع مشکل تردید در انتخاب سایز باید یک جدول با راهنمای کامل را در صفحه محصول قرار می‌دادیم. و برای آگاه کردن خریدار از وضعیت سفارشش باید از یک صفحه تشکر پس از خرید، “Progress Bar” در پنل کاربری و اطلاع رسانی با پیامک استفاده می‌کردیم.
با در نظرگرفتن داده‌ها و ایده‌هایی در مراحل قبلی بدست آوردیم دیزاین نهایی برای نسخه اول شکل گرفت. برای صفحه اصلی در “Hero Section” یک بنر بزرگ اختصاص دادیم به پرطرفدار ترین محصول فروشگاه که همان کیت فصل است. در صفحه‌ی محصول، گالری عکس بزرگی از محصول قرار دادیم که نصف سکشن اول رو به خودش اختصاص داده و قابل زوم نیز هست و همچنین جدول سایز رو در زیر توضیحات قرار دادیم. در صفحه تسویه حساب فرم ثبت سفارش تا حد ممکن کوتاه کردیم. از پالت رنگی براساس رنگ اصلی تیم (#001348) استفاده کردیم تا وبسایت با هویت بصری باشگاه ملوان یکپارچه باشه. سیستم spacing ما بر اساس grid 8 پیکسلی بود که با اکثر دستگاه ها سازگار هست و مقیاس پذیری بهتری داره. برای دیزاین رسپانسیو از سه “Break Point” استفاده کردیم. در موبایل (کمتر از 768 پیکسل)، در تبلت (768 تا 1024 پیکسل) و در دسکتاپ (بیش از 1024 پیکسل). برای “Grid” در دسکتاپ از 12 ستون برای تبلت از 8 ستون و برای موبایل از 4 ستون استفاده کردیم. از قوانین دسترسی پذیری با استاندارد WCAG 2.1 AA نیز در طرح بکار بردیم.
فقط سه ماه بعد از راه‌اندازی، نتایج فراتر از انتظارات ما بدست اومد. نرخ تبدیل به 20% درصد، بازگشت سرمایه 470% و افزایش فروش به 1200% رسید و هزینه پشتیبانی 50% کاهش پیدا کرده. از نظر تعامل کاربر با سایت هم آمار “Visit Duration” و “Bounce Rate” نرمال بودن و تقریبا میشه گفت هیچ “Rage click” و “Dead click” نداشتیم.
برای گام بعدی میتونیم به بهینه کردن روش نمایش سایزها، اینتراکشن گالری محصول، فرآیند خرید و… فکر کنیم و همچنین با تحلیل بیشتر رفتار کاربر بر روی وبسایت میشه به مواردی که پنهان هستند اما تاثیرگذارند را پیدا کنیم.
