روایت ساخت دیزاین سیستم و طراحی وبسایت شاتل

شاتل برای یکپارچه‌سازی تجربه کاربری صفحات B2C و طراحی یک Design System مقیاس‌پذیر، پروژه بازطراحی ۱۶ صفحه را به منتوریکس سپرد. در این پروژه، با انجام UX Research، بازطراحی معماری اطلاعات و توسعه یک سیستم طراحی مشترک، زیرساختی ایجاد شد که علاوه بر بهبود تجربه کاربران، توسعه آینده محصول را نیز برای تیم داخلی شاتل ساده‌تر می‌کند. 

چالش اصلی پروژه

یکپارچه‌سازی تجربه کاربری ۱۶ صفحه، طراحی Design System و مدیریت پروژه در شرایط قطعی اینترنت.

Project Snapshot

بعضی پروژه‌ها را به خاطر پیچیدگی‌شان به یاد می‌آوری و بعضی دیگر را به خاطر چیزهایی که در طول مسیر به تو یاد می‌دهند. ری‌دیزاین B2C شاتل برای من هر دو بود.

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

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

چرا شاتل به منتوریکس مراجعه کرد؟

شاتل با یک درخواست مشخص سراغ ما آمد؛ طراحی یک Design System برای بخش B2C و بازطراحی صفحاتی که در طول زمان بدون یک چارچوب مشترک رشد کرده بودند. البته برای بخش B2b هم پروژه مشترک دیگری داشتیم که آن را در کیس استادی دیگری می‌نویسم.

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

تیم منتوریکس در این پروژه کوچک اما متمرکز بود؛ من به‌عنوان Product Manager و UX Lead پروژه، همراه با یک تا دو طراح، مسئول هدایت فرآیند تحقیق، تصمیم‌گیری‌های تجربه کاربری، هماهنگی با ذی‌نفعان و مدیریت مسیر پروژه بودیم.

Discovery؛ قبل از ارائه راه‌حل، باید مسئله را می‌شناختیم

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

هدف این جلسات، ارائه راه‌حل نبود؛ می‌خواستیم بفهمیم کاربران چه سؤال‌هایی می‌پرسند، تیم فروش روزانه با چه ابهام‌هایی مواجه است و بیشترین فشار روی کدام بخش‌های سایت قرار دارد.

در این مرحله بیشتر شنیدیم تا این‌که طراحی کنیم.

بعد از شکل گرفتن الگوهای رفتاری، جلسات وارد فاز دوم شدند؛ ورکشاپ‌هایی ساختاریافته که تمرکز آن‌ها اعتبارسنجی فرضیه‌ها، اولویت‌بندی مسائل و رسیدن به یک درک مشترک از مسئله بود.

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

سه مسئله‌ای که مسیر پروژه را شکل داد

از دل جلسات و گفتگوها، ده‌ها مشاهده به دست آمد؛ اما تقریباً همه آن‌ها به سه مسئله اصلی ختم می‌شدند.

۱. انتخاب سرویس برای کاربر ساده نبود

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

۲. مسیر خرید شفاف نبود

در فرآیند خرید ADSL، چندین تصمیم مهم وجود داشت؛ از بررسی پوشش گرفته تا انتخاب مودم و بسته اینترنت. این تصمیم‌ها در بخش‌های مختلف صفحه یا FAQ پنهان شده بودند و مسیر خرید، پیوستگی لازم را نداشت.

۳. سایت به بسیاری از پرسش‌های کاربران پاسخ نمی‌داد

بخش قابل توجهی از سؤال‌هایی که کاربران از تیم فروش و پشتیبانی می‌پرسیدند، در واقع باید روی خود سایت پاسخ داده می‌شد؛ سؤال‌هایی مانند:

• آیا منطقه من تحت پوشش است؟
• به خط ثابت نیاز دارم؟
• تفاوت بسته‌ها چیست؟
• کدام سرویس برای من مناسب‌تر است؟

چرا پروژه را صفحه‌به‌صفحه پیش نبردیم؟

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

به همین دلیل، چهار اصل طراحی، مسیر کل پروژه را شکل داد.

تمایز سرویس‌ها از طریق محتوا

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

آشکار کردن مسیر تصمیم‌گیری

نقاط تصمیم خرید از دل FAQ خارج شدند و به بخشی از ساختار اصلی صفحات تبدیل شدند تا کاربر بداند در هر مرحله باید چه کاری انجام دهد.

ایجاد اعتماد در لحظه تصمیم

صفحاتی مانند «چرا شاتل» و «صدای مشتری» دیگر صرفاً صفحات معرفی نبودند؛ بلکه به بخشی از مسیر تصمیم‌گیری کاربر تبدیل شدند.

نگاه به پشتیبانی به‌عنوان بخشی از تجربه کاربر

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

دیزاین سیستم؛ مهم‌ترین خروجی پروژه

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

به همین دلیل، طراحی Design System به هسته اصلی پروژه تبدیل شد.

سیستم طراحی در سه لایه توسعه پیدا کرد.

Foundation

• پالت رنگ
• تایپوگرافی
• گرید واکنش‌گرا
• توکن‌های فاصله‌گذاری
• راهنمای آیکون‌ها
• الگوهای گرافیکی

Component Library

تمام کامپوننت‌های اصلی از جمله Button، Card، Accordion، Tabs، Input و سایر اجزای رابط کاربری با تمامی حالت‌های موردنیاز طراحی شدند تا در تمام صفحات قابل استفاده باشند.

Page Library

تمام ۱۶ صفحه B2C از ترکیب همین کامپوننت‌ها ساخته شدند؛ بدون طراحی‌های یک‌بارمصرف و بدون فاصله‌گذاری یا چیدمان‌های متفاوت برای هر صفحه.

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

چند تصمیم طراحی که بیشترین تأثیر را داشتند

صفحه اصلی

تمرکز Hero از تبلیغ مودم به هدایت کاربر برای انتخاب سرویس و بررسی پوشش تغییر کرد؛ جایی که بیشترین ابهام کاربران شکل می‌گرفت.

صفحه قیمت‌گذاری

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

نمایندگان فروش

فرآیند Form-first حذف شد و کاربر پیش از هر اقدامی می‌توانست اطلاعات نمایندگان را مشاهده کند؛ تغییری کوچک که اصطکاک ابتدای مسیر را کاهش داد.

مدیریت پروژه در شرایط غیرقابل پیش‌بینی

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

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

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

خروجی‌های پروژه

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

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

• طراحی یک Design System مشترک برای صفحات B2C
• استانداردسازی کامپوننت‌ها و الگوهای طراحی
• بازطراحی ۱۶ صفحه بر پایه یک زبان بصری واحد
• بازآرایی مسیرهای تصمیم‌گیری کاربران در فرآیند خرید
• ایجاد مستندات طراحی برای توسعه و نگهداری صفحات آینده
• فراهم کردن بستری مقیاس‌پذیر برای توسعه محصولات B2C شاتل

چیزی که از این پروژه برای من ماند

وقتی یک سازمان از «هویت» صحبت می‌کند، معمولاً منظورش یک لوگوی جدید یا چند صفحه زیباتر نیست. منظورش سیستمی است که بتواند به آن تکیه کند؛ سیستمی که تصمیم‌های طراحی را قابل تکرار، قابل توسعه و قابل نگهداری کند.

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

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