این پروژه یکی از پروژه‌هایی بود که واقعاً تغییرش از نسخه اولیه تا نسخه نهایی خیلی محسوس شد. پروژه از قبل وجود داشت و بخش‌های اصلی فروشگاه و منطق بک‌اند پیاده‌سازی شده بود، اما از نظر ظاهر، تجربه کاربری و حس کلی سایت، طراحی خیلی ساده و قدیمی داشت و با چیزی که از یک فروشگاه تخصصی قطعات خودرو انتظار می‌رفت فاصله داشت.
کاری که من روی این پروژه انجام دادم فقط تغییر چند رنگ و استایل نبود؛ عملاً رابط کاربری سایت رو از نو طراحی کردم و سعی کردم بدون اینکه منطق اصلی و بخش‌های سالم پروژه آسیب ببینه، ظاهر و تجربه کاربری اون رو کاملاً متحول کنم.
برای طراحی جدید، تم قبلی آبی و سفید رو کنار گذاشتم و یک هویت بصری کاملاً جدید با ترکیب مشکی، خاکستری تیره و طلایی ساختم تا ظاهر سایت بیشتر با فضای خودرو، قطعات و حس قدرت و کیفیت هماهنگ باشه. از صفحه اصلی گرفته تا محصولات، جزئیات محصول، درباره ما، تماس با ما، ورود، سبد خرید، پرداخت و پنل کاربری، صفحات مختلف یکی‌یکی بازطراحی و هماهنگ شدند تا کل سایت یک هویت یکپارچه داشته باشه.
یکی از قسمت‌هایی که خیلی دوست داشتم روی اون کار کنم، صفحه اصلی و صفحات معرفی بود. به‌جای یک طراحی ساده و تخت، از تصاویر مرتبط با خودرو، نورپردازی طلایی، پس‌زمینه‌های تیره، کارت‌های مدرن و جزئیات گرافیکی استفاده کردم تا سایت از همون چند ثانیه اول حس یک فروشگاه تخصصی و حرفه‌ای رو منتقل کنه. حتی صفحه ورود که قبلاً یک فرم خیلی ساده بود، تبدیل شد به یک صفحه مستقل با طراحی اختصاصی، تصویر خودرو، بخش معرفی مزیت‌ها و فرم ورود هماهنگ با هویت بصری کل سایت.
در بخش Frontend از Vue.js، JavaScript، SCSS و Bootstrap استفاده کردم. بخش زیادی از استایل‌های قدیمی پروژه بازنویسی شد و برای هر صفحه استایل‌های اختصاصی و Scope شده ایجاد کردم تا CSS صفحات مختلف روی هم تأثیر نذاره و پروژه در ادامه هم قابل نگهداری‌تر باشه. طراحی Responsive هم یکی از بخش‌های مهم کار بود و صفحات برای اندازه‌های مختلف دسکتاپ، تبلت و موبایل بهینه شدند.
یکی از جذاب‌ترین قسمت‌های پروژه برای خودم، اضافه کردن انیمیشن‌ها بود. برای این بخش از GSAP و ScrollTrigger استفاده کردم تا حرکت عناصر با اسکرول صفحه، ورود کارت‌ها، تصاویر، بخش‌های معرفی و بعضی المان‌های گرافیکی خیلی نرم‌تر و حرفه‌ای‌تر انجام بشه. هدفم این نبود که سایت پر از انیمیشن‌های شلوغ بشه؛ برعکس، سعی کردم حرکت‌ها کنترل‌شده و ظریف باشن و به تجربه کاربری کمک کنن. مخصوصاً در بخش‌هایی مثل صفحه اصلی و درباره ما، انیمیشن‌ها باعث شدند نسخه نهایی حس خیلی متفاوت‌تری نسبت به طراحی اولیه داشته باشه.
فقط ظاهر پروژه هم مطرح نبود. فروشگاه شامل فرآیند کامل خرید می‌شه؛ کاربر می‌تونه محصولات رو مشاهده و جستجو کنه، وارد صفحه جزئیات محصول بشه، کالا رو به سبد خرید اضافه کنه، تعداد محصولات رو مدیریت کنه، اطلاعات سفارش رو وارد کنه و وارد فرآیند پرداخت بشه. برای وضعیت موفق یا ناموفق پرداخت هم صفحات اختصاصی طراحی شده تا مسیر کاربر بعد از پرداخت ناقص رها نشه.
بخش حساب کاربری هم شامل مدیریت اطلاعات شخصی، مشاهده سفارش‌ها، جزئیات هر سفارش و وضعیت سفارش‌هاست. در بازطراحی این قسمت تلاش کردم پنل کاربری هم از ظاهر قدیمی و ساده خودش خارج بشه و کاملاً با طراحی جدید فروشگاه هماهنگ باشه.
در سمت Backend پروژه از PHP استفاده شده و ارتباط قسمت‌های مختلف Frontend با Backend از طریق API انجام می‌شه. بنابراین این پروژه فقط یک UI نمایشی یا قالب فروشگاهی نیست و بخش‌های مختلف آن به منطق واقعی فروشگاه، سبد خرید، کاربران، سفارش‌ها و پرداخت متصل هستند.
یکی از چالش‌های جالب پروژه این بود که چون سیستم از قبل وجود داشت، نمی‌شد همه‌چیز رو پاک کرد و از صفر نوشت. باید طراحی جدید رو روی ساختار موجود پیاده می‌کردم، بدون اینکه عملکرد قسمت‌های قبلی خراب بشه. همین موضوع باعث شد روی ساختار SCSS، Scope کردن استایل‌ها، تداخل CSSهای قدیمی و جدید و هماهنگی کامپوننت‌ها خیلی دقیق‌تر کار کنم.
در نهایت تفاوت نسخه اولیه و نسخه‌ای که تحویل داده شد واقعاً زیاد بود؛ از یک فروشگاه با طراحی روشن و نسبتاً ساده، به یک فروشگاه تیره، مدرن و کاملاً متناسب با فضای خودرو رسیدیم. برای همین در نمونه‌کار هم تصاویر قبل و بعد طراحی رو قرار دادم تا میزان تغییرات پروژه کاملاً مشخص باشه.
بازخورد مشتری نسبت به طراحی جدید هم خیلی خوب بود و مخصوصاً تغییر هویت بصری و حرفه‌ای‌تر شدن صفحات مورد استقبال قرار گرفت. برای خودم هم این پروژه تجربه خیلی خوبی بود، چون هم‌زمان درگیر UI/UX، Frontend، Responsive Design، Animation، API Integration و هماهنگی با Backend واقعی بودم و نتیجه نهایی چیزی شد که از نظر ظاهری و فنی تفاوت خیلی زیادی با نقطه شروع پروژه داشت. ✨
مجموعه اَش پارتس، فعال در حوزه تأمین و فروش قطعات یدکی خودرو