جان‌بزرگی UX/UI Case Study

Project Overview

نمای کلی پروژه (Project Overview)

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

مدت پروژه۱.۵ ماه
مخاطب هدففعالان صنعت، حدود ۶۰ سال
بستردسکتاپ و موبایل
خروجیطراحی UI/UX و دیزاین سیستم

Problem Statement

مسئله چی بود؟! (Problem Statement)

چالش اصلی طراحی این بود: چگونه یک گروه تخصصی نساجی را معرفی کنیم و هم‌زمان به مخاطبی حدود ۶۰ سال کمک کنیم محصول موردنیازش را بشناسد، اطلاعات فنی را پیدا کند و برای انتخاب یا سفارش با مجموعه تماس بگیرد؟

اطلاعات تخصصی و نام‌های مشابه

محصولات با نام فارسی، نام تجاری انگلیسی و کد فنی شناخته می‌شوند. ساختار فهرست باید این شناسه‌ها را کنار هم و قابل تشخیص نمایش دهد.

مخاطب حدود ۶۰ سال

خوانایی متن، سلسله‌مراتب روشن، برچسب‌های صریح و مسیرهای کوتاه، اولویت‌های طراحی برای این گروه هدف بودند.

از شناخت محصول تا ارتباط

دریافت دیتاشیت و درخواست مشاوره باید در کنار اطلاعات محصول در دسترس باشند تا ادامه مسیر برای کاربر روشن بماند.

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

Design Process

پروسه طراحی (Design Process)

روایت فرایند بر خروجی‌های موجود در فایل پروژه تکیه دارد: وایرفریم‌ها، صفحات نهایی، نسخه موبایل و کامپوننت‌های مشترک.

۰۱

تعریف ساختار

تفکیک معرفی مجموعه، شرکت‌های زیرمجموعه، محصولات و محتوای تخصصی.
۰۲

طراحی مسیرها

سازمان‌دهی دسته‌بندی، جستجو و فیلتر تا صفحه محصول و ارتباط با فروش.
۰۳

وایرفریم و رابط

تدوین چیدمان صفحات و تبدیل زبان بصری سبز و طلایی به رابط کاربری.
۰۴

موبایل و یکپارچگی

بازچینش محتوا برای موبایل و هماهنگ کردن دکمه‌ها، فرم‌ها و ردیف محصولات.

Project Timeline

مدت پروژه (Project Timeline)

۱.۵ماه

از ساختار تا طراحی نهایی

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

ساختار و مسیرهاوایرفریمطراحی رابطموبایل و سیستم طراحی

User Persona

پرسونای کاربر (User Persona)

PROTO-PERSONAحدود ۶۰ سال

تصمیم‌گیر یا مسئول تأمین در صنعت نساجی

پرسونای فرضی بر اساس گروه هدف؛ بدون مصاحبه کاربری

می‌خواهد چه کاری انجام دهد؟

محصول مناسب را با نام، کد یا کاربرد پیدا کند؛ اطلاعات فنی را بررسی کند و برای تصمیم نهایی با کارشناس تماس بگیرد.

نیازهای مفروض در طراحی

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

UserFlow

جریان کاربری (UserFlow)

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

ورود به وب‌سایت

↓

دسته‌بندی تخصصی یا جستجو

↓

فیلتر برند، کاربرد و زیردسته

↓

بررسی محصول و مشخصات فنی

↓

دانلود دیتاشیتاستعلام قیمت و مشاوره

Interface Design

هویت برند، در اولین برخورد (Interface Design)

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

الهام‌گرفته از دانش،
ماندگار با کیفیت.

Product Discovery

محصول درست، با اطلاعات درست (Product Discovery)

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