MDONE
واجهة الويب العربية أولًا لأكبر دليل أطباء في العراق: يبحث المريض عن الأطباء المرخّصين بالمدينة أو المنطقة أو التخصص أو العَرَض، ويرى من المتاح اليوم، ويحجز من دون دفع مسبق — إلى جانب سطح ثانٍ يبيع اشتراك العيادات.
- الدور
- تطوير الواجهة الأمامية · تنفيذ Next.js فوق API قائم · تعاقد مستقل
- الخدمات
- واجهة Next.js بـ App Router · واجهة عربية أولًا بـ RTL · دليل أطباء وبحث متعدد الفلاتر · صفحات الأطباء ومدخل الحجز · مقارنة اشتراكات العيادات · العروض وتصفح التخصصات · تخطيطات متجاوبة للموبايل · بيانات SEO واستراتيجية العرض
- التقنيات
- Next.js · App Router · React · TypeScript · Arabic RTL · REST API · ISR / SSR
- العميل
- MDONE
- المجال
- الرعاية الصحية
- المدة الزمنية
- 6 أسابيع · 2025
01 / سياق العمل
المشكلة المطلوب حلّها
كانت منصة MDONE موجودة — API طبي ولوحات للعيادات وتطبيقات موبايل — لكنها احتاجت واجهة ويب تحمل جمهورين مختلفين في وقت واحد. مريض في بغداد لا يعرف اسم التخصص الذي يحتاجه لا بد أن يصل إلى الطبيب الصحيح خلال نقرات قليلة، بينما العيادة التي تدرس الاشتراك تحتاج خططًا معروضة بوضوح يكفي للاختيار. وكان على الاثنين أن يعملا بالعربية ومن اليمين إلى اليسار كتجربة أصلية لا كطبقة مترجمة.
MDONE منصة دليل أطباء وحجز مواعيد في العراق، تربط المرضى بالأطباء والأخصائيين والاستشاريين المرخّصين، ولها تطبيقان على iOS وAndroid. كان نطاق عملي هو واجهة الويب: تطبيق Next.js بـ App Router مبني بالعربية أولًا فوق الـ API القائم للمنصة، يغطي دليل المرضى وبحثه، وقوائم الأطباء وصفحاتهم، ومدخل الحجز، وعروض العيادات، وصفحات اشتراك مد وان بيزنس. أما الـ Backend ولوحات العيادات وتطبيقات الموبايل فقد بناها فريق المنصة نفسه.
02 / من النطاق إلى الإطلاق
كيف تحرّك العمل؟
أصبح المنتج أوضح عبر قرارات محددة ونسخ عاملة وملاحظات مستمرة، لا عبر انتظار كشف نهائي طويل.
05 خطوات
خطوة 01
بدأت من الرحلتين اللتين يخدمهما الموقع — مريض يبحث عن طبيب، وعيادة تقرر إن كانت ستشترك — وتعاملت معهما كمسارين منفصلين داخل واجهة واحدة، بدل صفحة رئيسية تحاول مخاطبة الاثنين معًا.
خطوة 02
بنيت الواجهة بالعربية أولًا: المستند نفسه يُقدَّم من اليمين إلى اليسار، فكُتبت التخطيطات والأيقونات والخطوط على هذا الأساس بدل عكسها في النهاية.
خطوة 03
صغت البحث بالطريقة التي يصف بها المريض مشكلته فعلًا — المدينة، ثم المنطقة، ثم التخصص أو العَرَض، ثم اسم الطبيب — وجعلتها كلها قابلة للدمج في استعلام واحد على الـ API القائم.
خطوة 04
صممت بطاقة الطبيب لتجيب عن الأسئلة التي تحسم النقرة قبل حدوثها: التقييم، ودرجة الاختصاص، وهل الطبيب متاح اليوم.
خطوة 05
قدّمت صفحات القوائم والتفاصيل من الخادم مع إعادة تحقّق مخزّنة، لأن الدليل يكسب معظم زياراته من البحث بالعربية لا من الزيارة المباشرة.
03 / القرارات التي شكّلت المنتج
قرارات المنتج الأساسية
العربية كمستند، لا كزر تبديل
- سياق العمل
- بناء جاهز لثنائية اللغة كان يعني التصميم من اليسار إلى اليمين ثم العكس لاحقًا. ولمنتج كل جمهوره يقرأ بالعربية، هذا لا يستورد سوى أخطاء تخطيط يكون الجمهور أول من يصطدم بها.
- القرار
- بنيت الموقع بالعربية فقط من المستند نفسه — تُقدَّم الصفحة بـ `lang=ar` و`dir=rtl`، وكل تخطيط واتجاه أيقونة ومسار نموذج مكتوب من اليمين إلى اليسار.
- لماذا
- لا شيء يحتاج إلى عكسٍ متأخر تحت الضغط، والتفاصيل التي تنكسر عادةً في RTL المضاف لاحقًا — محاذاة الحقول، واتجاه الكاروسيل، وترتيب مسار التنقّل — لم تكن خاطئة من الأساس.
فلاتر بشكل سؤال المريض
- سياق العمل
- بحث الأدلة يبدأ افتراضيًا من التخصص، لكن المريض كثيرًا ما لا يعرف اسم التخصص الذي يحتاجه، و«بغداد» وحدها أوسع من أن تفيد حين يكون السؤال الحقيقي: في أي جهة من المدينة العيادة؟
- القرار
- بنيت البحث حول أربعة مدخلات قابلة للدمج — المدينة، والمنطقة، والتخصص أو العَرَض، واسم الطبيب — مع تضييق قائمة المناطق إلى مناطق بغداد الفعلية بمجرد اختيار المدينة.
- لماذا
- يتيح ذلك للمريض أن يبدأ مما يعرفه فعلًا، والبحث بالعَرَض يفتح مدخلًا لكل من كان عليه غير ذلك تخمين المصطلح الطبي قبل أن يستطيع الموقع مساعدته.
البطاقة تجيب قبل النقرة
- سياق العمل
- دليل يعرض الاسم والتخصص فقط يُجبر المريض على فتح عدة صفحات ليجد طبيبًا واحدًا يستطيع استقباله فعلًا، وهي أبطأ طريقة ممكنة للفشل.
- القرار
- وضعت الحقائق الثلاث الحاسمة على البطاقة نفسها — التقييم، ودرجة الاختصاص مع شارة التوثيق، وهل الطبيب متاح اليوم — مع تمييز عدم الإتاحة بنفس وضوح الإتاحة.
- لماذا
- تحدث معظم التصفية بالعين على صفحة النتائج بدل التنقّل المتكرر، ومن يحتاج طبيبًا اليوم يرى من هو من دون فتح أي شيء.
عرض من الخادم لأن الدليل يعيش على البحث
- سياق العمل
- تبدأ معظم هذه الزيارات كبحث عربي عن تخصص أو منطقة، لا كزيارة مباشرة — وصفحة لا توجد إلا بعد أن يجلبها المتصفح هي صفحة لا يعثر عليها أحد غالبًا.
- القرار
- قدّمت صفحات القوائم والمحتوى من الخادم عبر App Router، مع ردود مخزّنة يُعاد التحقق منها في الخلفية، وعناوين وأوصاف وكلمات مفتاحية عربية لكل صفحة.
- لماذا
- تصل القوائم معروضة بالفعل للمريض ولمحرك البحث معًا، ويُبقي التخزين الزيارات المتكررة سريعة من دون أن يعرض الدليل حالة فارغة أثناء التحميل.
جمهوران على موقع واحد، كلٌّ في مساره
- سياق العمل
- المنصة نفسها تبيع للمرضى وللعيادات. ودمج الاثنين يجعل المريض يخوض في أسعار لن يدفعها أبدًا، ويترك العيادة تبحث عن مقارنة الخطط.
- القرار
- أبقيت دليل المرضى واشتراك مد وان بيزنس مسارين منفصلين، وبنيت الخطط كمصفوفة مزايا واحدة قابلة للمقارنة — نفس الاثنتي عشرة ميزة بعلامة صح أو خطأ عبر ثلاث درجات — مع إبراز الخطة الوسطى بصريًا.
- لماذا
- يحصل كل جمهور على مسار يطابق ما جاء من أجله، وتستطيع العيادة مقارنة الخطط بنظرة واحدة بدل قراءة ثلاث صفحات تسويقية واستنتاج الفروق.
04 / المنتج أثناء الاستخدام
ما تم بناؤه
واجهات حقيقية عبر تجربة العميل والتشغيل.
05 / كيف تم بناؤه؟
قرارات هندسية
واجهة Next.js بـ App Router مبنية فوق الـ REST API القائم للمنصة، مع Server Components تعرض صفحات الدليل والتخصصات والعروض والاشتراكات.
واجهة عربية فقط مُقدَّمة على مستوى المستند (`lang="ar"` و`dir="rtl"`)، فيكون RTL هو اتجاه التخطيط الافتراضي لا تجاوزًا في ملف الأنماط.
بحث أطباء يدمج المدينة والمنطقة والتخصص أو العَرَض واسم الطبيب في استعلام واحد، مع حصر خيارات المناطق ضمن المدينة المختارة.
بطاقات نتائج تُظهر التقييم ودرجة الاختصاص مع شارة التوثيق والإتاحة لليوم وعنوان العيادة مكتوبًا بالعلامات المحلية كما تُعطى العناوين في العراق فعلًا.
صفحات مُقدَّمة من الخادم مع إعادة تحقّق مخزّنة وعناوين وأوصاف وكلمات مفتاحية عربية لكل صفحة، ليكون الدليل قابلًا للفهرسة باللغة التي يبحث بها جمهوره.
خطط مد وان بيزنس كمصفوفة مقارنة واحدة عبر ثلاث درجات، مع إبراز الخطة الوسطى وإجراء بدء مباشر على كل خطة.
عروض العيادات معروضة من الـ API كبطاقات منسوبة إلى الطبيب صاحب العرض، تظهر ككاروسيل على الصفحة الرئيسية وكقائمة كاملة.
تخطيطات متجاوبة حتى عروض الموبايل، إلى جانب تطبيقَي iOS وAndroid الخاصين بالمنصة اللذين يوجّه إليهما الموقع.
06 / ما الذي تغيّر؟
النتيجة التي تم تسليمها
يقدّم حضور MDONE على الويب دليل المرضى وعرض اشتراك العيادات كمسارين واضحين داخل موقع عربي أولًا.
يستطيع المريض البحث بالمدينة أو المنطقة أو التخصص أو العَرَض أو اسم الطبيب، وأن يحكم على الإتاحة والاختصاص من صفحة النتائج نفسها.
تستطيع العيادة مقارنة الدرجات الثلاث كمصفوفة مزايا واحدة والبدء من صفحة الخطة بدل نموذج تواصل.
صفحات القوائم والمحتوى تُقدَّم من الخادم ببيانات وصفية عربية، فيصبح الدليل في متناول عمليات البحث التي يجريها جمهوره فعلًا.
سُلّم كتعاقد واجهة أمامية خلال ستة أسابيع فوق الـ API والتطبيقات القائمة للمنصة.
هل تواجه تحديًا مشابهًا في منتجك؟
ابدأ بالمشكلة. يمكننا تحديد المنتج الذي تحتاجه ومسار عملي للوصول إلى الإطلاق.