صفحة العلامة
صفحة علامة تبدأ ببانر حملة، ثم قصة قصيرة عن العلامة وبطاقة شعار، فتعرف المتسوقة ممن تشتري.
- بانر حملة علامة الشهر
- قصة قصيرة للعلامة
- بطاقة شعار للتعرف السريع
كل المشاريع
دراسة حالة
RaviaCare: متجر جمال وعناية بالبشرة للخليج
مشروع تصميم متكامل، من بحث المستخدم حتى الواجهات النهائية، للكمبيوتر والموبايل بالإنجليزية مع دعم التعريب للعربية.
- العميل
- RaviaCare
- دوري
- تصميم UI/UX، من البحث للواجهات
- المنصة
- ويب، كمبيوتر وموبايل
- السوق
- الإمارات والخليج
نظرة عامة
RaviaCare منصة تجارة إلكترونية للجمال والعناية الشخصية مصممة للخليج مع تركيز على الإمارات. تربط العملاء بمنتجات العناية بالبشرة والشعر والجسم والعطور من علامات عالمية موثوقة مثل Vichy وLa Roche-Posay وEucerin وCeraVe.
تطلّب الطلب مشروعًا متكاملًا، من بحث المستخدم وحتى الواجهات النهائية، يغطي الكمبيوتر والموبايل بالإنجليزية مع دعم التعريب للعربية.
عن العميل
- 12+فئة منتجات
- 200+علامة عالمية
- 6مقابلات مستخدمين عن بُعد
ما يغطيه
- الرئيسية
- صفحات العلامات
- قوائم الفئات
- السلة والدفع
- تفاصيل الطلب
- إعدادات الحساب
التحدي
ما كان يجب حلّه
سوق مفتت
المنتجات تُباع عبر قنوات كثيرة، نادرًا بمعلومات متسقة أو إشارات ثقة أو رحلة شراء سلسة.
لا أعرف ما يناسب بشرتي
واجه المستخدمون صعوبة في إيجاد منتجات تناسب نوع بشرتهم.
شك في التوصيل والإرجاع
ثقة ضعيفة في مواعيد التوصيل وسياسات الإرجاع، وهذا يغذي ترك السلة.
ثنائي اللغة من اليوم الأول
الوصول لجمهور إنجليزي وعربي دون قالب مرآة.
الأهداف
- إطلاق وجهة جمال مناسبة إقليميًا للخليج
- دعم أكثر من 12 فئة و200 علامة عالمية على منصة واحدة
- تقديم تجربة متسقة وعالية الثقة على الكمبيوتر والموبايل
- إتاحة الوصول لجمهور الإنجليزية والعربية من اليوم الأول
- إظهار خيارات توصيل شفافة لتقليل ترك السلة
مسار العمل
من الملخص إلى الشاشات
الملخص والتحليل
أستلم المطلوب من العميل ثم أحلله جيدًا: الأهداف والجمهور والقيود ومعنى النجاح. لا أبدأ الرسم قبل أن يكون المطلوب واضحًا.
الاسكتش
أبدأ بالرسم على الورق: اسكتشات سريعة للهيكل والمسارات الرئيسية، فيسهل تغيير الأفكار قبل وضع أي عنصر على الشاشة.
الأساسيات ونظام التصميم
أضع الأساسيات: الألوان والخطوط والمسافات والمكونات الأساسية. وإن كان لدى العميل نظام تصميم أبني عليه، وإلا أنشئ نظامًا خاصًا بالمشروع.
بناء الشاشات
بعد جاهزية النظام أركّب الشاشات من مكوناته، فتبقى كل صفحة متسقة وسريعة التنفيذ.
العملية
كيف تحرّك العمل
البحث
بحث ثانوي وتحليل منافسين وخطة بحث واستبيان تصفية.
المقابلات
ست مقابلات مستخدمين عن بُعد بالفيديو.
التحليل
مخطط تقارب وخريطة تعاطف وشخصية رئيسية.
البنية
هندسة المعلومات وهياكل أولية للكمبيوتر والموبايل.
النظام والواجهة
اللون والخط والتباعد والمكوّنات، ثم شاشات عالية الدقة للكمبيوتر والموبايل.
العمل
الصفحة الرئيسية كاملة
raviacare.com
مرّر الماوس لتتحرك الصفحة
شاشات مختارة
6 شاشات تحمل النظام
قائمة الفئة
تبدأ صفحة الفئة بهيرو حملة نابض، ثم فئات فرعية دائرية للتصفح السريع.
- هيرو حملة لكل فئة
- اختصارات فئات فرعية دائرية
- ترويسة وبحث ثابتان
سلة التسوق
سلة تُبقي ملخص الطلب بجانب المنتجات، مع حقل كود خصم ومسار واضح واحد نحو الدفع.
- الكمية والسعر على كل منتج
- ملخص الطلب مع كود خصم
- إتمام الشراء كإجراء رئيسي
إتمام الشراء
يضع الدفع عنوان الشحن وطريقة التوصيل في جهة ويُبقي الملخص في الجهة الأخرى، وهنا تؤتي شفافية التوصيل ثمارها.
- عنوان شحن محفوظ مع خيار التغيير
- خيارات التوصيل بتكلفتها
- الملخص يبقى ظاهرًا
تفاصيل الطلب
صفحة طلب تحكي قصة التوصيل كخط زمني من أربع خطوات، وتحتها إجراءات الفاتورة وإعادة الطلب والمساعدة.
- حالة الطلب والإجمالي في الأعلى
- الخط الزمني: تم الطلب، تأكيد، شحن، تسليم
- تنزيل الفاتورة، إعادة الطلب، المساعدة
إعدادات الحساب
شاشة إعدادات هادئة: قائمة جانبية لكل أقسام الحساب ونموذج واحد للبيانات الشخصية مع زر حفظ.
- قائمة جانبية لكل أقسام الحساب
- نموذج البيانات الشخصية
- قسم تغيير كلمة المرور
قرارات التصميم
التفكير وراء الخيارات
وحدة تفاصيل التوصيل
شاشة مخصصة تجعل اللوجستيات شفافة وتجيب مباشرة على شك التوصيل والإرجاع.
أقسام حملات تلفت النظر
أقسام Glow Season وNew Arrivals وBrand Showcase تدخل الترويج في التخطيط دون ضجيج.
إرشاد بحسب نوع البشرة
تسلسل المحتوى في كل قسم يساعد المتسوقة على إيجاد ما يناسب بشرتها.
مبني للإنجليزية والعربية
رُوعيت التخطيطات للتبديل بين الإنجليزية والعربية منذ البداية.
العلامة
الألوان التي يتحدث بها التصميم
- #9A244Cالخوخي الداكنمن الشعار
- #000000الأسودالشعار والنص
- #B4A6C2ليلكيمأخوذ من الغلاف
- #F7E8EEوردي فاتحالأسطح (مشتق)
ما سلّمته
- تقرير البحث والشخصية
- هندسة المعلومات
- هياكل أولية للكمبيوتر والموبايل
- نظام التصميم
- واجهات عالية الدقة
دراسة الحالة التاليةFlairsTech: موقع لخدمات مُدارة مدعومة بالذكاء الاصطناعياعرض دراسة الحالة
