تسجيل الدخول
تسجيل دخول مقسوم: نموذج هادئ بسيط في جهة وصورة للكعبة في الجهة الأخرى، كله بذهبي المنصة.
- اسم المستخدم أو البريد مع كلمة المرور
- زر رئيسي ذهبي واحد
- رابط تسجيل للمعتمرين الجدد
كل المشاريع
umrahHub
دراسة حالة
UmrahHub: المنصة الرسمية لتخطيط العمرة وحجزها
بوابة رقمية موحدة للمعتمرين ومقدمي الخدمات لتخطيط رحلة العمرة وحجزها وعيشها، من أهلية التأشيرة إلى إدارة برنامج الرحلة كاملًا.
- العميل
- UmrahHub
- دوري
- تصميم UI/UX
- المنصة
- ويب، تخطيط 1440px
- اللغات
- العربية والإنجليزية
نظرة عامة
UmrahHub هي المنصة الرسمية لتخطيط العمرة وحجزها وتجربتها. تخدم فئتين: معتمرين يخططون لرحلتهم، ومقدمي خدمات مرخّصين يقدمون الباقات والطيران والتجارب السياحية.
كان التحدي تصميم تجربة وقورة وموثوقة تعكس قدسية العمرة وتبقى بسيطة بما يكفي لجمهور عالمي متعدد اللغات، كثير منه ليس رقميًا بالفطرة.
ما يغطيه
- الدخول ورمز التحقق
- باقات العمرة
- حجز الباقة
- تفاصيل الحجز
- أهلية التأشيرة
- صفحة مقدمي الخدمة
التحدي
ما كان يجب حلّه
جمهور عالمي متنوع
عشرات الدول واللغات بمستويات إلمام رقمي مختلفة جدًا، على منصة واحدة.
التنظيم وحجز بجودة المستهلك
الموازنة بين الترخيص وأهلية التأشيرة وعقود الخدمة وبين مسار حجز بسيط.
ثنائي اللغة على 1440px
جعل العربية والإنجليزية تعملان بسلاسة على تخطيط عريض دون فقدان تسلسل القراءة في أي منهما.
متاح الآن، قريبًا
التمييز بين الخدمات المتاحة (تصريح العمرة والمعالم) والقادمة (الطيران) دون الإضرار بالثقة.
جمهوران في صفحة واحدة
مخاطبة المعتمرين وأصحاب الأعمال في آنٍ واحد.
مسار العمل
من الملخص إلى الشاشات
الملخص والتحليل
أستلم المطلوب من العميل ثم أحلله جيدًا: الأهداف والجمهور والقيود ومعنى النجاح. لا أبدأ الرسم قبل أن يكون المطلوب واضحًا.
الاسكتش
أبدأ بالرسم على الورق: اسكتشات سريعة للهيكل والمسارات الرئيسية، فيسهل تغيير الأفكار قبل وضع أي عنصر على الشاشة.
الأساسيات ونظام التصميم
أضع الأساسيات: الألوان والخطوط والمسافات والمكونات الأساسية. وإن كان لدى العميل نظام تصميم أبني عليه، وإلا أنشئ نظامًا خاصًا بالمشروع.
بناء الشاشات
بعد جاهزية النظام أركّب الشاشات من مكوناته، فتبقى كل صفحة متسقة وسريعة التنفيذ.
العملية
كيف تحرّك العمل
الفهم
المعتمرون ومقدمو الخدمة والإطار التنظيمي.
المسارات
الدخول والرمز واختيار الباقة وبيانات المعتمر والدفع والحجز.
نظام التصميم
نظام تحريري بالذهبي والرمادي، موثّق بالكتابة.
الشاشات
شاشات سطح المكتب بالعربية والإنجليزية.
التسليم
رموز وقواعد مكوّنات لفريق التنفيذ.
العمل
المنصة كاملة
umrahhub.sa
مرّر الماوس لتتحرك الصفحة
شاشات مختارة
6 شاشات تحمل النظام
تحقق من الرمز
خطوة رمز التحقق تُبقي مهمة واحدة على الشاشة: أدخل الرمز المرسل، مع المؤقت وخيار إعادة الإرسال بالقرب.
- خانات رمز كبيرة منفصلة
- مؤقت للرمز الحالي
- خيار إعادة الإرسال في المتناول
إدخال الرمز
نفس الخطوة أثناء الإدخال، بأرقام مكتوبة وزر التأكيد جاهز.
- الأرقام المدخلة ظاهرة بوضوح
- زر التأكيد يبقى في مكانه
- نفس تخطيط الدخول للاستمرارية
احجز باقة
يبدأ الحجز بشريط تقدم من ثلاث خطوات والباقة المختارة وملخص شراء حي، فيعرف المعتمر دائمًا ما يدفع مقابله.
- التقدم: الباقة، بيانات المعتمرين، الدفع
- بطاقة الباقة مع تفاصيل الفندق
- تفاصيل الشراء بجانب النموذج
بيانات المعتمرين
تجمع الخطوة الثانية بيانات كل معتمر في قائمة، وتعلّم كل بيان بأنه محفوظ وموثّق عند اكتماله.
- صف لكل معتمر
- حالة محفوظ وموثّق
- الخطوة الثانية مميزة في شريط التقدم
تفاصيل الباقة
صفحة باقة بالسعر في المقدمة، وتبويبات للفنادق والمواصلات والوصف، وإجراء لتنزيل البرنامج.
- السعر ظاهر قبل أي شيء
- تبويبات: الفنادق، المواصلات، الوصف
- إجراء تنزيل برنامج الرحلة
قرارات التصميم
التفكير وراء الخيارات
فخامة تحريرية
ذهبيات دافئة معدنية أمام طيف من الرماديات المعمارية: معرض لا قالب.
قاعدة اللا-خطوط
تُفصل الأقسام بتدرجات الأسطح بدل الحدود الرفيعة.
صوت سيريف وأداة سانس
Noto Serif للعناوين وManrope لنص الواجهة، بتباعد أسطر مريح.
تنقل زجاجي
تنقل عائم بشفافية 80% وتمويه 24px يسمح للذهبي بالتسرب بنعومة.
طبقات لونية بدل الظلال
بطاقة بيضاء على سطح أغمق قليلًا ترتفع دون ضجيج بصري.
حالات صادقة
الخدمات المتاحة والقادمة مميزة بوضوح، فلا تُستهلك الثقة على وعد.
العلامة
الألوان التي يتحدث بها التصميم
- #705837الأساسيالإجراءات والتركيز
- #8B704Eحاوية الأساسيشريك التدرج
- #FFF8F2السطحخلفية الصفحة
- #FCF2E7سطح منخفضالبطاقات والأقسام
- #343028سطح معكوسالتذييلات والمقاطع
ما سلّمته
- تصميم المنصة
- مساري الدخول والرمز
- مسار الحجز
- وثيقة نظام التصميم
- تخطيطات عربية وإنجليزية
دراسة الحالة التاليةRaviaCare: متجر جمال وعناية بالبشرة للخليجاعرض دراسة الحالة
