متاح للعمل الوقت الآن في عمّان:
English

05 // تجارة إلكترونية · تطبيق iOS

Legacy

تطبيق لتسوّق الملابس الرسمية الرجالية في عمّان: شاهد القماش، واطمئن للمقاس، ونسّق الإطلالة، وأتمم الشراء في أقل من ثلاث دقائق.

الدور
بحث تجربة المستخدم وتصميم الواجهات
المشروع
مشروع مساق UI/UX
المنصة
تطبيق iOS (393 × 852)
الأدوات
Figma, FigJam

المشكلة

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

ما قمت به

أربع شخصيات، وخمسة احتياجات مشتركة، وبيانات مشكلة، ومسار مستخدم وخريطة تطبيق، وهياكل سلكية بالرمادي، ودليل أنماط، وشاشات نهائية.

النتيجة

صفحات منتج تُظهر القصّة والقماش، واختيار المقاس مبكرًا، واقتراحات للتنسيق، والدفع في شاشة واحدة (السلة ← الدفع ← التأكيد).

Legacy

أربعة أسباب لشراء بدلة

جاءت كل شخصية من لحظة شراء مختلفة: وظيفة أولى، ورحلة عمل، وخطوبة، وهدية.

  • عمر، 23 عامًا، مهندس معماري مبتدئ

    أول وظيفة بميزانية محدودة. “بدي أطلع كأني صاحب المكان، حتى لو راتبي راتب متدرب.”

  • كريم، 45 عامًا، مدير تنفيذي

    كثير السفر ولا وقت لديه للتجول. “إذا القميص زبط، بشتري منه خمسة.”

  • زيد، 29 عامًا، مقبل على الخطوبة

    يريد الإطلالة كاملة من مكان واحد، ويخشى أن تختلف الألوان في الواقع.

  • ليلى، 39 عامًا، تشتري هدية

    تشتري لزوجها دون أن تعرف مقاسه، وتريد استبدالًا سهلًا.

شخصية: عمر الناصر.

ما يجب أن يتقنه التطبيق

  • رؤية القصّة والقماش بوضوح، دون أن يشتت وجه العارض أو جسمه الانتباه.
  • وصف دقيق للخامة مثل “صوف 100%” أو “مقاوم للتجعد” يبرر السعر.
  • دليل مقاسات دقيق وسهل يزيل الخوف من المقاس الخطأ.
  • من البحث إلى إتمام الشراء في أقل من ثلاث دقائق.
  • معرفة القمصان وربطات العنق التي تناسب البدلة.

الهيكل قبل التنسيق

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

خريطة التطبيق
الرئيسية
  • سلة التسوقشاشتان
    • الدفع
      • شكرًا لك
  • الفئاتشاشة واحدة
    • صفحة المنتج
  • المفضلةشاشة واحدة
    • صفحة المنتج
  • الملف الشخصيشاشتان
    • المعلومات الشخصية
    • عنوان الشحن
  • صفحة المنتج
مسار المستخدم: من شاشة البداية حتى “تم تأكيد الطلب”
  • البداية
  • النهاية
  • شاشة
  • إجراء النظام
  • قرار

التسوق

  1. البداية: شاشة البداية
  2. شاشة: التعريف بالتطبيق
  3. شاشة: الدخول / التسجيل
  4. قرار: الرئيسية: كيف يجد ما يريد؟
    • التصفح: بدلات وجاكيتات وقمصان وأحذية وإكسسوارات
    • المحفوظات: المفضلة
    • منتج من الرئيسية
  5. شاشة: المنتج: التفاصيل والتقييمات والمشابه
  6. إجراء النظام: إضافة إلى السلة
  7. شاشة: السلة وملخص الطلب
  8. شاشة: الدفع: طريقة الدفع والشحن
  9. النهاية: شكرًا لك، ثم متابعة التسوق
  • هيكل: الرئيسية
  • هيكل: المنتج
  • هيكل: الدفع

ألوان الخيّاط

تحافظ قاعدة 60-30-10 على هدوء التطبيق وفخامته: الكريمي الدافئ (#F0EADC) للخلفيات، والفحمي (#2F2F2F) للنصوص، والبني (#754F23) للأسعار والإجراء الأهم فقط. ويمنح خط Libre Bodoni العناوين صوت الخيّاط الكلاسيكي، بينما يحافظ Lato على وضوح النصوص الصغيرة. وتُصوَّر المنتجات مسطّحة على خلفية بسيطة لتكون القصّة والقماش هما البطل.

من Figma بضعة متغيرات ألوان وخطّان. مأخوذة من ملف Legacy في Figma: أربعة متغيرات ألوان والخطوط المستخدمة في الشاشات النهائية.

النظام قيد الاستخدام

الألوان

يُحسب التباين مع الأبيض أو أغمق لون نص، أيهما أعلى. اضغط على أي لون لنسخ قيمته.

لوحة ألوان الخيّاط

الخطوط

  • Libre Bodoniالعناوين: صوت البوتيك
  • Latoالنصوص والواجهة
  • الرئيسية
  • المنتج: اختيار المقاس مبكرًا
  • السلة
  • الدفع في شاشة واحدة
  • شاشة البداية
  • الملف: إعادة الطلب بسرعة

النموذج التفاعلي: من شاشة البداية حتى “تم تأكيد الطلب”

نموذج Figma الحي: ابدأ من “Enter the Shop” وجرّب إتمام الشراء كما يفعل كريم.

مباشر من FigmaLegacy، مسار التسوق

يعمل داخل Figma: اضغط على العناصر كأنه المنتج الحقيقي. حجم التحميل تقريبًا 2–4 ميغابايت. افتحه بملء الشاشة في Figma (تبويب جديد)

تفضّل نظرة سريعة؟ في الأسفل الشاشات الأساسية واحدة تلو الأخرى مع الملاحظات.

تنقّل بين شاشات مسار التسوق من نموذج Figma، المبني حول هدف إتمام الشراء في أقل من ثلاث دقائق.

  1. ترحيب بطابع البوتيك
  2. التعريف بالتطبيق
  3. تسجيل الدخول
  4. الرئيسية: الفئات ووصل حديثًا
  5. المنتج: اختيار المقاس مبكرًا
  6. السلة
  7. الدفع في شاشة واحدة
  8. تم تأكيد الطلب
  9. الملف: إعادة الطلب بسرعة

1 / 9 ترحيب بطابع البوتيك

اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.

ما تعلّمته

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

اختصارات لوحة المفاتيح
اختصارات المفتاح الواحد

أوقفها إن كنت تستخدم الإدخال الصوتي أو كانت تزعجك أثناء التصفح.