وبسایت رسمی باشگاه ملوان بندرانزلی

باشگاه ملوان بندرانزلی نیازمند یک پل ارتباطی بین خود و طرفدارانش بود. اما وبسایت قبلی با تجربه کاربری روز فاصله داشت، انتظارات نسل جدید طرفدارانش رو برآورده نمی‌کرد و پتانسیل‌های باشگاه رو به خوبی نمایش نمیداد. این پروژه با هدف ایجاد یک تجربه‌ی جدید برای طرفداران این باشگاه و ایجاد استانداردهای FIFA و AFC شروع شد.

باشگاه ملوان بندرانزلی

هبا دیزاین

نیازها و چالش‌ها

هویت بصری نامنسجم نسبت به هویت برند باشگاه، طراحی قدیمی، نامنظم بودن کارت‌های خبری، رسپانسیو ضعیف و دیگر موارد به علاوه‌ی قوانین جدید FIFA و AFC برای تیم‌های فوتبال باعث شد که باشگاه ملوان نیاز به بازطراحی پیدا کند. متاسفانه به دلیل متصل نبودن نسخه قبلی وبسایت به نرم افزارهای Digital Analytics آمار قابل استنادی از رفتار کاربران در وبسایت وجود نداشت.

جستجو و تحقیق

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

ایده‌پردازی و راه کار

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

دیزاین نهایی

رنگ‌بندی طراحی براساس هویت بصری باشگاه با رنگ‌های سرمه‌ای تیره و سفید انجام شد. در صفحه اصلی در بخش هیرو یک اسلایدر خبر با تصاویر تمام‌صفحه قرار دادیم مهم‌ترین اخبار به محض ورود به سایت نمایش داده بشه. تازه‌ترین اخبار تمام دسته بندی‌ها را در یک بخش در قالب Tab قرار دادیم. نتایج بازی های قبلی را اضافه کردیم. یک بخش در کنار صفحه به بازی بعدی اختصاص دادیم که دکمه خرید بلیط هم در آن قرار دارد که هواداران دسترسی سریع به تهیه بلیت داشته باشند. سیستم spacing ما بر اساس grid 8 پیکسلی بود که با اکثر دستگاه ها سازگار هست و مقیاس پذیری بهتری داره. برای دیزاین رسپانسیو از سه “Break Point” استفاده کردیم. در موبایل (کمتر از 768 پیکسل)، در تبلت (768 تا 1024 پیکسل) و در دسکتاپ (بیش از 1024 پیکسل). برای “Grid” در دسکتاپ از 12 ستون برای تبلت از 8 ستون و برای موبایل از 4 ستون استفاده کردیم. از قوانین دسترسی پذیری با استاندارد WCAG 2.1 AA نیز در طرح بکار بردیم.

دیگر نمونه کارها

فروشگاه رسمی باشگاه ملوان بندرانزلی
وبسایت رسمی باشگاه ملوان بندرانزلی

تماس با من

برای همکاری در پروژه های طراحی سایت لطفا به تلگرام یا واتساپ پیام بفرستید و یا از فرم تماس اقدام کنید