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

أهداف المشروع

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

الحل والبداء بالتصميم علي فيجما

تم تنفيذ حل شامل يعتمد على إعادة بناء الموقع من الصفر وفق رؤية واضحة تجمع بين قوة الهوية البصرية وسلاسة تجربة الاستخدام. بدأ العمل بدراسة رحلة العميل وتحليل بنية المحتوى لضمان تنظيم المعلومات بطريقة منطقية ومباشرة، ثم تصميم واجهات UI/UX حديثة عبر Figma تعكس الطابع الطبيعي والطازج لمنتجات Gröna Bladet، مع استخدام ألوان وخطوط بسيطة توصل الشعور بالثقة والجودة. بعد اعتماد التصميم، تم تطوير الموقع باستخدام منصة Webflow نظرًا لقدرتها العالية على تقديم أداء قوي وتجربة متجاوبة على جميع الأجهزة، إلى جانب تقديم نظام إدارة محتوى Webflow CMS سهل الاستخدام يمكّن فريق الشركة من تحديث المنتجات والأسعار بشكل فوري دون الحاجة لأي خبرة تقنية. كما تم إنشاء صفحات متخصصة تعرض الخدمات والمنتجات بطريقة واضحة مع صور عالية الجودة وأقسام ديناميكية تدعم عملية اتخاذ القرار والطلب. وكنتيجة لذلك، أصبح الموقع منصة احترافية تمثل الهوية الحقيقية للشركة وتساهم في تحسين تفاعل العملاء وتحقيق نمو تجاري ملموس.

النتائج لتصميم الموقع أدى تطوير الموقع الجديد إلى إحداث نقلة نوعية في الأداء الرقمي لـ Gröna Bladet، حيث أصبح الموقع عنصرًا أساسيًا في دعم عمليات البيع اليومية للمصنع والشركة. ساهمت تجربة المستخدم السلسة والواجهة البصرية الحديثة في تعزيز تفاعل العملاء وزيادة معدل الطلبات بشكل ملحوظ، وتم تسجيل ارتفاع في عمليات التسوق عبر الموقع تجاوز 20 ضعفًا مقارنة بالإصدار السابق، نتيجة سهولة الوصول إلى المنتجات وتوضيح المعلومات والقدرة على إتمام الطلبات بسرعة أكبر. كما مكّن نظام Webflow CMS فريق العمل من إدارة وتحديث المحتوى بكفاءة عالية، بما في ذلك إضافة وتنسيق صور احترافية لأكثر من 500 منتج تعكس الجودة الحقيقية للعلامة التجارية وتساعد العملاء على اتخاذ قرارات شراء صحيحة. ومع تحسين سرعة الموقع وتجربة التصفح على الهواتف المحمولة، أصبح الموقع قناة رئيسية وفعّالة لدعم النمو التجاري وتوسيع دائرة العملاء وتطوير عمليات التوريد اليومية للمصنع.
الخدمات المقدمة خلال تنفيذ المشروع، تم تقديم مجموعة متكاملة من خدمات التصميم والتطوير التي غطت جميع مراحل إنشاء الموقع الجديد، بدءًا من تحليل تجربة المستخدم ووصولًا إلى التنفيذ الكامل على منصة Webflow. شملت الخدمات دراسة شاملة للبنية الرقمية السابقة وتحديد احتياجات العملاء الفعلية، ثم تصميم واجهات UX/UI عصرية عبر Figma تعكس الهوية البصرية للطبيعة والطزاجة. إضافة إلى ذلك، تم تطوير الموقع بالكامل على منصة Webflow مع إعداد نظام إدارة محتوى CMS مرن يمكّن فريق العمل من التحكم الكامل في المنتجات والمحتوى. كما تمت معالجة وإضافة صور احترافية لأكثر من 500 منتج وتنسيقها داخل صفحات مخصصة بطريقة جذابة تدعم عملية الشراء وتبرز جودة المعروضات. واختُتم العمل بتهيئة الأداء والتحسين التقني لضمان سرعة تحميل عالية وتجربة تصفح ممتازة على الهواتف والأجهزة اللوحية.
الأدوات والتقنيات المستخدمة • Figma – تصميم واجهات UX/UI وتجربة المستخدم • Webflow – تطوير الموقع وبناء واجهات تفاعلية متطورة • Webflow CMS – تنظيم وإدارة المنتجات والمحتوى • Adobe Photoshop & Illustrator – تجهيز صور المنتجات والمواد البصرية • Responsive Design Optimization – تحسين التوافق مع الأجهزة المختلفة