إعادة بناء متجر Karrello الإلكتروني للسرعة والثقة

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

Overview

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

Role

مصمم واجهات وتجربة مستخدم ومطوّر Shopify — تولّيتُ تدقيق تجربة المستخدم، وبناء الإطارات الهيكلية، والنماذج الأولية عالية الدقة، وأنظمة تصميم الواجهات، وتنفيذ Shopify بالكود الصرف.

Team

مصمم واجهات وتجربة مستخدم واحد، ومصمم جرافيك واحد، ومدير مشروع واحد، ومالك منتج واحد

Timeline

أكتوبر – نوفمبر 2024 (5 أسابيع).

Context

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

التحدي

طرحت بنية المتجر القديمة اختناقات تشغيلية واختناقات في تجربة المستخدم:

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

تدقيق تجربة المستخدم ومصفوفة المشكلات والحلول

تبسيط الاختيار وأزرار الدعوة لاتخاذ إجراء:
- المشكلة: ازدحام غير ضروري بخاصية «مقارنة المنتجات» وأزرار دفع بديلة مشتتة تقسّم انتباه المستخدم.
- الحل: استُبدلت ميزات المقارنة بدوائر ألوان ومربعات مقاسات سهلة الفهم، مع دمج أزرار الدعوة لاتخاذ إجراء في مسار ثنائي مركّز: «أضف إلى السلة + اشترِ الآن».
هيكلة المعلومات والمراجعات:
- المشكلة: أوصاف منتجات طويلة يصعب قراءتها ومراجعات غير منظّمة.
- الحل: أُعيدت هيكلة محتوى المنتج في تبويبات نظيفة وسهلة الوصول (الوصف | المزايا | المراجعات | الأسئلة الشائعة )، مع إضافة قسم مخصص للمنتجات ذات الصلة لتعزيز البيع المتقاطع.

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

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

القرارات التصميمية والتقنية الرئيسية

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

النتائج والأثر

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