وقتی پروژه PLCSEA به ما رسید، کارفرما خودش مدتی روی طراحی سایت کار کرده بود. بخشی از مسیر طی شده بود، اما خروجی با چیزی که در ذهن داشت فاصله زیادی داشت.
هدف او ساخت یک سایت ساده شرکتی یا یک فروشگاه معمولی نبود. PLCSEA قرار بود در آینده به یک مرجع تخصصی در حوزه PLC و اتوماسیون صنعتی تبدیل شود؛ جایی که کاربر بتواند آموزش ببیند، درباره تجهیزات و تکنولوژی‌ها مطالعه کند و در کنار آن، محصولات برند DAS را نیز بررسی و سفارش دهد.
مسئله اینجا بود که ایده‌های زیادی وجود داشت، اما هنوز ساختار مشخصی برای تبدیل آن‌ها به یک محصول دیجیتال منظم وجود نداشت.
شروع پروژه؛ وقتی بازطراحی بهتر از ادامه دادن است
کارفرما پیش از شروع همکاری با NaarCode، خودش طراحی سایت را آغاز کرده بود و تا مرحله‌ای هم پیش رفته بود.
اما با بزرگ‌تر شدن ایده، مشخص شد ادامه دادن همان مسیر نمی‌تواند نتیجه‌ای را که انتظار داشت ایجاد کند.
ساخت یک مرجع تخصصی به چیزی بیشتر از چند صفحه و یک فروشگاه نیاز داشت. باید از ابتدا مشخص می‌شد:
- چه نوع محتوایی قرار است در سایت منتشر شود؟
- محصولات چگونه دسته‌بندی شوند؟
- آموزش‌ها و مقالات در چه ساختاری قرار بگیرند؟
- کاربر چطور بین محتوای آموزشی، محصولات و خدمات حرکت کند؟
- و مهم‌تر از همه، این ساختار چطور در آینده قابل توسعه باقی بماند؟
به همین دلیل تصمیم گرفتیم به‌جای اصلاح تدریجی نسخه قبلی، پروژه را از پایه بازطراحی و بازسازی کنیم.
هدف؛ آموزش و فروش در یک اکوسیستم واحد
هدف اصلی PLCSEA از ابتدا روشن بود:
ساخت بستری که در آن دانش فنی و محصول کنار یکدیگر قرار بگیرند.
از یک طرف، سایت باید بتواند در طول زمان به منبعی برای آموزش PLC، برنامه‌نویسی صنعتی، ارتباطات، کنترل و تجهیزات اتوماسیون تبدیل شود.
از طرف دیگر، محصولات برند DAS نیز باید در همین محیط معرفی و عرضه می‌شدند.
فرایند فروش نیز قرار نبود شبیه یک فروشگاه اینترنتی معمولی باشد.
کاربر می‌تواند محصولات موردنظر خود را به سبد خرید اضافه کند، اما مرحله نهایی بر پایه استعلام قیمت و ثبت سفارش طراحی شده است؛ مدلی که با ماهیت بازار تجهیزات صنعتی هماهنگی بیشتری دارد.
بنابراین از ابتدا با سه نیاز موازی روبه‌رو بودیم:
آموزش و دانش فنی معرفی و فروش محصولات ساخت زیرساختی مناسب برای رشد از طریق SEO
چالش اصلی؛ محتوا زیاد بود، اما هنوز معماری نداشت
یکی از مهم‌ترین بخش‌های پروژه قبل از طراحی رابط کاربری اتفاق افتاد.
کارفرما تصویر روشنی از موضوعاتی که می‌خواست در PLCSEA پوشش دهد داشت، اما هنوز مشخص نبود این اطلاعات چگونه باید در قالب سایت سازمان‌دهی شوند.
این همان جایی بود که نقش NaarCode از «طراحی سایت» فراتر رفت.
ما ساختار محتوا و صفحات را پیشنهاد دادیم و تلاش کردیم مجموعه‌ای از موضوعات فنی پراکنده را به یک معماری قابل فهم تبدیل کنیم.
سایت به بخش‌هایی مانند:
- محصولات
- خدمات
- راهکارها
- پروژه‌ها
- مقالات و محتوای تخصصی
- دسته‌بندی‌ها و برچسب‌های مرتبط
تقسیم شد تا هم کاربر بتواند ساده‌تر به اطلاعات موردنظرش برسد و هم سایت در آینده ظرفیت رشد داشته باشد.
این ساختار همچنین کمک می‌کند محتوا فقط به شکل مجموعه‌ای از مقاله‌های مستقل منتشر نشود، بلکه بین دانش، محصول و کاربرد صنعتی ارتباط ایجاد شود.
طراحی؛ تخصصی، بدون پیچیده شدن
طراحی بصری پروژه به‌طور کامل به NaarCode سپرده شد.
یکی از چالش‌ها این بود که حوزه اتوماسیون صنعتی ذاتاً فنی و پیچیده است. اگر همین پیچیدگی مستقیماً وارد رابط کاربری می‌شد، سایت می‌توانست خیلی سریع شلوغ و خسته‌کننده شود.
بنابراین هدف ما این بود که ظاهر PLCSEA حس یک مجموعه فنی و حرفه‌ای را منتقل کند، اما تجربه استفاده از آن ساده باقی بماند.
برای این کار روی چند اصل تمرکز کردیم:
سلسله‌مراتب واضح اطلاعات، تا کاربر در هر صفحه سریعاً بفهمد کجاست و چه چیزی در اختیار دارد.
طراحی منظم و کنترل‌شده، تا حجم زیاد محتوا باعث آشفتگی رابط کاربری نشود.
Responsive Design، تا تجربه کاربری در موبایل و دسکتاپ یکپارچه باشد.
و در نهایت ایجاد یک هویت بصری که بتواند هم بخش آموزشی و هم بخش تجاری سایت را پوشش دهد.
SEO به‌عنوان بخشی از معماری، نه کاری برای بعد
یکی از درخواست‌های اصلی کارفرما این بود که سایت از ابتدا برای SEO آماده باشد.
دلیلش هم مشخص بود: قرار است بخش بزرگی از محتوای PLCSEA در آینده توسط خود مجموعه تکمیل شود.
بنابراین نمی‌خواستیم SEO چیزی باشد که بعداً با چند افزونه یا اصلاح محدود به سایت اضافه شود.
ساختار سایت از ابتدا با درنظر گرفتن رشد محتوایی طراحی شد.
در طول پروژه روی مواردی مثل:
- ساختار مناسب صفحات
- URLها
- Meta Data
- Canonical
- Sitemap
- دسته‌بندی و Tagها
- تصاویر بهینه‌شده و Alt Text
- ارتباط بین مقالات مرتبط
- Redirectها
- ساختار صفحات محصول
- و قابلیت Index شدن بخش‌های مختلف
کار شد.
همچنین تعدادی محتوای تخصصی اولیه برای شکل دادن به ساختار Knowledge Base سایت آماده کردیم؛ از موضوعاتی مانند Modbus، WPLSoft، ISPSoft، PID، ماژول‌های دما و Load Cell تا نمونه‌های کاربردی مرتبط با تجهیزات صنعتی.
هدف این نبود که تمام محتوای سایت را ما تولید کنیم، بلکه می‌خواستیم چارچوب درستی ساخته شود تا تیم PLCSEA بتواند بعداً آن را ادامه دهد.
از محیط آزمایشی تا انتشار نهایی
پروژه ابتدا روی یک محیط آزمایشی توسعه پیدا کرد تا تغییرات بدون تأثیر روی دامنه اصلی انجام شوند.
بعد از تکمیل مراحل اصلی، سایت از محیط Staging به دامنه اصلی plcsea.com منتقل شد.
مرحله انتشار فقط انتقال فایل‌ها نبود.
در این مرحله مواردی مانند:
- URLهای قدیمی و جدید
- Redirectها
- تنظیمات Robots
- Sitemap
- Canonicalها
- Cache
- ساختار پایگاه داده
- و Google Search Console
بررسی شدند تا سایت بعد از انتشار نیز ساختار سالمی برای Crawl و Index شدن داشته باشد.
نتیجه؛ زیرساختی که هنوز در حال رشد است
PLCSEA در زمان نوشتن این Case Study حدود یک ماه است که منتشر شده.
به همین دلیل هنوز برای صحبت درباره نتایج قطعی SEO، ترافیک یا عملکرد تجاری سایت زود است.
بخش قابل توجهی از محتوایی که برای سایت در نظر گرفته شده نیز هنوز توسط کارفرما در حال آماده‌سازی است.
بنابراین ترجیح می‌دهیم در این مرحله درباره اعدادی که هنوز شکل نگرفته‌اند ادعایی نداشته باشیم.
چیزی که امروز وجود دارد، زیرساختی است که برای رشد ساخته شده.
کارفرما حالا می‌تواند به‌مرور:
- آموزش‌های تخصصی منتشر کند،
- محصولات بیشتری اضافه کند،
- دسته‌بندی‌های دانش فنی را توسعه دهد،
- و PLCSEA را به سمت همان مرجعی که از ابتدا در ذهن داشت حرکت دهد.
برای ما، موفقیت اولیه این پروژه همین بود:
تبدیل مجموعه‌ای از ایده‌های پراکنده به یک سیستم منظم که بتواند در طول زمان بزرگ‌تر شود.
چیزی که از این پروژه یاد گرفتیم
در پروژه‌هایی که قرار است محتوای زیادی در آن‌ها تولید شود، طراحی صفحه اولین مسئله نیست.
قبل از هر چیز باید بدانیم اطلاعات قرار است چطور رشد کنند، چطور به هم متصل شوند و کاربر چطور میان آن‌ها حرکت کند.
اگر این ساختار درست نباشد، حتی بهترین طراحی هم با افزایش محتوا به‌مرور پیچیده و ناکارآمد می‌شود.
PLCSEA برای ما نمونه‌ای از پروژه‌ای بود که نشان داد معماری اطلاعات، طراحی و SEO باید از ابتدا کنار یکدیگر شکل بگیرند.
Project Snapshot
Client: PLCSEA Industry: Industrial Automation Scope: Strategy, Information Architecture, UI/UX, Custom Web Development, Commerce, SEO Foundation Platform: Web Website: plcsea.com
NaarCode — Ideas • Code • Impact
