Votatec UX/UI Case Study

وتاتک (Votatec) یک شرکت پیشرو در واردات و پخش عمده محصولات روشنایی LED در کانادا می‌باشد. این وب‌سایت محصولات خود را به صورت آنلاین در بستر وب‌سایت عرضه می‌کند که باعث می‌شود نیاز مشتریان وفادار خود را با تنوع گسترده در محصولات روشنایی LED برطرف نماید. در حال حاضر این شرکت هیچ‌گونه فروش مستقیمی از طریق وب‌سایت و شبکه‌های مجازی ندارد.

Amin MoosaviFounder & Project Manager

Navid KhosraviBack-end Developer

Mohammad AbdolhosseiniUI/UX Designer

Arsalan HakimiFront-end Developer

در این مرحله با تمرکز بر شناسایی کاربران هدف، تعیین اهداف کسب و کار، تعریف معیارهای موفقیت و در نظرگرفتن محدودیت ها و چالش ها، استراتژی طراحی رو به گونه ای جلو بردیم که نیازهای کاربر با اهداف سازمان بهبهترین شکل ممکن همسو شوند.طراحی کاربر محور (UCD) رویکردی است که تمرکز آن بر نیازها و انتظارات کاربران است. هدف این روش، ارائه محصولی است که کاربر به راحتی و به طور مؤثر از آن استفاده کند و تجربه کاربری مطلوبی داشته باشد.
من Design thinking (تفکر طراحی) رو برای ادامه پروسه دیزاین در نظر گرفتم که هر مرحله شامل موارد زیر می‌شدند:

Test

• تست کاربردپذیری
• تست Maze

Design

• وایرفریم با جزئیات بالا
• طراحی رابط کاربری
• پروتوتایپ

Idea

• جریان کاربری
• Card Sorting
• معماری اطلاعات

Define

• پرسونای کاربر
• نقشه همدلی

Discover

• تحلیل رقبا

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

برای شناخت نیازهای کاربر، نقشه همدلی را ترسیم کردیم.

User Flow یا جریان کاربر یک نمایش بصری از مراحل مختلفی است که کاربر از لحظه ورود تا انتهای فرآیند طی می‌کند. این کار به من کمک می‌کند تا درک بهتری از نحوه حرکت کاربر در وب‌سایت، تصمیمات احتمالی او، و تجربه کلی‌اش از وب‌سایت داشته باشم.

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

مشاهده و پروموت محصولات جدید در هیرو سکشن
در بخش Hero Section محصولات جدید و نیاز به پروموت به مشتریان به صورت اسلایدی نمایش داده می‌شود.

دسترسی سریع به دسته‌بندی محصولات و زیر دسته‌بندی‌ها
در صفحه اصلی برای دسترسی پذیری بهتر و کاهش اتلاف زمان، دسته‌بندی‌‌ها و زیر دسته‌بندی‌ها را به صورت اسلایدر و بهینه به کاربران نمایش می‌دهیم.

صفحه محصول
نمایش بهتر اطلاعات فنی به همراه جدول اطلاعات و Spec Sheet و تصاویر محصول با قابلیت زوم

طراحی فیلتر بهینه و کارآمد
با طراحی بهینه فیلتر محصولات، کاربران می‌توانند به راحتی دسته‌بندی‌ها و ویژگی‌های محصولات را انتخاب کنند و نتایج را براساس نیازهای خود محدود کنند.

طراحی نسخه ریسپانسیو موبایل
با توجه به اینکه ما میدانستیم اکثر کاربران ما (بالای 80 درصد) از طریق تلفن همراه خود به وب‌سایت ما دسترسی دارند؛ اما متاسفانه تجربه کاربری خوبی ندارد. برای حل این مشکل طراحی نسخه بهینه ریسپانسیو برای وب‌سایت بود تا کاربردپذیری اش را بهبود ببخشیم.

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