عيادة بتقدم شغل محترم، وراها موقع مش بيوصّفه صح.
موقع Arya القديم كان بطيء، مكنش فيه طريقة لحجز استشارة أونلاين، وشكله مش محترف قدام العيادة نفسها. الموقع مكنش بيحط مصداقية العيادة الحقيقية — دكاترة متخصصين، عدد كبير من المرضى، سنين خبرة — في مكان الزائر الجديد هيشوفه فعلاً، وكان شكله وحش على الموبايل، وده المكان اللي بيحصل فيه أغلب الزيارات الأولى.
البريف مكنش «اعمل تصميم جديد لصفحة». كان «اعمل للعيادة دي موقع شكله يوحي بثقة بقدر ما العيادة فعلاً جادة، وسيب الناس تحجز من غير ما تتصل».
البداية من العيادة نفسها، مش من قالب جاهز.
قبل أي شاشة، بصيت على اللي Arya عندها خلاص — اللوجو، تصوير الديكور الداخلي، وطريقة تقديمها لنفسها على السوشيال ميديا — وسحبت منها الألوان والعلامات اللي أصلاً خاصة بيها، بدل ما أخترع هوية جديدة من الصفر. من هنا رسمت الأفكار وعملت وايرفريم للموقع كامل في فيجما، وراجعته مع العميل قبل ما يتبنى أي حاجة، عشان بناء الووردبريس اللي جه بعد كده يكون متوافق مع حاجة أصلاً متفق عليها.
تدقيق البراند
اللوجو، تصوير الديكور الداخلي، والحضور على السوشيال ميديا اتراجعوا عشان نسحب ألوان وعلامات العيادة الحقيقية.
فيجما الأول
كل شاشة اتصممت واتعتمدت مع العميل قبل ما أي سكشن يدخل إليمنتور.
الثقة من الأول
تقييم المراجعات، عدد المرضى، وشهادات الدكاترة المتخصصين حطيناها فوق الفولد، مش مدفونة في صفحة About.
باليت واحدة، شكل كارت واحد، في كل حتة.
تدرج من البنفسجي للأزرق بيمشي من الهيرو لحد شريط الثقة، وكل فاليو، إحصائية، وعلاج بيشاركوا نفس الكارت المدور وشعار الدائرة — ده بيخلي الزائر اللي بيمسح الصفحة بعينه يقرأها كنظام واحد، مش كومة سكاشن متفرقة. نفس لغة البراند الرقمي كان لازم تحس بالاتساق مع المساحة الحقيقية اللي المرضى بيدخلوها.
الباليت ونظام الخطوط فضلوا متعمدين صغيرين — لونين أساسيين، سكيل واحد نيوترال، وفرق واضح بين خط العرض وخط النص، عشان أي سكشن جديد يفضل متسق من غير الرجوع لـ style guide كل مرة.
عنوان إنجليزي
Erstoria
نص إنجليزي
Inter
عنوان عربي
El Messiri — المسيري
نص عربي
Tajawal — تجوال
بُني موبايل-أول، مش تصغير من الديسكتوب.
أغلب زوار Arya بييجوا من الموبايل، فتصميم الموبايل مكنش نسخة مضغوطة من الديسكتوب — الكروت بترصّ فوق بعض، شريط الثقة بينزل لعمودين بدل ما يتصغر لنص مش مقروء، وأزرار الحجز فضلت سهلة الوصول بالإبهام بنفس سهولة وصولها بالماوس.
اتبنى بالووردبريس وإليمنتور برو، بالمحتوى كامل.
اتبنى الموقع ده لوحدي بالووردبريس وإليمنتور برو، وكتبت المحتوى واخترت الصور كجزء من الشغل بدل ما أستنى العميل يجهزها — مش كل صورة كانت جديدة؛ بعضها كان من مكتبة العيادة الموجودة واتقصّت واترتّشت عشان تتماشى مع اللاي أوت الجديد. أرقام الثقة، التخصصات، والعلاجات كلها اتعاد بناؤها في نفس الكارت المتكرر، فإضافة علاج جديد بعد كده بقت نسخ وتعديل، مش إعادة تصميم.
قرارات جت من البحث، مش من القالب.
وأنا بشوفه تاني بعين UX، في تلات قرارات بتشتغل أكتر من اللي يبدو عليها:
إثبات قبل العرض
تقييم جوجل وعدد المراجعات حاطينهم جوه الهيرو نفسه، مش في سكشن تيستيمونيالز بعد ستة سكرولات. الزائر الأول بيشوف إثبات اجتماعي قبل ما يقرا وصف خدمة واحدة.
طريقتين للتصرف، في كل حتة
«Schedule Consultation» والواتساب جنب بعض في كل نقطة قرار، مش بس في صفحة الاتصال — فالزائر اللي يفضل يبعت رسالة بدل ما يعبي فورم، أبدًا مش طريق درجة تانية.
التصوير قدام الأيقونات
العلاجات بتستخدم كارت صور full-bleed بتدرج overlay بدل تايلز أيقونات عامة — أوضح عاطفيًا لجمهور تجميلي، فين النتيجة شكلها أهم من شكل الأيقونة.
الحجز الأونلاين حل محل «اتصل بينا»، والموبايل بقى أولوية مش تفكير متأخر.
أكبر فجوة في الموقع القديم كانت إن الحجز معناه تليفون. إعادة البناء حطّت طلب استشارة مباشرة في الصفحة، متكررة في النقط اللي الزائر فعلاً جاهز يتصرف فيها، واللاي أوت كامل اتصمم موبايل-أول بدل ما يتكيّف لاحقًا من نسخة ديسكتوب.
موقع عيادة أسرع، قابل للحجز، وموبايل-أول.
وقت التحميل قل من حوالي 6 ثواني لتحت 2، نسبة الارتداد من الموبايل قلت حوالي 35%، وطلبات الاستشارة الأونلاين — اللي مكانت موجودة أصلاً قبل كده — دلوقتي بقت قريبة من تلت الحجوزات الجديدة جنب التليفون والواتساب.