بناء منصّة D2C متعددة العلامات لـWingreens بهندسة Headless وتجربة استخدام إقناعية
نبذة عن الشركة
تُعد Wingreens Farms—المدعومة من Sequoia Capital—شركة أغذية متكاملة «من المزرعة إلى البيع بالتجزئة»، تعمل على تصنيع وبيع مجموعة من المنتجات الطازجة والصحية واللذيذة والمبتكرة، وهي رائدة وفئة قائدة في «الديبّات الطازجة» وشرائح البيتا.
كما تمتلك الشركة علامات مثل Raw Pressery وMonsoon Harvest. وقد تواصلت Wingreens مع Codilar برؤية بناء منصّة تجارة إلكترونية لبيع منتجاتها مباشرة للمستهلكين وتكرار نجاحها في المشاريع الرقمية الجديدة.
الأهداف والتحديات
أدركت Wingreens أن منصة Shopify الحالية تفتقر إلى المرونة اللازمة لتحقيق أهداف منصّة البيع المباشر للمستهلك (D2C) المزمع بناؤها، وأن الانتقال إلى منصّة أقوى وأكثر مرونة بات حتميًا لتلبية الحاضر والمستقبل.
سرعة دون احتكاك: بوصفها منصّة D2C لبيع الأغذية، كان لا بد أن تكون التجربة من الطراز الأول، مع رحلة شراء فائقة السرعة وسلسة.
تجربة متعددة العلامات: تواصل Wingreens الاستحواذ على علامات ضمن مجال الأغذية المعبّأة؛ ورؤية المنصّة أن تكون سوقًا لهذه العلامات مع تجربة مخصّصة لكل علامة.
حرّية الواجهة الأمامية وقابليتها للتوسّع: احتاجت الواجهة الأمامية إلى مرونة وتوسّعية تتيح إضافة قنوات ونقاط تماس مستقبلية مثل تطبيقات الهاتف والأكشاك والساعات الذكية والتلفاز وغيرها.
حُزم منتجات متقدّمة: نظام بسيط لحزم المنتجات يمكّن مسؤولي العرض من طرح باقات تزيد متوسط قيمة الطلب (AOV).
أبرز ملامح الحل
بنينا حلًا على Adobe Commerce Cloud بهندسة دون واجهة (Headless) وقدرات PWA مصمّمًا خصيصًا لأعمال Wingreens متعددة العلامات؛ ركّزنا على الأداء السريع، وبنية قابلة للتوسّع، وتوصيل يعتمد الرمز البريدي للمنتجات القابلة للتلف، وتجربة سلسة عبر العلامات كافة.
Adobe Commerce Cloud بهندسة Headless
اخترنا Adobe Commerce Cloud كمحرّك التجارة نظرًا للقوة والمرونة اللازمتين لاحتياجات Wingreens الحالية والمستقبلية. بُنيت الواجهة الأمامية على NexPWA (حل PWA المملوك لـCodilar والمكتوب بـReactJS)، واستثمرنا واجهات GraphQL المضمّنة وأنشأنا واجهات مخصّصة لدمج الواجهة المفصولة مع الخلفية في Adobe Commerce.
PWA بسرعة خاطفة
فعّلنا قدرات تطبيقات الويب التقدّمية (PWA) في الواجهة الأمامية بالاستفادة من مزايا NexPWA الجاهزة؛ فوفّرت تجربة شبيهة بتطبيقات الهاتف وإمكانية التثبيت على الشاشة الرئيسية، وأصبحت الصفحات تُحمَّل بسرعات خاطفة تقل عن 200ms.
توافر يعتمد الرمز البريدي
نظرًا لقابلية بعض منتجات Wingreens للتلف، طوّرنا خوارزميات تتحقّق من إمكان الشحن حسب موقع العميل والمستودع وزمن التوصيل عبر الشريك اللوجستي؛ ولا تُضاف هذه المنتجات إلى السلة إلا بعد اجتياز شروط الخوارزميات.
تجربة متعددة العلامات
لأن منصّة WingreensWorld تُظلّل علامات متعدّدة، خصّصنا التجربة لكل علامة نظرًا لاختلاف فئات المنتجات؛ فطوّرنا صفحات قوائم ومنتجات (PLP/PDP) قائمة على السمات (Theme-based) وتفعيلها وفق العلامة ونوع المنتج.
نظام تصميم معياري وقابل للتوسّع
كانت القابلية للتوسّع ضرورية مع وتيرة الاستحواذ لدى Wingreens؛ لذا أنشأنا نظام تصميم رشيقًا يحدّد معايير العناصر والأنماط والمكوّنات، ويسهّل إتمام الشراء بسلاسة، ويعزّز الاستخدام عبر واجهة متسقة ويُلغي الحاجة لإعادة التصميم مستقبلًا.
التكاملات
نفّذنا تكاملًا ثنائي الاتجاه بين Adobe Commerce ومنصّتَي السوق Lazada وShopee، ما رفع كفاءة المخزون ومواءمة الطلبات عبر القنوات الثلاث: المتاجر والأسواق والتجارة الإلكترونية.
النتائج
زيادة التحويلات بفضل موقع فائق السرعة يُحمِّل الصفحات في أقل من 200ms بفضل NexPWA.
تجربة «الهاتف أولًا» وقدرات PWA تمنح تجربة شبيهة بتطبيقات الموبايل لشراء المنتجات الغذائية.
فحص التوافر بالاعتماد على الرمز البريدي للتعامل مع المنتجات القابلة للتلف عبر خوارزميات لوجستية ذكية.
واجهة Headless قابلة للتوسّع على NexPWA (ReactJS) تُمكّن تجربة متعددة العلامات وتوسّع القنوات مستقبلًا.
نظام إدارة محتوى Headless يتيح لفريق التسويق إدارة المحتوى يوميًا دون الاعتماد على المطوّرين.
