Votatec UX/UI Case Study

وتاتک (Votatec) در حوزه محصولات روشنایی LED فعالیت می‌کند. این مطالعه موردی به طراحی تجربه و رابط کاربری وب‌سایت با تمرکز بر نیاز مشتریان عمده، یافتن محصولات و دسترسی به اطلاعات فنی اختصاص دارد.

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

Test

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

Design

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

Idea

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

Define

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

Discover

• تحلیل رقبا

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

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

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

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

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

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

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

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

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

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