يونو ترافل: تصميم موقع حجوزات سفر لوكالة سويدية، من الطيران إلى العمرة

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

يونو ترافل وكالة سفر سويدية تأسّست عام 2015، مقرّها الرئيسي في مبنى المغادرة بمطار أرلاندا في ستوكهولم، ولها فرع في فوربرغ سنتروم وآخر في إسطنبول، وهي عضو في اتحاد النقل الجوي الدولي IATA. يحجز زبائنها أشياء مختلفة جداً، من رحلة طيران رخيصة إلى عمرة عائلية، لذلك صمّمت كنانيا موقعاً يضع كل الخدمات خلف بحث واحد. أُنجز تصميم موقع حجوزات سفر هذا على Adobe XD ونُفّذ بالتعاون مع BIGBANG IT Solutions، وهو منشور على unotravelsweden.com.

بالتعاون مع

unotravelsweden.com

كل صفحات تصميم يونو ترافل، مباشرة من ملف XD.

شاهد الشاشات الـ١٢

بحث واحد لكل أنواع الرحلات

تُفتح الصفحة الرئيسية على صورة بعرض الشاشة ولوحة بحث واحدة. تغطّي تبويباتها خدمات الوكالة، وهي الطيران والفنادق وتأجير السيارات والمشاوير والجولات ورحلات الهليكوبتر، ويغيّر كل تبويب الحقول التي تحته: الوجهة والتواريخ للفنادق، ونقطة الانطلاق والوصول للمشوار. وفي تبويب الفنادق تضمّ اللوحة حقلاً للوجهة، وتاريخَي الوصول والمغادرة يُختاران من تقويم، وزرّ «ابحث عن فنادق»، وخانة اختيار لمن لم يحدّد تواريخه بعد. ومن هذه اللوحة يبدأ الزائر الذي يعرف ما يريد، لذلك وُضعت فوق الطيّة، أي في الجزء الذي يظهر من الصفحة قبل أي تمرير، وتحتفظ بموضعها في كل تبويب.

وتحتها تعيد عشر بطاقات خدمات العرض بكلمات بسيطة: البحث عن رحلات الطيران، وحجز الفنادق، وطلب هليكوبتر، وتأجير سيارة، والجولات الدولية، وطلب مشوار، وخدمات المطار، وخدمات التأشيرات، والعمرة والحج، والدفع الإلكتروني. ولكل بطاقة أيقونة خطية وعنوان بلون الوكالة الأزرق، وتحمل بطاقة الهليكوبتر شارة صغيرة كُتب عليها «VIP».

الدليل قبل السعر

المسافر يدفع قبل أن يسافر، لذلك يعرض تصميم موقع حجوزات سفر يونو ترافل الدليل مبكراً. بعد الخدمات مباشرة يأتي صفّ بشركات الطيران التي تبيع يونو ترافل تذاكرها وكيلاً معتمداً، أي وكالة مخوّلة ببيع تذاكر الشركة مباشرة. ثم شريط بالعروض الحالية، وصفّ «لماذا يونو ترافل» بخمسة وعود وأيقوناتها، ولافتة لأحد الشركاء. وفي الأسفل تطبيق الوكالة، وآخر الأخبار بفلاتر للمدوّنة والفعاليات، والاشتراك في النشرة، وتقييمات Google، وصفّ من الريلز، ثم شركاء الدفع والحجز: Viva Wallet وKlarna وIATA، ومعها Sabre وAmadeus، وهما من أنظمة التوزيع العالمية التي تحجز بها الوكالات الطيران والفنادق.

الجولات، من شبكة المدن إلى الحجز

تعرض صفحة الجولات الدولية شريط العروض مرة أخرى وشبكة لمدن الوجهات بصورها، من برشلونة وباريس ولندن إلى مكة والمدينة وجدة، مع حقل بحث فوقها. وتُقرأ صفحة الجولة كنموذج حجز: نبذة بمحطّات الرحلة، وعدد المسافرين، والتاريخ، والاختيار بين نقطة لقاء واستلام من العنوان برسوم إضافية، وإجمالي يليه زر واحد هو «احجز الآن»، ثم أسئلة وأجوبة عمّا يشمله الحجز ونقطة الانطلاق وما ينتظر المسافر والمعلومات الإضافية وسياسة الإلغاء.

العمرة والتأشيرات

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

صفحة «من نحن» تجيب عن سؤال الثقة

الوكالة التي تقبض المدفوعات عبر الإنترنت تحتاج إلى أن تقول من هي، وهذا دور صفحة «من نحن» في تصميم موقع حجوزات سفر يونو ترافل. تذكر الصفحة تاريخ الشركة ومكاتبها وعضويتها في IATA بفقرات قصيرة تحت صورة عائلة في مطار، ويكرّر الفوتر أرقام التواصل لكل بلد تخدمه الوكالة.

شاشات حجز المشاوير

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

من يخدم تصميم موقع حجوزات سفر

لموقع وكالة السفر جمهوران في الوقت نفسه. بعض الزوّار يعرفون ما يريدون بالضبط، رحلة طيران في تاريخ محدّد، ويحتاجون إلى نموذج سريع. وآخرون ما زالوا يختارون بين الجولات والعروض والوجهات، ويريدون أن يتصفّحوا قبل أن يملؤوا أي نموذج. وعلى تصميم موقع حجوزات سفر أن يخدم الجمهورين في الصفحة نفسها دون أن يعطّل أحدهما الآخر.

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

كيف تعمل لوحة البحث

تتبع لوحة البحث، وهي أول ما يلمسه الزائر في تصميم موقع حجوزات سفر يونو ترافل، قواعد ثابتة. التبويبات بالترتيب نفسه دائماً، والتبويب النشط مملوء بأحمر الشعار. ولكل حقل عنوان صغير داخل الصندوق فوق القيمة، فيبقى العنوان ظاهراً بعد الكتابة. وتُختار التواريخ من تقويم بدل كتابتها، وفي اللوحة زر واحد يحمل اسم الفعل الذي يبدؤه، مثل «ابحث عن فنادق». أما خانة المسافرين الذين لم يحدّدوا تواريخهم فتُبقي الزائر المرن داخل البحث.

صفحات داخلية من القطع نفسها

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

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

صفحة الجولة عن قرب

تُفتح صفحة الجولة على شريط صور عريض بنقاط للتنقّل، وتحته اسم الجولة بخط أزرق عريض وقلب لحفظها. وعلى اليسار نبذة تشرح المكان ومحطّات الرحلة، وعلى اليمين أدوات الحجز: عدّاد للمسافرين بزرّي زائد وناقص، وتحته سطر أحمر صغير يذكّر بالحدّ الأقصى لعددهم، ثم تقويم لاختيار تاريخ الحجز يظهر فيه التاريخ المختار بالأحمر. وبعد ذلك يختار المسافر بين نقطة اللقاء والاستلام من العنوان، فيرى الإجمالي قبل زر «احجز الآن».

العمرة والتأشيرات والجولات الدولية عن قرب

تُفتح صفحة العمرة على شريط صور يجمع جواز سفر وصورة للحرم، ثم عنوان «Get Umrah Visa With Uno Travel» وفقرة تعريفية قصيرة، ثم الباقات في عمودين من البطاقات. ولكل بطاقة صورة للكعبة، وسعر بالأزرق، وزر «عرض الجولة»، وقلب للحفظ. وتبدأ صفحة التأشيرات بصورة لجوازات سفر ملوّنة فوق خريطة، ثم فقرة تشرح أن الخدمة تُعدّ وفق متطلبات كل بلد يسافر إليه الزبون. أما في صفحة الجولات الدولية فتأتي بطاقات العروض بتصاميمها الملوّنة، وتبقى شبكة المدن هادئة تحتها: صورة لكل مدينة واسمها بالأزرق، في صفوف منتظمة، مع حقل للبحث عن الجولات في أعلى القسم.

زائران وطريقان في الموقع

لنأخذ عائلة تخطّط لعمرة. ترى لوحة البحث لكنها لم تحدّد تواريخها بعد، فتنزل إلى بطاقات الخدمات وتضغط «العمرة والحج». تقرأ أولاً عن التأشيرة، ثم تقارن الباقات بصورها وأسعارها، وتفتح الأسئلة لتعرف التوقيت المناسب ونوع التأشيرة. تختار باقة وتفتحها، فتجد كتلة الحجز بعدد المسافرين والتاريخ والإجمالي. وقبل الدفع تستطيع أن تراجع شركاء الدفع وتقييمات Google في الرئيسية، ورقم التواصل الخاص ببلدها في الفوتر، فتحجز دون أن تحتاج إلى اتصال.

وزائر آخر يريد فندقاً. يختار تبويب الفنادق، ويكتب الوجهة، ويختار التاريخين من التقويم، ويضغط «ابحث عن فنادق» دون أن يغادر الشاشة الأولى.

الصفحة الرئيسية قسماً قسماً

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

الصور والألوان

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

الأخبار والنشرة

تستعمل الأخبار بطاقة واحدة فيها صورة، وشارة نوع (زرقاء للمدوّنة وحمراء للفعاليات)، وعنوان أزرق، وسطران من المقدّمة. وبفضل الشارة يميّز الزائر المقال من الفعالية قبل أن يقرأ العنوان. وفوق البطاقات فلاتر للكل والمدوّنات والفعاليات، وتحتها رابط «عرض الكل». أما النشرة فصندوق أزرق برسم ظرف وطائرة ورقية، فيه حقل للبريد وزر اشتراك، وتحتهما ملاحظتان قصيرتان توضّحان أن المشترك سيتلقّى الأخبار والعروض، وأن بياناته تُعامل وفق سياسة الخصوصية.

شاشات المشاوير عن قرب

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

من لوحات سطح المكتب إلى الهاتف

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

ما استلمه فريق التطوير

سُلّم تصميم موقع حجوزات سفر يونو ترافل إلى فريق التطوير ملفاً على Adobe XD بالصفحات الكاملة: الرئيسية، ومن نحن، والتواصل، والشروط، والجولات الدولية، وتفاصيل الجولة، والعمرة، والتأشيرات، مع نافذتي تسجيل الدخول والجولات المتاحة وشاشات تطبيق المشاوير. وتتكرّر المكوّنات نفسها في الصفحات كلها، من بطاقة الخدمة إلى كتلة الحجز والفوتر، فأمكن لفريق BIGBANG IT Solutions أن يبني مكتبة مكوّنات واحدة للموقع كله، وأن يركّب الصفحات الجديدة من قطع موجودة.

اللغات والأسواق

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

سرعة الصفحات

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

نطاق العمل

• تصميم موقع حجوزات سفر على Adobe XD: الرئيسية ومن نحن والتواصل والشروط والجولات وتفاصيل الجولة والعمرة والتأشيرات
• بحث بتبويبات للطيران والفنادق والسيارات والمشاوير والجولات والهليكوبتر
• بطاقات الخدمات وشركاء الطيران والعروض والأخبار والتقييمات والريلز في الرئيسية
• نموذج حجز للجولات بعدد المسافرين والتاريخ والاستلام والإجمالي
• صفحات باقات العمرة وطلب التأشيرات مع الأسئلة الشائعة
• نوافذ تسجيل الدخول والجولات المتاحة
• شاشات حجز المشاوير لتطبيق الوكالة
• التنفيذ والاستضافة بالشراكة مع BIGBANG IT Solutions

مشاريع وخدمات ذات صلة

• برمجة المواقع والتطبيقات، من التصميم إلى موقع منشور
• تجربة المستخدم والمنتجات الرقمية، بحث ومسارات وواجهات
• تصميم مواقع في سوريا، مواقع بلغتين بالتعاون مع BIGBANG

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

أسئلة عن تصميم موقع حجوزات سفر