zrvantime
در پروژه Zarvan Time طراحی یک فروشگاه آنلاین ساعت را انجام دادم. تمرکز اصلی روی تجربه خرید و ایجاد یک رابط کاربری مدرن و منسجم بود. طراحی با استفاده از یک Design System شامل Color System، Typography و Components انجام شد و در طول پروژه ارتباط مستقیم با تیم Front-end برای هماهنگی طراحی و پیاده‌سازی داشتم. این سایت پس از حدود یک سال به دلیل مشکلات Backend از دسترس خارج شده و در حال حاضر نسخه آنلاین آن قابل مشاهده نیست.
مشاهده لینک / سایت پروژه
اطلاعات پروژه
چالش
مسئله
هدف اصلی پروژه افزایش فروش و ایجاد یک تجربه بصری جذاب برای مخاطبان ۲۰ سال به بالا بود. در طراحی، محدودیت‌های مربوط به رنگ و دسترسی برای افراد دارای کوررنگی نیز از موارد مهم موردنظر کارفرما بود.
اهداف
هدف اصلی کارفرما، افزایش فروش و در عین حال ایجاد ظاهری جذاب و متناسب با سلیقه بصری خودش بود. تمرکز زیادی روی استفاده از کارت‌های بزرگ و المان‌های بصری پررنگ داشت که در بعضی بخش‌ها با اصول تجربه کاربری و استفاده بهینه از فضا در تضاد بود.
کاربران هدف
مخاطبان اصلی سایت افراد ۲۰ سال به بالا در نظر گرفته شدند. در انتخاب رنگ‌ها و ایجاد کنتراست، محدودیت‌های مربوط به Color Blindness نیز مورد توجه قرار گرفت تا اطلاعات و المان‌های مهم فقط به رنگ وابسته نباشند.
محدودیت‌ها
یکی از چالش‌های اصلی پروژه، محدودیت در تغییر بعضی بخش‌های سایت به دلیل نظر کارفرما بود؛ به‌خصوص در بخش‌هایی مثل Footer که تغییر آن نیاز به چندین جلسه و مذاکره داشت.
همچنین در بخش Login و طراحی برخی باکس‌ها با محدودیت‌های فنی تیم Backend مواجه شدم و طراحی این قسمت‌ها چندین بار بر اساس شرایط فنی و بازخوردها اصلاح شد.
در مورد اندازه کارت‌ها نیز کارفرما ابتدا کارت‌های بزرگ‌تری را ترجیح می‌داد. با ارائه دلایل طراحی و توضیح تأثیر اندازه کارت‌ها بر خوانایی و تجربه کاربر، توانستم در چند بخش او را متقاعد کنم تا اندازه‌ها متناسب‌تر و کاربردی‌تر شوند
روند طراحی
-
تحلیل رقبا و شناخت پروژه
در شروع پروژه، رقبایی مثل تایم، ایران تایمر و گالری اشرافی را بررسی کردم. ساختار صفحات، نحوه نمایش محصولات، رنگ‌بندی و سبک بصری آن‌ها بررسی شد تا مسیر مناسب برای طراحی Zarvan Time مشخص شود. همچنین در سه جلسه حضوری با کارفرما درباره نیازها، سلیقه بصری و هدف سایت صحبت کردم و بر اساس این جلسات، سبک طراحی و ساختار اولیه پروژه مشخص شد.
-
Wireframe و ساختار صفحات
پس از مشخص شدن نیازها، User Flow و Wireframe صفحات طراحی شد تا ساختار محتوا، مسیر حرکت کاربر و جایگاه بخش‌های مختلف قبل با کارفرما چک سد و اصلاحیه هاانجاک و طراحی نهایی مشخص شد.
-
طراحی UI و Design System
طراحی رابط کاربری بر اساس یک Design System منسجم انجام شد. Color System، Typography، Spacing و Components طراحی و سازمان‌دهی شدند تا تمام صفحات ظاهر یکپارچه و قابل توسعه داشته باشند.
-
طراحی صفحات و اصلاحات
صفحات اصلی سایت و بخش‌های فروشگاهی طراحی شدند. در طول پروژه چندین مرحله اصلاحیه از سمت کارفرما دریافت کردم که بخش قابل‌توجهی از آن مربوط به انتخاب و اصلاح رنگ‌ها و سبک بصری بود و طراحی بر اساس بازخوردها چند بار بهبود پیدا کرد.
-
طراحی Responsive
نسخه Responsive صفحات برای اندازه‌های مختلف نمایشگر طراحی شد تا ساختار و تجربه کاربری در Desktop و Mobile حفظ شود. این بخش نیز در Workflow پروژه به عنوان مرحله جداگانه طراحی Responsive تعریف شده بود.
-
همکاری با Front-end
در طول پروژه ارتباط مستقیم با تیم Front-end داشتم و درباره نحوه پیاده‌سازی، جزئیات طراحی و محدودیت‌های فنی هماهنگ می‌کردم. پس از پیاده‌سازی نیز خروجی با طراحی Figma بررسی و اصلاحات لازم انجام شد
راه‌حل نهایی
با توجه به محدودیت‌های پروژه، طراحی به‌صورت مرحله‌ای اصلاح شد تا بین سلیقه کارفرما، نیازهای فروش و اصول UI/UX تعادل ایجاد شود. اندازه و ساختار کارت‌ها بهینه‌تر شد، رنگ‌ها با توجه به کنتراست و محدودیت‌های Color Blindness اصلاح شدند و بخش‌هایی مثل Login با هماهنگی تیم Backend بازطراحی شدند.
همچنین با مذاکره با کارفرما، امکان ایجاد تغییر در بخش‌هایی مثل Footer فراهم شد و در نهایت طراحی به شکلی پیش رفت که ضمن حفظ هویت بصری موردنظر کارفرما، خوانایی، نظم و تجربه کاربری بهتری داشته باش
تصاویر پروژه
