H2A
على الجوال يرى متسوق الملابس واجهة القطعة فقط، ويخمّن الباقي. أعدت بناء قالب Shopify لمتجر H2A حول حركة واحدة: اسحب القطعة من رف ملابس ثلاثي الأبعاد، ولفّها، ثم اختر مقاسك.
واجهة المتجر بعد التحديث على الكمبيوتر والجوال، مأخوذة من القالب وهو يعمل على منتجات المتجر نفسه.
- الدور
- تصميم تجربة وواجهة وتطوير Shopify
- المنصة
- Shopify Liquid · Three.js
- النطاق
- القالب والرف ثلاثي الأبعاد وصفحات المنتج والمقاسات والسلة
- المتجر
- h2aa.store ↗
يرى المتسوق القطعة من كل جانب قبل صفحة المنتج.
يحسم متسوق الملابس قراره بأشياء قليلة: الأمام، والخلف، والمقاس، والسعر. وعلى الجوال لا تعرض الشبكة الثابتة غير الأمام تقريبًا. لذلك علّقت القطع على رف يتصفحه المتسوق بإبهامه، فيسحب القطعة للأمام ويلفّها قبل أن يفتح صفحة المنتج.
وبقية المتجر Shopify مألوف، لكن بتفاصيل مدروسة: صفحات منتج تبدأ بالقطعة نفسها، وإرشاد مقاس يجيب فورًا، وسلة تعرض التقدم نحو عرض الصيف. وبقيت هوية المتجر ومجموعاته وبيانات المنتجات والمخزون الأصلية في Shopify كما هي.
رف ملابس تلفّه بإبهامك.
كل قطعة مبنية من صورة المنتج في المتجر: يتحول الشكل إلى قماش منحنٍ بسُمك حقيقي معلّق على شمّاعة. اسحب للتصفح، واضغط لسحب القطعة للأمام، واسحب لتلفّها. تتوقف الحركة عند اللمس، وتلتزم بإعداد تقليل الحركة في الجهاز.
الصيف على رف، والشتاء على رف.
تفتح مجموعتا الصيف والشتاء على رفين بمنتجاتهما، ويأتي الكتالوج الكامل أسفلهما. ويُظهر مبدّل المواسم للمتسوق أين يقف الآن.
القطعة أولًا، ثم مقاس مقترح بلا انتظار.
تبدأ صفحة المنتج بالصورة، ثم الاسم والسعر. وتأخذ أداة «اعرف مقاسك» الطول والوزن والقَصّة المفضلة، وتقترح مقاسًا مبدئيًا فورًا على الجهاز نفسه بلا شاشة انتظار. وتظهر النتيجة موسومة بأنها تقريبية حتى يضيف التاجر جداول مقاسات فعلية، ولا يُضاف شيء إلى السلة قبل اختيار المقاس.
العرض في السلة، حيث يُحسم القرار.
تُظهر السلة مقاس كل قطعة والتقدم نحو عرض الصيف: اشترِ اثنتين واحصل على الثالثة مجانًا. والخصم خصم Shopify حقيقي يُطبَّق عند الدفع، وراجعت حسابه والشحن على المتجر الفعلي.
ما اختبرته قبل التسليم
- 35 اختبارًا آليًا: الصفحات والمخزون والرفوف وأدوات المعرض والمقاسات والسلة
- فحص قالب Shopify بلا أخطاء مسجلة
- التسليم على نطاق المتجر نفسه ببيانات المنتجات والمخزون الأصلية
حدود هذا العمل
- لم أقس أي تغيير في المبيعات أو التحويل
- الرف تمثيل مبني على الصور، وليس مسحًا ثلاثي الأبعاد للقطعة
- حين لا توجد صورة خلفية للقطعة، يعرض الرف خلفية سادة مُعدّة؛ وتحتفظ صفحات المنتج بصور التاجر نفسه
- إرشاد المقاس تقريبي حتى تتوفر جداول مقاسات فعلية
من الرف إلى السلة في 36 ثانية.
تسجيل للمتجر بعد التسليم مع ترجمة عربية: المدخل، ثم الرف، ثم صفحة منتج، ثم السلة.
أين يتردد متسوقوك؟
بين صورة المنتج واختيار المقاس والسلة تتراكم قرارات صغيرة. أخبرني أي جزء من متجرك يحتاج أن يصبح أوضح.