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

الهدف
منصة ترفيهية غامرة تجمع عوالم علامات ملاهي في تجربة رقمية واحدة. يجد الزائر الوجهة المناسبة، ويتفاعل مع كل عالم عبر سرد تقوده الحركة، وينتقل بسهولة من الاستكشاف إلى حجز التذكرة.
التحدي
احتاجت ملاهي إلى توحيد عدة علامات ترفيهية، لكل منها عالمها البصري وجمهورها وشخصيتها، دون أن تبدو التجربة مفككة. لكل علامة ألوانها وشخصياتها وأجواؤها، وعلى الزائر مع ذلك أن يعرف أين هو وما الذي تقدمه كل تجربة وكيف يحجز. وكان على الموقع أن يبقى غامراً وغنياً بالحركة، وأن تبقى رحلة الحجز واضحة وسريعة وسهلة الإتمام.
الحل
بنينا تجربة واحدة متعددة العلامات، يحتفظ فيها كل عالم من عوالم ملاهي بشخصيته ولونه وسرده، ويشترك الجميع في نظام واحد لتجربة المستخدم. تربط الانتقالات الحركية العوالم الأربعة، وتنتظم رحلة الحجز في خطوات متدرجة وواضحة، فينتقل الزائر من الاستكشاف إلى الدفع دون أن يفقد السياق. يحجز الزائر من أكثر من علامة في سلة واحدة ويدفع مرة واحدة، ويدخل إلى حسابه برمز يصله على البريد الإلكتروني، ويحصل على تذكرة رقمية برمز QR يُقرأ عند الدخول. ويدير فريق ملاهي العلامات والفروع والأنشطة والباقات والعروض والفعاليات والمقالات وإعدادات محركات البحث، ويتابع الحجوزات وطلبات الشركات، من لوحة تحكم تضم 19 قسماً دون الحاجة إلى مطوّر.
كيف نفّذنا العمل
- 01
استراتيجية تجربة المستخدم
بنينا الرحلة على الاكتشاف أولاً ثم الحجز المنظم. يستكشف الزائر كل عالم بحرية قبل أن يدخل مسار حجز واضحاً ومتدرجاً.
- 02
هيكلة تجربة متعددة العلامات
تعاملنا مع كل علامة ترفيهية بوصفها عالماً بصرياً مستقلاً، ضمن هيكل واحد مشترك لمنظومة ملاهي.
- 03
واجهة تقودها الحركة
أساس بصري داكن يحمل ألوان العلامات الجريئة وخطوطاً كبيرة وصوراً سينمائية وبيئات تقودها الشخصيات. وتربط انتقالات الفيديو بملء الشاشة والسرد المرتبط بالتمرير العوالم الأربعة.
- 04
تجربة متجاوبة
كيّفنا التجربة مع الحاسوب والجهاز اللوحي والجوال، مع الحفاظ على الهوية البصرية لكل عالم وأولوية المحتوى ولغة الحركة ووضوح الحجز.
- 05
تصميم مسار الحجز
رتبنا الوجهة والفرع والتاريخ والوقت وعدد الضيوف وبيانات التواصل والدفع في خطوات متدرجة، مع بقاء ملخص الزيارة ظاهراً طوال المسار.
الشاشات الأساسية
قرارات التصميم
عالم لكل علامة
كل علامة ترفيهية عالم بصري قائم بذاته، ويجمع منظومة ملاهي هيكل واحد مشترك.
الحركة جزء من التجربة
انتقالات فيديو سينمائية ومشاهد متحركة وحركة تفاعلية تربط العوالم الأربعة، فيصبح الاستكشاف غامراً لا ساكناً.
رحلة حجز أبسط
قسمنا مسار الحجز إلى خطوات واضحة ومتدرجة. تبقى تفاصيل الزيارة أمام الزائر، فيعرف موضعه من اختيار الوجهة حتى الدفع.
منظومة واحدة وأربعة عوالم
تحتفظ كل علامة من علامات ملاهي بهويتها وشخصياتها وألوانها وأجوائها، وتشترك كلها في هيكل واحد متسق لتجربة المستخدم.
حركة لها غاية
انتقالات الفيديو والحركة والتفاعل تقود الزائر بين العوالم وتعمّق اندماجه في التجربة. وليست للتأثير البصري وحده.
الحجز يبقى بسيطاً
مهما ازدادت التجربة تعبيراً، يبقى الطريق إلى اختيار الوجهة وتحديد الوقت وإتمام الدفع واضحاً وسهل المتابعة.
تجربة واحدة على كل شاشة
الهوية البصرية
- الطابع
- جريء ومرح وغامر. حيوي وسينمائي ومعاصر ومعبّر، على أساس داكن مع لون قوي لكل علامة.
- الصور
- تصوير ترفيهي سينمائي وصور تقودها الشخصيات وبيئات ثلاثية الأبعاد خاصة بالعلامات ومشاهد سباق وعوالم ألعاب الأركيد وأنشطة عائلية ولقطات عالية الطاقة للتجارب. الطابع حيوي ومرح ونابض، بتباين قوي وإضاءة درامية وألوان جريئة وإحساس واضح بالحماس.
- الحركة
- انتقالات فيديو بملء الشاشة وتبدّل للمشاهد بين العوالم وأقنعة متحركة وحركة متفاوتة العمق وانتقالات بألوان العلامات تربط العوالم الأربعة، ويصبح التمرير في الصفحة الرئيسية جزءاً من السرد. تستجيب البطاقات والأزرار ومؤشرات التقدم وتفاعلات الحجز فوراً لما يفعله الزائر. الحركة معبّرة في مرحلة الاكتشاف، وأكثر انضباطاً ووظيفية في مرحلة الحجز.
الجانب التقني
التقنيات
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- GSAP
- Framer Motion
- Lenis
- Three.js
- PixiJS
- Rive
- Lottie
- Supabase (PostgreSQL)
- Vercel
التكاملات
- Moyasar
- Supabase
- Resend
- Vercel Blob
التحدي التقني
الصفحة الرئيسية رحلة سينمائية يتحكم فيها الزائر بالتمرير، وكان المشهد يتباطأ أو يتوقف على بعض الأجهزة، خصوصاً الحواسيب المحمولة العادية. صار الموقع يسأل كل جهاز عن صيغة الفيديو التي يشغّلها بسلاسة ويرسل إليه النسخة المناسبة، ويحتفظ في الذاكرة بالجزء القريب من موضع الزائر في المشهد فقط، فأصبحت الرحلة سلسة على الأجهزة الضعيفة والقوية. وفي السلة التي تضم أكثر من علامة، تُجمع الحجوزات كلها تحت طلب واحد، ويُعاد حساب الأسعار والخصومات على الخادم وقت الدفع، ويُراجع المبلغ المدفوع مرة أخرى قبل تأكيد الحجز.
الأداء والجودة
تُقدَّم النماذج ثلاثية الأبعاد والصور الكبيرة، وحجم النماذج نحو 90 ميغابايت، من شبكة توصيل المحتوى بمعزل عن الخادم حتى لا تُبطئ الموقع، وتعمل المؤثرات الثقيلة في الجزء الذي يراه الزائر من الصفحة فقط. لا يرى العميل إلا حجوزاته، وترفض قاعدة البيانات أي حجز بلا ضيوف أو لعلامة غير متاحة في الفرع المختار، وتحدّ نماذج الحجز والتواصل من الطلبات المتكررة لمنع الرسائل المزعجة. يعمل الموقع بالعربية والإنجليزية مع دعم كامل للاتجاه من اليمين إلى اليسار، وبوضعين فاتح وداكن، وفيه خريطة للموقع وبيانات منظمة للمقالات وإعدادات لمحركات البحث تُعدَّل من لوحة التحكم.
ما الذي تغيّر
تجربة موحدة متعددة العلامات
اجتمعت أربعة عوالم ترفيهية مختلفة تحت نظام رقمي واحد متسق، دون أن تفقد أي علامة شخصيتها.
رحلة أكثر اندماجاً للزائر
انتقالات الفيديو بملء الشاشة والحركة والسرد المبني على العوالم حوّلت الموقع من واجهة ساكنة إلى تجربة أقرب إلى الترفيه نفسه.
مسار حجز أوضح
انتظمت الوجهة والفرع والتاريخ والوقت وعدد الضيوف وبيانات التواصل والدفع في خطوات متدرجة يسهل اتباعها.
معلومات أوضح قبل الحجز
حالات التوفر وملخص الزيارة ووسائل الدفع وأزرار الإجراء في سياقها تعطي الزائر ما يحتاج إليه قبل إتمام الحجز.
تجربة مميزة متعددة العلامات
يتميز كل عالم من عوالم ملاهي بألوانه وشخصياته وبيئاته وطاقته، ويبقى جزءاً من منصة واحدة.
سرد تقوده الحركة
انتقالات الفيديو بملء الشاشة والحركة والتفاعل تجعل الموقع جزءاً من التجربة الترفيهية نفسها.
طريق واضح إلى الحجز
مسار حجز منظم وملخص ظاهر للزيارة وحالات التوفر وأزرار إجراء واضحة تسهّل الانتقال من الاستكشاف إلى الدفع.
ما سلّمناه
- واجهة موقع غامرة
- شاشات متجاوبة للحاسوب والجهاز اللوحي والجوال
- صفحات تجربة العلامات المتعددة
- توجيه الحركة والانتقالات
- تصميم مسار الحجز
- تجربة اختيار التذاكر وإتمام الدفع
- مكونات واجهة قابلة لإعادة الاستخدام
- نظام التصميم البصري
- ملفات تسليم جاهزة للمطورين
عندك مشروع يشبه هذا؟
أرسل لنا ما تحتاجه، ويصلك عرض سعر مفصّل خلال 24 ساعة: نطاق العمل والتكلفة والمدة.
اطلب عرض سعر










