Nexelity تطبيق موبايل لحجز جلسات مع مدربين معتمدين (Trainer & Course Booking App)، والمطلوب كان إعادة تصميم كاملة له من هوية بصرية عامة وغير مميزة إلى نظام تصميم احترافي وموحّد، يغطي رحلة المستخدم كاملة من أول لمسة بالتطبيق لحد تأكيد الحجز والدفع.
المشكلة:
النسخة الأصلية كانت تعاني من: هوية بصرية عامة ما بتعكس منصة تدريب احترافية، مسار حجز طويل ومجزأ (اختيار المدرب والكورس وطريقة الدفع كأنها مهام منفصلة)، بروفايلات مدربين "مسطحة" ما بتبرز عوامل الثقة (التقييم، الخبرة، السعر)، ومكوّنات غير متسقة بالأشكال بين الشاشات.
طريقة التنفيذ:
تحديد المشكلة والأهداف: قارنت وضع "قبل" التصميم بأهداف واضحة لـ"بعد": نظام تصميم واحد، مسار حجز مبسّط بأقل خطوات ممكنة، بروفايل مدرب يبرز التقييم والتخصص والسعر مع بعض بنظرة واحدة، وهوية بصرية مميزة (أزرق كهربائي + كحلي غامق).
بناء نظام تصميم (Design System) متكامل:
لوحة ألوان بـ5 درجات لكل منها دور وظيفي محدد: Navy للخلفيات العميقة، Electric Blue كلون أساسي للأزرار والتفاعل، Warm Orange للأسعار والتقييمات، Success Green لحالات النجاح (تأكيد الحجز)، وFog كخلفية أساسية مريحة للعين.
نظام Typography مزدوج: خط Cairo بأوزان ثقيلة (700-900) للعناوين الكبيرة وأسماء المدربين، وخط Tajawal بأوزان خفيفة (400-500) للنصوص والفورمات لضمان القراءة الواضحة على الموبايل.
مكتبة مكوّنات أساسية جاهزة لإعادة الاستخدام: أزرار أساسية وثانوية، بطاقة سعر، حقل بحث، بطاقة مدرب (Trainer Card).
مقارنة قبل/بعد (Before & After): توثيق مباشر لشاشتين (قائمة المدربين، والكورسات) لإظهار الفرق الملموس بالتسلسل الهرمي والوضوح البصري بعد تطبيق النظام الجديد.
إعادة تصميم رحلة المستخدم كاملة عبر 4 مسارات (Journeys):
التسجيل والدخول: Splash Screen، Onboarding تعريفي، تسجيل دخول وإنشاء حساب، وتحقق OTP
الاستكشاف واختيار مدرب: الرئيسية، شبكة التخصصات، قائمة المدربين، بروفايل المدرب التفصيلي
الحجز والدفع: طرق الدفع، إضافة بطاقة، شاشة تأكيد الحجز
الحساب والتفاعل المستمر: الملف الشخصي، الإشعارات
الأدوات المستخدمة:
Figma (تصميم الواجهات، بناء نظام التصميم، والمكوّنات القابلة لإعادة الاستخدام)
النتيجة:
تجربة حجز أسرع وأوضح، وهوية بصرية موحّدة ومميزة عبر كل شاشات التطبيق، وبروفايلات مدربين تبني الثقة بالمستخدم من أول نظرة.