Awards

دراسة الحالة

بيجو سكاي

نظرة عامة على مشروع تصميم الويب

ملخص المشروع

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

تم تطوير المنصة بواسطة TeamX كحل متكامل لمتجر إلكتروني أحادي البائع، شمل بناء الهوية التجارية، وتصميم واجهات وتجربة المستخدم (UI/UX)، وتطوير واجهة المتجر، ونظام سلة التسوق وإتمام الشراء، ودمج بوابات الدفع وخدمات الشحن، بالإضافة إلى لوحة تحكم إدارية متكاملة مع صلاحيات وصول مبنية على الأدوار، وإعداد أنظمة التحليلات ومتابعة الأداء.

الأهداف الرئيسة

كان الهدف من المشروع تقديم تجربة تسوق فاخرة تعكس جودة علامة Bijou Sky، مع ضمان أن تكون عملية الشراء سلسة وآمنة وموثوقة للعملاء من مختلف دول العالم. ولتحقيق ذلك، كان لا بد أن يوفّر الموقع ما يلي:
  • عرض المجوهرات والإكسسوارات ضمن واجهة راقية وبسيطة مستوحاة من هوية العلامة القائمة على الألماس والذهب.
  • توفير تصميم متجاوب بالكامل يعمل بكفاءة على أجهزة الكمبيوتر والأجهزة اللوحية والهواتف الذكية، مع الحفاظ على الهوية الفاخرة في جميع أحجام الشاشات.
  • تقديم صفحات منتجات تفصيلية تشمل معرض صور متعدد، وإمكانية تكبير الصور، واختيار الخيارات والمتغيرات الخاصة بالمنتج، مع عرض حالة التوفر بشكل واضح.
  • دعم تصفح المنتجات حسب الفئات والمجموعات، مع خيارات للفرز والتصفية لتسهيل الوصول إلى المنتجات.
  • إتاحة إتمام الشراء سواء للزوار بدون إنشاء حساب أو للعملاء المسجلين، مع إرسال رسائل تأكيد الطلب عبر البريد الإلكتروني.
  • دمج بوابة الدفع paymennt.com لتنفيذ عمليات الدفع بالبطاقات بشكل آمن.
  • عرض أسعار المنتجات بعملة الزائر المحلية من خلال دعم العملات المتعددة، إلى جانب دمج مزود شحن لإدارة عمليات التوصيل ومتابعة حالة الشحنات من خلال لوحة التحكم.
  • تمكين العميل من إدارة المنتجات، والمخزون، والطلبات، والبانرات، وكوبونات الخصم، والصفحات الثابتة بسهولة عبر لوحة تحكم إلكترونية متكاملة.
  • تطبيق نظام صلاحيات دقيق يعتمد على الأدوار (Role-Based Access Control)، بحيث يتمكن المشرف العام (Super Admin) من إدارة صلاحيات المستخدمين بالكامل دون الحاجة إلى تدخل المطور.
  • ربط الموقع مع Google Analytics وتوفير تقارير أساسية للمبيعات والأداء من خلال لوحة التحكم.
  • ادارة مشروع

    بدأ المشروع بتطوير الهوية البصرية للعلامة التجارية، حيث تم تصميم عدة نسخ من الشعار، واختيار لوحة الألوان، وتحديد خطوط الكتابة، لتشكّل جميعها الأساس البصري الذي بُني عليه الموقع بالكامل. وبعد اعتماد الهوية والاتجاه التصميمي، انطلقت مرحلة تصميم واجهات وتجربة المستخدم (UI/UX) لجميع صفحات الموقع ومختلف أحجام الشاشات، مع إنشاء مكتبة موحّدة للمكونات تشمل بطاقات المنتجات، وقوائم التنقل، والنماذج، والبانرات، والأزرار، لضمان الاتساق في جميع أنحاء المنصة.

    تم تنفيذ عملية التطوير عبر عدة مسارات متوازية، شملت تطوير واجهة المتجر الموجّهة للعملاء، ونظام سلة التسوق وإتمام الشراء، ودمج بوابات الدفع وخدمات الشحن، بالإضافة إلى تطوير لوحة التحكم الإدارية ونظام الصلاحيات المعتمد على الأدوار. كما تم إنشاء صفحات السياسات والشروط والمحتوى القانوني بحيث تكون قابلة للتعديل بالكامل من خلال لوحة التحكم، مما يتيح للعميل إدارتها وتحديثها بسهولة بعد إطلاق الموقع.

    وشملت مرحلة الاختبارات التحقق من استجابة الموقع على مختلف الأجهزة وأحجام الشاشات، ودقة عمليات الدفع وإتمام الطلبات، وصحة عرض الأسعار بالعملات المتعددة، وسلامة تكامل خدمات الشحن، إضافة إلى اختبار جميع صلاحيات المستخدمين والأدوار المختلفة داخل لوحة التحكم لضمان عمل النظام بكفاءة واستقرار.

    التقنيات والتكنولوجيا

    تم تطوير واجهة المتجر باستخدام Next.js لتوفير سرعة عالية في تحميل الصفحات، وتحسين أداء محركات البحث (SEO)، وضمان تجربة تصفح سلسة على مختلف الأجهزة. أما الواجهة الخلفية فقد تم بناؤها باستخدام Node.js وإطار العمل NestJS، مما وفر بنية خادم منظمة وقابلة للتوسع. واعتمد النظام على PostgreSQL كقاعدة البيانات الرئيسية، مع دمج Redis لتخزين البيانات المؤقتة (Caching) بهدف تسريع استرجاع البيانات وتحسين أداء كلٍ من المتجر ولوحة التحكم. كما تم استخدام Docker لإدارة الحاويات (Containerization)، إلى جانب إعداد pgAdmin لإدارة قواعد البيانات.

    تم دمج بوابة الدفع paymennt.com لتوفير عمليات دفع آمنة باستخدام البطاقات البنكية، مع ربط حالات نجاح أو فشل عملية الدفع بتحديث حالة الطلب تلقائياً داخل النظام. كما تم دمج خدمة OTO كمزود للشحن لإدارة عمليات التوصيل وتتبع الطلبات من خلال لوحة التحكم. وتم كذلك تطبيق نظام عرض متعدد العملات بحيث تظهر أسعار المنتجات تلقائياً بعملة الزائر المحلية، اعتماداً على تحديد موقعه. بالإضافة إلى ذلك، تم ربط الموقع مع Google Analytics لمتابعة حركة الزوار، وتحليل سلوك المستخدمين، وقياس معدلات التحويل والأداء.

    التحديات

    تقديم هوية فاخرة حقيقية ومتناسقة على أجهزة الكمبيوتر والأجهزة اللوحية والهواتف لم يكن مجرد مسألة تصغير التصميم أو جعله متجاوباً؛ بل تطلّب التأكد من أن كل قرار متعلق بتوزيع العناصر، والمسافات، والخطوط يعمل بكفاءة عند جميع نقاط التوقف، من دون أن يفقد الموقع طابعه الراقي على الشاشات الصغيرة.

    كما أضاف نظام صلاحيات لوحة التحكم المعتمد على الأدوار مستوى إضافياً من التعقيد في التصميم والتطوير. فبدلاً من الاعتماد على أدوار ثابتة، كان لا بد من تمكين المشرف العام (Super Admin) من إنشاء أدوار مخصصة، وربطها بوحدات محددة داخل النظام، وتحديد مستويات صلاحيات دقيقة لكل وحدة في أي وقت بعد إطلاق الموقع، وذلك بالكامل من دون الحاجة إلى تدخل المطور.

    أما تطبيق نظام عرض الأسعار بعملات متعددة لقاعدة عملاء دولية، فتطلّب معالجة دقيقة لإعداد العملة الأساسية، وآلية تحويل العملات، وضمان ظهور الأسعار بشكل موحّد ومتسق خلال جميع مراحل التصفح وإتمام الشراء.

    كذلك، تطلّب دمج بوابة الدفع، وخدمة الشحن، ونظام إدارة الطلبات ضمن مسار واحد مترابط تنسيقاً دقيقاً بين مختلف نقاط التكامل، لضمان أن تنعكس كل مرحلة من لحظة إتمام الشراء وحتى تحديث حالة التوصيل بشكل صحيح وواضح داخل لوحة التحكم.

    الحلول

    تم تصميم واجهات وتجربة المستخدم (UI/UX) لتكون متجاوبة من الأساس، بحيث تم دمج الهوية البصرية الفاخرة ضمن مكتبة المكونات منذ البداية، بدلاً من تكييف تصميم مخصص لأجهزة الكمبيوتر لاحقاً مع الشاشات الأصغر. وتم تطبيق الدرجات الكريمية، واللمسات الذهبية الهادئة، والمساحات البيضاء الواسعة بشكل متناسق على جميع الصفحات والمكونات، لضمان بقاء الطابع الراقي ثابتاً مهما كان حجم الشاشة.

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

    كما تم إعداد نظام عرض العملات المتعددة بحيث يحدد المشرف العملة الأساسية، بينما يتم تطبيق التحويل التلقائي على الأسعار الظاهرة للزوار، مما يحافظ على تجربة تصفح دولية واضحة وملائمة للعملاء بحسب عملاتهم المحلية.

    وتم تطوير سلة التسوق، وإتمام الشراء، والدفع، والشحن كمسار مترابط ومتكامل، بحيث يتم تحديث حالة الطلب داخل لوحة التحكم بشكل مستمر خلال مختلف مراحل الدفع والشحن.

    النتائج

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

    ومن خلال لوحة التحكم، أصبح بإمكان العميل إدارة المنتجات، والمخزون، والأسعار، والبانرات الترويجية، وكوبونات الخصم، وصفحات السياسات بشكل مستقل، إلى جانب التحكم الكامل في صلاحيات الموظفين عبر نظام إدارة الصلاحيات المعتمد على الأدوار. كما صُممت المنصة لتكون قابلة للتوسع مستقبلاً، بما يواكب نمو العلامة التجارية وزيادة عدد المنتجات والعملاء.

    خاتمة

    يعكس هذا المشروع قدرة TeamX على تقديم تجارب تجارة إلكترونية راقية تجمع بين جودة التصميم والتكامل التشغيلي. وتؤكد منصة بيجو سكاي أن الهوية البصرية الفاخرة والبنية الخلفية المتكاملة والقابلة للتوسع للمتجر ليستا أولويتين متعارضتين؛ بل إنهما، عند الاعتماد على بنية تقنية مناسبة والاهتمام بأدق التفاصيل التصميمية، تعززان بعضهما بعضاً.

    والنتيجة هي متجر يرسّخ ثقة العملاء من النظرة الأولى، وفي الوقت نفسه يدعم عمليات الشركة بكفاءة وموثوقية خلف الكواليس.

    تواصل معنا

    عنوان

    49CG + GHP - واحة دبي للسيليكون - المنطقة الصناعية - دبي - الإمارات العربية المتحدة

    Launching Soon

    The new TeamX
    is almost here

    New look, new website, and an AI assistant to help you find exactly what you need.

    07 Days
    12 Hours
    34 Minutes
    56 Seconds

    Hello 👋
    Chat now via Whatsapp