AG
الأعمال ←

دراسة حالة — 02

Clinica Jizel

الدور
تصميم UI/UX
البناء
ووردبريس، إليمنتور برو — بمفردي
النوع
عيادة تجميل وعافية فاخرة
التركيز
ثقة قائمة على الصور، مع حجز مدمج
هيرو الصفحة الرئيسية لـ Clinica Jizel: Aesthetic Clinic، Clinica Jizel L.L.C، مع زرار Book Now فوق صورة علاج full-bleed، وشريط تواصل/موقع/مواعيد تحتها
01 التحدي

سبع تخصصات، عيادة واحدة لازم تحس فيها إنك في مكان فاخر.

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

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

02 التفكير

نسيب الصور هي اللي تبني الثقة، مش الأيقونات أو الكلام.

مع سبع خدمات بتتنافس على الانتباه، أسرع طريقة كانت تحولهم لدليل مسطح هي كارتات أيقونات وليبلات قصيرة. بدل ده، كل تخصص أخد صورة كلينيكية حقيقية كاملة — العلاج نفسه هو العرض — مع معلومات عملية (الموقع، المواعيد، التليفون) موضوعة قبل أي كلام تسويقي، للزوار اللي أصلًا قرروا إنهم عايزين يحجزوا.

الصورة الأول

سبع تخصصات، سبع صور حقيقية — من غير أي سيت أيقونات يقف بدل الشغل نفسه.

معلومة عملية، بسرعة

التواصل، الموقع، والمواعيد تحت الهيرو على طول، قبل أي سطر تسويق.

ثقة على خطوتين

شريط أرقام جامد (مرضى، دكاترة، عمليات) متبوع بـ"ليه تختارنا" مرقّم — إثبات، وبعده تبرير.

03 الاتجاه البصري

لون أخضر غامق وذهبي، بيتقرا كصفحة مجلة تجميل، مش عيادة.

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

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

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

أساسي غامق#162416
أخضر متدرج#3B5E3B
بارز#D9A444
نص#231F20
نيوترال#8E8E8E
أبيض#FFFFFF

عنوان إنجليزي

Playfair Display

متن إنجليزي

Poppins

04 عبر الأجهزة

الجريد على الديسكتوب بيتحول لسكرول full-bleed على الموبايل.

على الديسكتوب، السبع تخصصات متجمعة في جريد كثيف من أربع columns جنب كارت تعريفي، بشكل تقدر تمسحه بنظرة واحدة. على الموبايل، نفس الجريد بيتفتح لكولمن واحد من كارتات صور full-bleed، واحد بعد التاني — كل علاج بياخد عرض الشاشة كله بدل ما يتقزّم في خلية جريد صغيرة مش كفاية لصورة حقيقية تتقرا كويس.

جريد الخدمات على الديسكتوب: كارت تعريفي غامق جنب أربع columns من كارتات التخصصات — الجلدية، الجراحة التجميلية، الأسنان، المسالك البولية، إنقاص الوزن، علاج الشعر، أمراض النسا
الديسكتوب — جريد كثيف من أربع columns، قايمة الخدمات كلها ظاهرة في نفس الوقت.
عرض الخدمات على الموبايل: نفس الكارت التعريفي متبوع بكارتات full-width للجلدية والجراحة التجميلية، واحد فوق التاني
الموبايل — كارت واحد full-bleed في كل مرة، وكل صورة بتاخد عرض الشاشة كامل.
05 البناء

اتبنى بمفردي، بووردبريس وإليمنتور برو.

صممت وبنيت ده من أول لآخر. كارت الخدمة، بلاطة الإحصائية، وصف "ليه تختارنا" المرقّم، كل واحد منهم سكشن إليمنتور محفوظ، فنفس بنية السبع تخصصات دي قابلة لإعادة الاستخدام لأي عيادة جديدة ليها انتشار مشابه متعدد الأقسام — تكرر الصف، تبدّل الصورة والليبل.

شريط ثقة بيعرض عدد المرضى، نسبة رضا العملاء، عدد الدكاترة، وعدد العمليات على خلفية خضرا غامقة
شريط إحصائية واحد، معاد استخدامه عبر تخصصات العيادة — نمط اتبنى مرة واحدة واستمر في كل مشروع مشابه بعد كده.
06 اللي بيميزه

شوية قرارات طلعت إديتوريال، مش جينيريك.

وأنا باراجعه بنظرة UX، تلات قرارات شغالة أكتر من شكلها:

المعلومة قبل النية

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

مفيش أيقونات، صور بس

السبع تخصصات كلهم بيستخدموا صورة كلينيكية full-bleed مع تدرج overlay، مش كارت أيقونة أبدًا — ده متماشي مع عيادة فاخرة قائمة على الجمال، فين الجودة البصرية للشغل هي الإثبات نفسه.

علامة مائية، مش خط فاصل

خط "Why Choose Us" الكبير والخفيف قاعد خلف السكشن كـ texture خلفية بدل خط أو أيقونة — بيعلّم السكشن بصريًا وفي نفس الوقت يسيب القايمة المرقمة كل المساحة عشان تتنفس.

07 الصقل

شغلانة الصفحة الرئيسية إنها تكسب الضغطة، مش تحمل القصة كلها.

كل واحد من السبع كارتات تخصص بيودي لصفحة "Discover More" خاصة بيه، وده مقصود هو المكان اللي التفاصيل الخاصة بكل إجراء، شغل قبل/بعد، والأسئلة الشائعة لازم تكون فيه — عشان الصفحة الرئيسية تفضل سريعة المسح لحد لسه ما قررش أي تخصص محتاجه.

08 النتيجة

سبع تخصصات، بتتقرا كمكان واحد.

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