از طراحی تجربه دیجیتال تا خلق شخصیت اختصاصی پگاه
مطالعه موردی پگاه سنتر؛ پروژه‌ای یکپارچه از شناخت ساختار یک مجتمع تجاری، معماری اطلاعات و طراحی تجربه و رابط کاربری تا تدوین دیزاین‌سیستم، طراحی مسکات اختصاصی پگی (Peggy) و پیاده‌سازی وب‌سایت.
فراتر از طراحی یک وب‌سایت
در پگاه سنتر، تجربه آنلاین باید به دنیای واقعی مرکز خرید متصل شود. معماری محتوا، راه‌های یافتن فروشگاه‌ها، هویت بصری و شخصیت راهنمای برند را اجزای یک تجربه منسجم دیده‌ایم.
تنوع فروشگاه‌ها
بازدیدکننده باید بدون سردرگمی از میان دسته‌های محصولات، واحدها و خدمات به مقصد مناسب برسد.
یک زبان بصری مشترک
از ساختار صفحات و سیستم تایپوگرافی تا رنگ‌ها و راهنمای برند، تصمیم‌ها باید یکدیگر را تقویت کنند.
شخصیتی برای ارتباط
پگی صرفاً یک تصویر تزئینی نیست؛ برای تبدیل شدن به راهنمایی قابل‌تشخیص در کانال‌های مختلف طراحی شده است.
نیازها و اهداف پروژه
مسیرها و ساختار محتوا
صفحات و الگوهای تعامل
فرم، رفتار و برندگایدلاین
تحویل تجربه دیجیتال
از مسئله کاربران تا ساختار اطلاعات
در مستندات طراحی، مسائل یافتن محصول و فروشگاه، ساختار دسته‌بندی، جریان تصمیم‌گیری و نقاط تماس مسکات با تجربه کاربری صورت‌بندی شده‌اند. نمونه‌های پژوهشی فرضیه‌محور را با داده میدانی تأییدشده یکی نمی‌گیریم.
کشف دسته‌ها
دسترسی روشن به گروه‌های کالا و خدمات و جلوگیری از ازدحام ناوبری.
یافتن فروشگاه
توجه به اطلاعات مکانی، نام واحد و مسیر دسترسی به آن.
تصمیم بعدی
ایجاد اتصال مشخص میان صفحه مقصد و اقدام بعدی کاربر.
سیستم طراحی؛ زبان مشترک محصول
استفاده از توکن‌های رنگ، مقیاس تایپوگرافی و الگوهای تکرارپذیر به‌جای طراحی پراکنده صفحات؛ برای هماهنگی وب‌سایت، عناصر بصری و ارتباطات برند.
خلق «پگی»؛ یک شخصیت، نه صرفاً یک تصویر
محور ویژه این پروژه، تبدیل یک ایده بصری به یک سیستم هویتی قابل توسعه است: از شخصیت‌پردازی و منطق فرم تا نماهای مختلف، رنگ، ژست، مقیاس و قواعد استفاده.
هوشمند، کنجکاو، صمیمی، همراه
پگی برای ساده‌تر کردن تجربه کشف فروشگاه‌ها و خدمات تعریف شده است؛ شخصیتی الهام‌گرفته از ترکیب چابکی خرگوش با زبان بصری فناوری. سیلوئت گوش‌های بلند، نمایشگر تیره صورت، چشم‌های نورانی و بدنه چندتکه، امضای دیداری او را می‌سازند.
سیلوئت قابل تشخیص
گوش‌های بلند و فرم مشخص سر، تشخیص شخصیت را حتی دور از جزئیات ممکن می‌کند.
صورت دیجیتال و احساس‌پذیر
چشم‌های روشن روی نمایشگر تیره امکان انتقال حس با حداقل تغییر در ساختار شخصیت را فراهم می‌کنند.
متریال نرم و آینده‌نگر
ترکیب عاجی، آبی روشن و جزئیات طلایی، ظاهر فناورانه را با گرما و صمیمیت متعادل می‌کند.
بدن متناسب با حرکت
اتصالات و اندام‌های چندتکه برای ژست‌های اشاره، حرکت و معرفی طراحی شده‌اند.
Turnaround · Front / ¾ Front / Side / Back / ¾ Back — سند چندنمایی برای حفظ ثبات حجم، نسبت‌ها و فرم.
از فرم تا قانون؛ تعریف یک شخصیت پایدار
برای اینکه پگی در وب‌سایت، راهنمای طبقات، شبکه‌های اجتماعی یا تبلیغات همچنان همان شخصیت بماند، مجموعه قواعد اندازه، حریم امن، رنگ، جزئیات و موارد استفاده نادرست طراحی شده است.
شخصیت‌پردازی در عمل؛ از لبخند تا راهنمایی مسیر
پگی فقط یک ژست ثابت ندارد. حالات چهره و زبان بدن برای انتقال پیام بدون توضیح‌های طولانی تعریف شده‌اند: خوشامدگویی، اشاره، راه رفتن، معرفی محصول و واکنش‌های احساسی.
شناخت احساس
حالات صورت و نور چشم‌ها بدون تخریب ساختار نمایشگر.
رفتار هدفمند
جهت نگاه، حالت دست و ژست با نقش پیام هماهنگ است.
ثبات کاراکتر
تناسبات و متریال میان همه موقعیت‌ها حفظ می‌شود.
یک راهنمای کوچک برای نقاط تماس متعدد
از صفحه وب و کارت دسته تا راهنمای طبقات، استند محیطی و کمپین‌های ارتباطی، برای شخصیت سناریوهای استفاده تعریف شده است. تصاویر موکاپ، نمایش مفهوم کاربردند و به معنی نصب فیزیکیِ تأییدشده نیستند.
معرفی دسته یا موقعیت مناسب کاراکتر بدون مزاحمت برای اطلاعات اصلی.
حضور در نقاط تصمیم‌گیری مانند نتیجه جست‌وجو یا راهنمای فیلتر.
خروجی سبک و ساده برای صفحه‌های کوچک و اجزای تعاملی.
راهنمای قابل تشخیص برای پیدا کردن طبقه و واحد.
جهت‌دهی و کمک بصری در نقاط پرتردد مجتمع.
هماهنگی میان تجربه دیجیتال و حضور محیطی برند.
فرمت‌های ثابت با حضور یکسان کاراکتر و لحن برند.
تغییر ژست متناسب با مناسبت بدون تغییر هویت اصلی.
هماهنگی زبان بصری در بنر، استیکر و محتوای معرفی.
یک خروجی یکپارچه از تحلیل تا اجرا
ارزش پروژه در کنار هم قرار گرفتن چند تخصص بود: معماری محتوا، تصمیمات UX، طراحی صفحات، سیستم بصری و هویت اختصاصی مسکات در یک چارچوب قابل توسعه.
ایده شما چطور به یک هویت متمایز تبدیل می‌شود؟
از تجربه کاربری و توسعه وب تا خلق شخصیت و سیستم هویت بصری؛ اگر پروژه‌ای با چندین نقطه تماس دارید، درباره مسیر طراحی و اجرای آن با مدیا صحبت کنیم.
Case Study · Pegah Center / Created for mediasanat.ir · تصاویر از مستندات پروژه ارائه‌شده.