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