دراسة حالة · التجارة الإلكترونية · تطبيق جوال

iMarket

iMarket سوق إلكتروني للجوال لعميل، مبني حول المتاجر لا المنتجات، وهذه إعادة تصميمي له. يتابع المتسوّقون ما تنشره المتاجر، ويتحدثون معها ويطلبون منها، ويستطيع أي مستخدم فتح متجر وعرض المنتجات وإدارة الطلبات، في تطبيق واحد.

  • مصمم UI/UX
  • أسبوعان · 2024
  • iOS وAndroid
  • المصمم الوحيد، عمل حر

نظرة سريعة

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

الجدول الزمني للمشروع

  1. تصميم الواجهةالتسوّق والبيع والنظام التصميميالأسبوعان 1–2

تواصل، اطلب، استلم.

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

ثلاث شاشات تهيئة برسوم توضيحية: «تواصل» عن المحادثة مع المتاجر عبر المنشورات والإشعارات، و«اطلب» بامرأة تطلب من هاتفها، و«استلم» بمندوب توصيل على دراجة نارية، ولكلٍّ منها زرّا تسجيل الدخول والمتابعة كضيف.

موجز للمتاجر، لا كتالوج.

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

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

ابحث، تحقّق، أضف.

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

ثلاث شاشات: فئة أجهزة التلفاز بأسعار مخفّضة بالجنيه المصري، ونتائج البحث عن «تلفاز» مع زر التصفية، وتفاصيل تلفاز بالكمية والسعر الإجمالي والتوفير والتقييمات وزر «أضف إلى السلة».

افتح متجرًا في دقائق.

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

ثلاث شاشات: إضافة متجر جديد بالاسم والصورة والعنوان والخريطة ورابط الصفحة، وإضافة منتج جديد بحقول الصورة والاسم والوصف والسعر والفئة، وسجل طلبات متجر يعرض طلبًا تم توصيله.

جولة على الشاشات الحقيقية.

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

ثلاث شاشات بخلفية معتّمة وبطاقة نصيحة متدرّجة الألوان: الخطوة 1 من 7 عن مشاركة أفكارك مع الناس، والخطوة 4 عن إضافة منتجاتك، والخطوة الأخيرة عن المحادثة مع المتجر لتتبّع الطلب.

كل ما تبقّى، في قائمة واحدة.

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

شاشتان: القائمة بالرصيد المتاح للمتجر وأقسام السجل والإعدادات والمساعدة والحساب، و«بلاغاتي» بفلاتر الكل والجديدة والنشطة والملغاة.

الألوان والخطوط.

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

العلامة

  • أساسي#572F88
  • التدرّج#C82671
  • ثانوي#F36D30

المحايدة

  • الأغمق#142533
  • داكن#506373
  • متوسط#8799A8
  • فاتح#DAE7F2
  • الأفتح#F5F8FA

الحالات

  • نجاح#078C64
  • تحذير#D67200
  • خطأ#CC3229

Cairo

الخط

  • عاديتواصل، اطلب، استلم
  • عريضتواصل، اطلب، استلم

الأثر

لإعادة التصميم بالكامل
أسبوعان
خطوات في الجولة الإرشادية
7
تطبيق واحد للتسوّق والبيع
1

ملاحظات ختامية

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