جارٍ التحميل...
الرئيسية / أعمالي / الكلثم

الكلثم

تصميم واجهات
تصميم واجهات

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

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

شاهد على بيهانس
واجهة متجر الكلثم للعناية بالبشرة والشعر من تصميم آية الفقي
صفحة المنتج: المكونات والروتين والنتيجة بالوزن نفسه الذي يحمله السعر وزر الإضافة إلى السلة.
النتيجة

ما الذي يحققه التصميم

القرارات التي يقوم عليها هذا المشروع.

القصة كاملة في صفحة

المكوّنات والروتين والنتائج مجتمعة، لا مبعثرة.

موجّه لا مُربِك

التفاصيل الكثيفة موزّعة بإيقاع يُبقي المتسوّق معها.

مصمّم ليُفهَم

كل معلومة موضوعة حيث يتكوّن السؤال.

ماذا ستحصل عليه

واجهة محورها صفحة المنتج

ثلاث قطع تحمل قرار العناية بالبشرة والشعر من التصفح حتى الدفع.

صفحة منتج تتولى الإقناع

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

كل حالة تفاعلية مرسومة

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

مكتبة مكوّنات

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

كيف يسير العمل

أربع مراحل، من الرف إلى الشاشة

صفحة المنتج تُرسم أخيراً، بعد أن يستقر كل ما يقود إليها.

البحث

أمر على مجموعة المنتجات، وكيف تُشرح المكونات والروتين عادة، وكيف يتصفّح الناس منتجات العناية بالبشرة والشعر على الإنترنت.

المخططات الهيكلية

يُحسم التخطيط والمسار — من التصنيف إلى المنتج إلى السلة — بدقة منخفضة أولاً، قبل أي قرار بصري.

التصميم البصري

تُطبَّق الألوان والخطوط والصور بعد أن يثبت الهيكل، وتحمل صفحة المنتج المكونات والروتين والنتيجة كمحتواها الأساسي.

التسليم

تُسلَّم كل شاشة وكل حالة تفاعلية كمكتبة مكوّنات، جاهزة للتطوير دون تخمين.

نظرة سريعة

تفاصيل المشروع

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

تبنين متجراً تتولى صفحة المنتج فيه الإقناع؟ شاهدي خدمة تصميم واجهات وتجربة المستخدم.

أسئلة

قبل أن تطلبي مجموعة شاشات كهذه

لماذا تُمنح صفحة المنتج هذا الوزن الأكبر من باقي المتجر؟
منتجات العناية بالبشرة والشعر تُدرَس قبل أن تُشترى — الناس يريدون المكونات والروتين والنتيجة قبل أن يثقوا بمنتج على بشرتهم. كل ما يسبق تلك الصفحة، من التصنيفات إلى الفلترة، صُمّم ليكسبها بإنصاف لا ليتجاوزها بسرعة.
ماذا يعني "كل حالة تفاعلية مرسومة" فعلياً؟
السلة الفارغة، وحالة التحميل، ونفاد المخزون، وشاشات الخطأ — الحالات التي يضطر المطور عادة إلى تخمينها. في الكلثم صُمّمت عمداً وسُلّمت ضمن مكتبة المكوّنات نفسها الخاصة بباقي المتجر.
هل يصلح هذا الأسلوب لفئات منتجات أخرى؟
نعم — في أي مكان يحتاج فيه المتسوق إلى البحث قبل الشراء، لا في العناية بالبشرة فقط. المنطق نفسه ينطبق على المكمّلات الغذائية أو الإلكترونيات أو أي مجال آخر تهم فيه المكونات أو المواصفات أو الروتين بقدر أهمية السعر.

أعجبك ما رأيت؟

احكِ لي عن متجرك وسأريك كيف يمكن أن يبدو.

هل لديك فكرة متجر؟
لنتحدث على واتساب!