AG
→ الأعمال

دراسة حالة — 03

Arya Medical Center

الدور
تصميم UI/UX، محتوى وتصوير
البناء
ووردبريس، إليمنتور برو — شغل فردي
النوع
عيادة طبية وتجميلية متعددة التخصصات
التركيز
الثقة والحجز، مبني من الصفر
صورة لصفحة Arya Medical Center الرئيسية على الديسكتوب، فيها العنوان Your Health & Beauty, Our Priority مع زرار لحجز استشارة، شعار تقييم جوجل، وشريط لمميزات الثقة
01 التحدي

عيادة بتقدم شغل محترم، وراها موقع مش بيوصّفه صح.

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

البريف مكنش «اعمل تصميم جديد لصفحة». كان «اعمل للعيادة دي موقع شكله يوحي بثقة بقدر ما العيادة فعلاً جادة، وسيب الناس تحجز من غير ما تتصل».

02 التفكير

البداية من العيادة نفسها، مش من قالب جاهز.

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

تدقيق البراند

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

فيجما الأول

كل شاشة اتصممت واتعتمدت مع العميل قبل ما أي سكشن يدخل إليمنتور.

الثقة من الأول

تقييم المراجعات، عدد المرضى، وشهادات الدكاترة المتخصصين حطيناها فوق الفولد، مش مدفونة في صفحة About.

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

باليت واحدة، شكل كارت واحد، في كل حتة.

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

استقبال Arya Medical Center، بتصميم رخام وخشب دافي، بيعكس هوية الموقع البصرية
الهوية الرقمية بُنيت عشان تطابق العيادة اللي المرضى بيدخلوها فعلاً، مش إحساس ستوك عام.

الباليت ونظام الخطوط فضلوا متعمدين صغيرين — لونين أساسيين، سكيل واحد نيوترال، وفرق واضح بين خط العرض وخط النص، عشان أي سكشن جديد يفضل متسق من غير الرجوع لـ style guide كل مرة.

أساسي#475A9C
مميز#B37CB8
حبر#000000
سطح#FFFFFF
نيوترال#E5E7EB

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

Erstoria

نص إنجليزي

Inter

عنوان عربي

El Messiri — المسيري

نص عربي

Tajawal — تجوال

04 بين الأجهزة

بُني موبايل-أول، مش تصغير من الديسكتوب.

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

واجهة ديسكتوب لسكشن ليه المرضى بيثقوا في Arya Clinic، فيها قايمة مرقمة جنب صورة دكتور
الديسكتوب — بانل عمودين فيه مساحة للقايمة المرقمة كاملة جنب صورة الدكتور.
واجهة موبايل لنفس سكشن ليه المرضى بيثقوا في Arya Clinic، مرصوصة في عمود واحد
الموبايل — نفس البانل مرصوص في عمود واحد، نفس الترتيب، نفس القايمة المرقمة.
05 البناء

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

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

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

قرارات جت من البحث، مش من القالب.

وأنا بشوفه تاني بعين UX، في تلات قرارات بتشتغل أكتر من اللي يبدو عليها:

إثبات قبل العرض

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

طريقتين للتصرف، في كل حتة

«Schedule Consultation» والواتساب جنب بعض في كل نقطة قرار، مش بس في صفحة الاتصال — فالزائر اللي يفضل يبعت رسالة بدل ما يعبي فورم، أبدًا مش طريق درجة تانية.

التصوير قدام الأيقونات

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

07 التحسين

الحجز الأونلاين حل محل «اتصل بينا»، والموبايل بقى أولوية مش تفكير متأخر.

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

08 النتيجة

موقع عيادة أسرع، قابل للحجز، وموبايل-أول.

وقت التحميل قل من حوالي 6 ثواني لتحت 2، نسبة الارتداد من الموبايل قلت حوالي 35%، وطلبات الاستشارة الأونلاين — اللي مكانت موجودة أصلاً قبل كده — دلوقتي بقت قريبة من تلت الحجوزات الجديدة جنب التليفون والواتساب.