تصميم وتطوير موقع "أرسل" بتجربة بصرية احترافية وحركات تفاعلية متقدمة

السلام عليكم،

أبحث عن متخصص يجمع بين تصميم واجهات وتجربة المستخدم UI/UX، وتطوير الواجهات Front-end، وتصميم الحركات والتفاعلات Web Animation، لتنفيذ الموقع التعريفي والتسويقي لمنصة «أرسل | شحنك في مكان واحد» بمستوى احترافي مرتفع.

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

نبذة عن أرسل

أرسل بوابة شحن للمتاجر والشركات داخل السعودية، تجمع خيارات شركات الشحن، وتسهّل اختيار الخدمة وإصدار البوليصات ومتابعة الشحنات من مكان واحد.

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

المرجع البصري المطلوب دراسته

[https://signup.tabayu.com]

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

يرجى تصفح المرجع كاملًا وتجربة عناصره التفاعلية قبل تقديم العرض؛ فالطلب يشمل التفاصيل الموجودة داخل الأقسام وطريقة حركتها واستجابتها للمستخدم.

نطاق العمل المطلوب

1. دراسة المنصة وتنظيم تجربة الموقع

- فهم خدمات أرسل والجمهور المستهدف، وتحديد المعلومات التي يحتاجها الزائر قبل التسجيل.

- إعداد هيكل واضح للصفحة الرئيسية ومسار تصفح يقود إلى فهم الخدمة واتخاذ الإجراء المناسب.

- اقتراح الصفحات الداخلية المساندة، وتحديد عددها ونطاقها قبل بدء التنفيذ.

- تنظيم المحتوى وتحسين صياغة العناوين والنصوص والأزرار بالتنسيق معي.

- الالتزام بالخدمات والأسعار والتغطيات المعتمدة، وعدم تقديم مزايا غير جاهزة على أنها متاحة.

2. تصميم بصري متكامل

- تصميم عربي احترافي باتجاه RTL، مع ضبط الخطوط والمحاذاة والأرقام.

- الالتزام بهوية أرسل، واقتراح تطوير المعالجة البصرية بما يناسب طبيعة المشروع.

- تصميم متجاوب للحاسوب والجوال والأجهزة اللوحية، بالنمطين النهاري والليلي.

- إعداد مكونات قابلة لإعادة الاستخدام، تشمل الأزرار والبطاقات والنوافذ والحقول وحالاتها المختلفة.

- تصميم الصفحات الداخلية المتفق عليها بنفس المستوى والاتساق البصري.

3. تصميم المشاهد والحركات داخل الأقسام

أرغب في مشاهد مخصصة تشرح الخدمة بصريًا، ومن الأمثلة المطلوب تطويرها:

- Hero تفاعلي: يعرض رحلة الشحنة بين بيانات الطلب، واختيار الناقل، وإصدار البوليصة، مع بطاقات ومسارات متحركة.

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

- خطوات إصدار البوليصة: تسلسل مرئي يوضح إدخال البيانات، ومراجعة الخيارات، وظهور البوليصة.

- معاينة مباشرة: تجربة توضيحية تتغير فيها تفاصيل الشحنة بحسب الخيارات التي يحددها الزائر.

- المتابعة والمحفظة والتقارير: واجهات مصغّرة تعرض الفكرة ببيانات تجريبية واضحة.

- التغطية والشحن: مشهد مناسب للشحن داخل السعودية، مع مسارات وحالات متحركة دون الإيحاء بتغطيات غير معتمدة.

- إصدار عدة بوليصات: مشهد يوضح انتقال البيانات من ملف إلى جدول مراجعة ثم معاينات البوليصات.

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

المطلوب أن تكون الحركة هادفة ومتقنة، بتوقيت مدروس وانتقالات سلسة، وأن تعمل باللمس على الجوال، مع مراعاة الأداء وإمكانية تقليل الحركة.

4. تنفيذ الموقع وتجهيزه للتسليم

يشمل المشروع "التصميم والتنفيذ الفعلي للواجهة"، مع تشغيل الحركات والتفاعلات داخل نسخة يمكن تجربتها.

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

يمكن استخدام GSAP وSVG وCanvas أو التقنيات المناسبة لتحقيق النتيجة؛ اختيار الأدوات يكون بحسب احتياج المشهد وجودة التنفيذ.

المشاهد التفاعلية داخل الصفحة توضيحية ببيانات تجريبية. ويشمل الربط الأساسي روابط التسجيل والدخول والتواصل، بينما يُحدد أي ربط تشغيلي إضافي مسبقًا ضمن نطاق واضح.

المخرجات المطلوبة

- هيكل المحتوى وخريطة الصفحات المعتمدة.

- ملف Figma منظم وقابل للتعديل، يشمل المكونات وحالات التفاعل.

- نسخة عاملة للمراجعة على الحاسوب والجوال.

- الكود المصدري وملفات الرسومات والحركات والأصول المستخدمة.

- توثيق مختصر لطريقة التشغيل وتعديل المحتوى وتسليم المشروع للمطور.

- بيان بأي مكتبات أو أصول مدفوعة وتراخيصها وتكاليفها.

- معالجة الملاحظات المتفق عليها والتحقق من عمل الصفحات والتفاعلات قبل التسليم النهائي.

آلية العمل

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

سيكون تقييم الجودة بناءً على دقة التصميم، واتساق الهوية، وجودة العربية، وسلاسة الحركات، وسهولة الاستخدام على الجوال، وسرعة التحميل، وقابلية صيانة الكود.

يرجى تضمين الآتي في عرضك

- روابط مباشرة لأعمال حية مشابهة، خصوصًا مواقع SaaS أو المواقع التي تحتوي على مشاهد وواجهات متحركة.

- توضيح دورك الفعلي في كل نموذج: التصميم، التطوير، أو تنفيذ الحركة.

- تصورك الأولي لتكييف أفكار المرجع مع أرسل.

- التقنية المقترحة وسبب اختيارها.

- المدة والتكلفة موزعتين على مراحل واضحة.

- ما يشمله عرضك من صفحات وتفاعلات ومراجعات ودعم بعد التسليم، وأي تكاليف إضافية متوقعة.

الأولوية لجودة الأعمال السابقة، وفهم احتياج أرسل، والقدرة على تنفيذ التفاصيل البصرية والتفاعلية باحترافية.