تطبيق مكتبة جرير — إعادة تصميم تجربة وواجهة المستخدم
إعادة تصميم تطبيق جوال لمكتبة جرير، إحدى أكبر سلاسل البيع بالتجزئة في المملكة العربية السعودية. ركّز المشروع على تحسين سهولة اكتشاف المنتجات وتبسيط تجربة التسوق من البداية إلى النهاية.
تطبيق جوال
إعادة تصميم
مصمم واجهات وتجربة المستخدم
#التجارة_الإلتكترونية
تفاصيل المشروع
رغم كونها من أكبر سلاسل التجزئة في السعودية، كانت تجربة تطبيق جرير مشتتة. عانى المستخدمون في التنقل بين فئات غير منظمة وشعروا بالإرهاق من القوائم المتكررة (مثل عرض نفس الجهاز بألوان مختلفة كمنتجات منفصلة). إضافة إلى ذلك، كانت عملية الدفع تتضمن احتكاكاً غير ضروري. أظهر التحليل التنافسي أن إتمام الطلب يستغرق 7 خطوات، مقارنة بالمعيار المتداول في السوق وهو 6 خطوات لدى المنافسين.
للتحقق من افتراضاتنا، أجرينا مقابلات مع 6 مستخدمين ورسمنا خريطة التعاطف (Empathy Map) لتحديد نقاط الألم الرئيسية.
أبرز النتائج:
تكدس الخيارات: انزعج المستخدمون من تصفح منتجات متطابقة، وفضلوا صفحة منتج واحدة تحتوي على منتقي المتغيرات (Variant Selectors).
احتكاك الدفع: مسار الدفع كان مملاً. طلب المستخدمون خيارات دفع حديثة (مثل STC Pay) وخيار الدفع كضيف (Guest Checkout).
العبء البصري: الواجهة بدت مزدحمة وضعيفة الهرمية البصرية، مما صعّب العثور على التفاصيل المهمة للمنتج.
هيكلة الحل: قمنا بدمج وتحليل نتائج الأبحاث باستخدام مخطط التقارب (Affinity Mapping)، حيث صنّفنا آراء وملاحظات المستخدمين إلى محاور قابلة للتنفيذ وهي: سهولة الاستخدام، واجهة المستخدم، البحث، وخيارات الدفع.
ولمعالجة مشكلة تكدّس وعشوائية المنتجات المعروضة، أعدنا تحديد بنية المعلومات؛ حيث اقترحنا تجميع المتغيرات المختلفة للمنتج الواحد (كالألوان والمقاسات) تحت مسمى منتج رئيسي موحد (Master Listing)، كما أعدنا هيكلة تفرعات الفئات لتكون أكثر وضوحاً وسهولة في التصفح.
ثم قمنا برسم مسار مستخدم جديد ومبسط، يختصر عملية الدفع عبر التخلص من الشاشات المكررة، ودمج ميزات الاقتراح التلقائي في البحث، وربط بوابات دفع أسرع.
انتقلنا من المسودات الورقية (Crazy 8's) إلى الواجهات عالية الدقة. ولضمان اتساق الواجهة وسلاسة التسليم للمطورين (Developer Handoff).
أسسنا نظام تصميم (Design System) مخصص. استخدمنا خط "تجوال" لضمان وضوح القراءة باللغة العربية (RTL)، وحددنا لوحة الألوان الأساسية، وقمنا بتوثيق حالات المكونات (Components States).
للتحقق من فعالية التصميم الجديد، تم إجراء اختبار (A/B Testing) لمقارنة مسار الدفع المحدث مع المسار الأصلي للتطبيق.
تقليص خطوات الدفع: أثبت تبسيط عملية إتمام الطلب واختصارها من 7 خطوات إلى مسار أقصر فعاليته في تقليل الاحتكاك (Friction) وخفض معدلات التخلي عن سلة المشتريات (Cart Abandonment).
تسريع قابلية الاكتشاف: أدى تجميع متغيرات المنتج (Product Variants) تحت واجهة واحدة إلى تقليل العبء المعرفي على المستخدمين، مما سرّع من عملية التصفح والمقارنة.
النتيجة النهائية: واجهة مستخدم (UI) نظيفة ومسار تجربة (UX) سلس يركز على توجيه المستخدم نحو إتمام عملية الشراء بأقل جهد ممكن.
