متاح للعمل EN لنتحدث
كل الأعمال دراسة حالة 02 — مفهوم متجر أزياء إلكتروني

H&M Fashion App

تطبيق تسوق يجعل العثور على المقاس المثالي سريعًا وواضحًا وموثوقًا.

مشروع مفاهيمي غير رسمي لأغراض التعلّم ومعرض الأعمال — غير تابع لـ H&M ولا معتمد منها.

الدور
مصمم UI/UX
المدة
أسبوع واحد
المنصة
تطبيق iOS
المخرجات
أكثر من 12 شاشة
الأدوات
Figma، Miro، Notion

تسوّق الأزياء، بلا تخمين.

مفهوم تطبيق لأزياء الرجال والنساء والأطفال — بتفاصيل كاملة للمنتجات والمقاسات والألوان والأسعار، وعروض مباشرة، وطرق دفع مرنة في مكان واحد.

التحدي

توصيل بطيء وجودة غير واضحة

يقلق المتسوقون من تأخر التوصيل ومن ملابس لا تطابق ما رأوه في التطبيق. الفئات قد تكون مربكة، ونادرًا ما تؤدي الملاحظات إلى تحسينات ملموسة.

النهج

سريع وشفاف ومنظّم بوضوح

طلب أسرع، وفئات واضحة، وصفحات منتجات تفصيلية، وحلقة ملاحظات مفتوحة — كل تقييم، إيجابيًا كان أو سلبيًا، يغذّي التحسين التالي.

أسبوع واحد، وخمس مراحل مُركّزة.

  1. الاكتشاف

    مقابلات المستخدمين، أبحاث المستخدم، تحليل المنافسين

  2. التحديد

    الشخصية، خريطة التعاطف، خريطة الرحلة

  3. توليد الأفكار

    مسار المستخدم

  4. التصميم

    المخططات الأولية، نظام التصميم، التصميم البصري

  5. الاختبار

    اختبار قابلية الاستخدام

أين يقصّر السوق.

أظهرت المقارنة مع Noon وAmazon وShein أن التقييمات والعروض وخيارات الدفع أصبحت من الأساسيات، أما الفرص الحقيقية فكانت التخصص في الأزياء وسرعة التوصيل والمصداقية.

مقارنة الميزات بين Noon وAmazon وShein ومفهوم تطبيق H&M
المعيارNoonAmazonSheinمفهوم H&M
التقييماتقويقويقويقوي
العروضقويقويقويقوي
طرق الدفعقويقويقويقوي
التقسيطقويقويفجوةقوي
التخصصفجوةفجوةقويقوي
سهولة الاستخدامقويقويقويقوي
سرعة التوصيلفجوةفجوةفجوةقوي
المصداقيةفجوةفجوةقويقوي

التصميم لمتسوّق شغوف بالموضة.

صورة شخصية محمد أحمد

محمد أحمد

«شاب شغوف بالموضة يحب العثور على المقاس المثالي — تمريرة بعد تمريرة. دائم البحث عن إطلالات جديدة وتحديث خزانته.»

العمر
29
العمل
مهندس
الحالة
متزوج، ولديه طفلان
الموقع
الإسكندرية، مصر
  • ضبط النفس
  • إيجابي
  • مجتهد
  • قيادي

الأهداف

  • بناء خزانة متنوعة — ملابس تناسب كل المناسبات: الكاجوال والعمل والفعاليات.
  • مواكبة الصيحات — متابعة أحدث صيحات الموضة وتجديد أسلوبه باستمرار.
  • اقتناص أفضل العروض — الاستفادة القصوى من التخفيضات والخصومات وأكواد الخصم.

مصادر الإزعاج (من خريطة التعاطف)

  • يشعر بعدم الارتياح عند الدفع بالبطاقة أونلاين
  • تأخير التوصيل
  • ملابس لا تطابق صورها في التطبيق

الدوافع

الحوافز
الخوف
النمو
القوة

القنوات المفضلة

Facebook
WhatsApp
Instagram
YouTube
خريطة تعاطف بملاحظات مقسّمة إلى: يقول، يفكر، يفعل، يشعر
خريطة التعاطف — يقول، يفكر، يفعل، يشعر

رسم أقصر طريق لإتمام الشراء.

يمتد مسار المستخدم من شاشة البداية والتعريف، مرورًا بالدخول أو التسجيل، والرئيسية، والفئات وقائمة المنتجات، وتفاصيل المنتج، والسلة، وحتى الدفع — مع فروع للرجال والنساء والأطفال.

مسار المستخدم لمفهوم H&M من شاشة البداية والتعريف حتى الدفع ونجاح الطلب
مسار المستخدمافتح بالحجم الكامل

من الدقة المنخفضة إلى العالية.

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

المخطط الأولي للرئيسية شاشة الرئيسية النهائية
الرئيسيةمنخفض الدقة ← عالي الدقة
المخطط الأولي لقائمة المنتجات شاشة قائمة المنتجات النهائية
قائمة المنتجاتمنخفض الدقة ← عالي الدقة
المخطط الأولي لتفاصيل المنتج شاشة تفاصيل المنتج النهائية
تفاصيل المنتجمنخفض الدقة ← عالي الدقة

كل المخططات الأولية

11 شاشة
مخطط شاشة البداية
شاشة البداية
مخطط التعريف
التعريف
مخطط الترحيب
الترحيب
مخطط تسجيل الدخول
تسجيل الدخول
مخطط إنشاء الحساب
إنشاء حساب
مخطط التحقق برمز OTP
رمز OTP
المخطط الأولي للرئيسية
الرئيسية
المخطط الأولي لقائمة المنتجات
قائمة المنتجات
المخطط الأولي لتفاصيل المنتج
تفاصيل المنتج
مخطط المنتج والسلة
إضافة للسلة
مخطط طلباتي
طلباتي

ألوان هادئة، لتبرز الملابس.

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

رسومات خطية لمتسوقين وهواتف مستخدمة في شاشات التعريف والدخول
مجموعة الرسومات

تجربة التسوق النهائية.

التعريف والدخول

5 شاشات
التعريف: الأزياء
التعريف
شاشة الترحيب مع الدخول والتسجيل
الترحيب
شاشة تسجيل الدخول
تسجيل الدخول
شاشة إنشاء حساب
إنشاء حساب
شاشة التحقق برمز OTP
التحقق برمز OTP

التسوق

5 شاشات
الرئيسية مع الفئات والمنتجات
الرئيسية
قائمة المنتجات مع المجموعة الجديدة والفئات والعروض السريعة
قائمة المنتجات
تفاصيل المنتج مع خيارات المقاس واللون
تفاصيل المنتج
تفاصيل القطعة مع الكمية والإضافة للسلة
إضافة للسلة
طلباتي مع أزرار تتبع الطلب
طلباتي
المشروع التالي — 03 Bakery

صفحة هبوط · ويب

أعجبك ما رأيت؟ لنتحدث.

تواصل معي

أرسل طلبك

أخبرني بما تحتاجه — وسيصل طلبك مباشرة إلى بريدي.

ما الذي تحتاجه؟
من فضلك اكتب اسمك.
من فضلك اكتب بريدًا إلكترونيًا صحيحًا.
من فضلك اكتب رسالة قصيرة.

تُستخدم بياناتك فقط للرد عليك.

تواصل عبر واتساب