KH Agilearch

سياق المشروع

KH Agilearch (مؤسسة المعماري الذكي) شركة مقاولات سعودية مقرها الرياض، تعمل في الإنشاءات وإدارة المرافق والخدمات الصناعية لعملاء في أنحاء السعودية. وموقعها يجب أن يجعل قائمة خدمات واسعة ومتعددة الأقسام مفهومة للعملاء والشركاء الذين يقيّمون الشركة، دون أن تتحول إلى جدار من النصوص.

المستخدمون المستهدفون

• مسؤولو المشتريات وإدارة المرافق في السعودية ممن يتحققون إن كان مقاول واحد يغطي عدة أقسام
• أصحاب القرار الذين يقرؤون بالعربية أولًا، وهم الجمهور الأساسي: الموقع المنشور يفتح بالعربية افتراضيًا
• الشركاء ومقاولو الباطن ممن يتأكدون أن الشركة كيان حقيقي يمكن التواصل معه
• المرشحون والموردون الباحثون عن بيانات التواصل من الجوال

رحلة المستخدم الأساسية

1. الوصول من بحث أو رابط مشارَك، غالبًا بالعربية وغالبًا من الجوال
2. التأكد أن هذه شركة مقاولات سعودية لا إدراجًا في دليل
3. إيجاد القسم المطابق للعمل: إنشاءات أو إدارة مرافق أو خدمات صناعية
4. قراءة ما يكفي عن ذلك القسم للحكم إن كان يستحق اتصالًا
5. الوصول إلى بيانات التواصل دون العودة إلى أعلى الموقع

القيود

• قائمة خدمات واسعة تمتد على ثلاثة أقسام غير مترابطة، وكان على كلٍّ منها أن يبقى ظاهرًا دون أن يطمس الآخر
• العربية لغة القراءة الأساسية، فكان على التخطيط أن يكون من اليمين لليسار افتراضيًا لا كوضع ثانوي
• المحتوى ورد كوثائق شركة وصور مشاريع، لا كنصوص جاهزة للويب
• الجوال هو الشاشة الأولى الواقعية للاستفسارات التي يُفترض أن يجلبها الموقع

دوري في المشروع

• تصميم UI/UX، تطوير واجهة كامل (Next.js / React)، بنية مكونات، تصميم متجاوب

أبرز ما عملت عليه

• بنية Next.js / React
• عرض الخدمات والمشاريع
• هوية مؤسسية نظيفة
• صفحات سريعة صديقة لمحركات البحث
• تخطيط متجاوب بالكامل

قرارات التصميم وتجربة الاستخدام

• الأقسام الثلاثة معروضة كثلاث مداخل متوازية بدل قائمة خدمات مدمجة، فلا يضطر مسؤول المرافق وعميل الإنشاءات لتخطي عمل بعضهما
• كل قسم يبدأ بما تنفّذه الشركة فعليًا لا بصفة، لأن المقاول يُقيَّم بنطاق العمل لا بنبرة الكلام
• صور المشاريع مستخدمة كدليل مرتبط بقسم محدد لا كمعرض تزييني، ليربط الزائر بين الادّعاء والعمل المنفَّذ
• تخطيط عربي أولًا: اتجاه القراءة وترتيب التنقّل وموضع زر التواصل تتبع ترتيب القراءة العربية لا شبكة إنجليزية معكوسة
• بيانات التواصل تتكرر في نهاية كل قسم، فلا يحتاج الاستفسار إلى العودة لقسم تواصل واحد

الإعداد التقني

• Next.js و React، وبنية الصفحة مبنية من مكوّنات قابلة لإعادة الاستخدام ليمكن توسيع قسم دون إعادة بناء التخطيط
• صفحات مُولَّدة من الخادم لا تطبيق يعمل في المتصفح فقط، ليكون المحتوى موجودًا في الـ HTML لمحركات البحث وللاتصالات البطيئة
• تنفيذ متجاوب يقوده المحتوى لا نقاط توقف ثابتة منسوخة من قالب
• العربية مضبوطة كلغة واتجاه للمستند، فيأتي تشكيل النص واتجاه التخطيط من المتصفح لا من استثناءات CSS

التقنيات والأدوات