کیس استادی: ساخت دیزاین سیستم منتوریکس

هر تیمی که کارش به طراحی محصول دیجیتال (Digital Product Design) می‌رسد، دیر یا زود با یک چالش مشترک روبه‌رو می‌شود: چطور می‌توانیم همه صفحات، اِلمان‌ها و تجربه‌ی کاربر را یکپارچه و مقیاس‌پذیر (Scalable) نگه داریم؟

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

دیزاین سیستم یعنی چه؟

اگر بخواهم به زبان خیلی ساده و خودمانی بگویم، دیزاین سیستم مثل یه جعبه لگو برای برندهاست: همه قطعات آماده، هماهنگ و دقیقاً جفت و جورند. بنابراین طراح و توسعه‌دهنده (Developer) مجبور نیست هر بار چرخ را دوباره اختراع کند، فقط با یک بشگن ساده، همه چیز ساخته می‌شود.

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

• دیجی‌کالا (Digikala): هر وقت قرمز را ببینیم، یعنی خرید یا Buy / Add to Cart. هیچ وقت قرمز جای دیگری به شکل تصادفی استفاده نمی‌شود.

• اسنپ (Snapp): رنگ سبز مخصوص تاییدیه‌هاست. وقتی سبز می‌بینیم، یعنی همه چیز OK / Confirm است.
  

• آپارات (Aparat): دکمه‌های Play و کنترل‌های ویدیو همیشه یک شکل و رنگ دارند؛ هیچ وقت ناهمخوان نیستند.

• گوگل (Google Material Design): هر المان UI قوانین خودش رو دارد؛ مثلا Floating Action Button همیشه حرکت و رنگ خاص خودش را دارد و هرجا ظاهر شد، ما به عنوان کاربر می‌فهمیم که اینجا عمل اصلی باید انجام شود.

به قول برد فراست (Brad Frost)، طراح، دولوپر و نویسنده معروف حوزه وب:

“Design systems bring order to chaos.”

(سیستم‌های طراحی یا دیزاین سیستم، نظم رو به هرج‌ومرج برمی‌گردونند.)

 

ما هم در منتوریکس دقیقاً به همین نیاز داشتیم: آوردن نظم، سرعت و هماهنگی در تیم.

چالش ما چه بود؟

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

چالش اول: سیستم مدیریت محتوای اختصاصی (CMS) و دست و پای بسته

تا سال 1403، ما روی یک CMS اختصاصی کار می‌کردیم. در ظاهر همه چیز خوب بود، اما هر بار که می‌خواستیم تغییری کوچک بدهیم (مثلاً جابه‌جایی یک دکمه یا تغییر رنگ یک المان)، باید به تیم توسعه ایمیل می‌زدیم و چند روز منتظر می‌ماندیم. این موضوع نه تنها سرعت ما را پایین می‌آورد، بلکه باعث می‌شد تیم دیزاین حس کند آزادی عمل ندارد.

چالش دوم: نبود دیزاین سیستم واحد (No unified design system)

برای ساخت هر صفحه یا لندینگ جدید، فضا برای ما اینگونه بود که داریم از صفر شروع می‌کنیم. دکمه‌ها در صفحات مختلف ظاهر متفاوتی داشتند، تایپوگرافی‌ها (Typography) هماهنگ نبود و حتی فاصله‌ها (Spacing) در جاهای مختلف استاندارد خاصی نداشت. شاید کاربر عادی خیلی زود متوجه این چیزها نمی‌شد، اما در تجربه کلی کاربر (UX) تاثیر خودش را می‌گذاشت.

چالش سوم: نیاز به مقیاس‌پذیری (Scalability)

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

چالش چهارم: مهاجرت به وردپرس (WordPress Migration)

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

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

فرآیند ساخت دیزاین سیستم

ما کار را با یک Roadmap مشخص شروع کردیم. مراحل اصلی این بودند:

اول: Audit (بازبینی و ممیزی)

اولین قدم، بررسی کل المان‌های موجود بود: رنگ‌ها، تایپوگرافی‌ها، دکمه‌ها، کارت‌ها، منوها و … . متوجه شدیم بسیاری از آن‌ها هم‌پوشانی دارند یا بدون دلیل متفاوت طراحی شده‌اند.

دوم: Foundation (هسته اصلی)

در این مرحله Design Tokenها را تعریف کردیم. در اصل با روش Atomic Design پیش رفتیم که «براد فراست» در سال 2013 معرفیش کرد. از کوچک‌ترین سطح شروع کردیم تا به بزرگ‌ترین رسیدیم.

• Atoms (اتم‌ها): کوچک‌ترین واحدهای UI که مستقل هستند و خودشان کارکرد دارند.
• در سایت ما: دکمه‌ها (Button)، فیلدهای فرم (Input Field)، آیکون‌ها (Icon)، رنگ‌ها (Primary Red, Secondary).

• Molecules (مولکول‌ها): ترکیب چند اتم که با هم یه عملکرد دارند.
• مثال: فرم جستجو (Search Input + Search Button)، کارت سرویس (عنوان + متن کوتاه + آیکون یا تصویر کوچک) و لیست آیتم‌ها.

• Organisms (ارگانیزم‌ها): ترکیب چند مولکول و اتم که بخش مستقل صفحه را بسازد.
• مثال: هدر سایت (لوگو + منو + دکمه Call-to-Action)، کارت لیست دوره‌ها (تصویر + عنوان + قیمت + دکمه).

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

سوم: Components (کامپوننت‌ها)

بعد نوبت ساخت دکمه‌ها، کارت‌ها، فرم‌ها و سایر المان‌های مشترک بود. این بخش شیرین‌ترین قسمت کار بود (البته سخت‌ترین هم بود). کلی ایده و نظر داشتیم که باید بینشان انتخاب می‌کردیم که کدامشان به هویت برند منتوریکس و آرکی تایپ ما می‌خورد.

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

چهارم: Documentation (مستندسازی)

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

بهبود UI/UX صفحات کلیدی

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

نتایج و دستاوردها

در ادامه به برخی از نتایج و دستاوردها رسیدن به دیزاین سیستم می‌پردازیم.

1. افزایش سرعت طراحی و توسعه: به لطف کامپوننت‌های آماده (22 کامپوننت)، تیم ما به جای طراحی دوباره، روی حل مسائل واقعی کاربر تمرکز کرد.
2. هماهنگی در برندینگ: همه صفحات حالا یکپارچه و حرفه‌ای به نظر می‌رسند.
3. آینده‌نگری: هر تغییر یا فیچر جدید حالا در چارچوب دیزاین سیستم پیش می‌رود، نه به صورت وصله‌پینه‌ای.

به قول جاش کلارک (Josh Clark)، طراح تجربه کاربری:

“Design is the application of intent – the opposite of happenstance, and an antidote to accident.”

(طراحی، اجرای نیت است؛ نقطه مقابل تصادف و درمانی برای آشفتگی.)

 

درس‌هایی که گرفتیم

اتفاقی که از سمت ما رقم زده شد، برای ما درس‌های شگفت‌انگیزی هم داشت:

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

اگر شما هم در وبسایتتان با مشکلاتی مثل موارد زیر روبه‌رو هستید:

• هماهنگ نبودن المان‌ها در صفحات مختلف
• نیاز به طراحی دوباره برای هر پروژه
• کندی در تغییر یا به‌روزرسانی صفحات

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