Sales Ninja Academy
منصة تدريب مبيعات بمكالمات تدريبية بالذكاء الاصطناعي، بالعربية والإنجليزية
Sales Ninja Academy منصة رقمية لتدريب فرق المبيعات وتطويرها. تجمع المنصة التدريب العملي والمحاكاة المدعومة بالذكاء الاصطناعي، وتساعد الأفراد والشركات على تطوير مهارات البيع وقياس الأداء والاستعداد لمواقف البيع الحقيقية.
- العميل
- Sales Ninja Academy
- المجال
- تدريب المبيعات وتقنيات التعليم
- نوع المشروع
- منصة تدريب وموقع إلكتروني
- دورنا
- تصميم UX/UI وتطوير كامل
- المدة
- ثلاثة أشهر
الهدف
حضور رقمي يقدم Sales Ninja كمنصة حديثة لتدريب المبيعات، ويحوّل عرض الخدمات التدريبية من محتوى تقليدي إلى تجربة تفاعلية توضح قيمة التدريب العملي والمحاكاة بالذكاء الاصطناعي. كان على الموقع أيضاً أن يسهّل فهم المنهجية والمسارات التدريبية، ويبني الثقة في الأكاديمية، ويوجّه الأفراد والشركات بوضوح نحو بدء التدريب أو التواصل مع الفريق.
التحدي
تقدم Sales Ninja أكثر من دورات تدريبية: تدريب عملي، ومحاكاة مدعومة بالذكاء الاصطناعي، ومسارات متعددة، وقياس للأداء، وحلول للأفراد والشركات. كان المطلوب شرح ذلك كله، مع المنهجية والدورات والأسعار، بسرعة ودون مطالبة المستخدم بقراءة محتوى طويل، ودون أن يتحول الموقع إلى تجربة تعليمية مزدحمة أو تقليدية. كان على التجربة أيضاً أن تفصل بين التعريف بالعلامة وبناء الثقة وشرح المنهجية واستكشاف التدريب واتخاذ قرار الاشتراك أو التواصل، مع توازن بين شخصية العلامة الجريئة والوضوح الذي يتطلبه قرار تدريبي أو تجاري.
الحل
صممنا التجربة كرحلة قرار. تبدأ بتعريف قيمة Sales Ninja، ثم تبني الثقة عبر الخبرة والشركاء، وتشرح منهجية التدريب والمسارات، ثم تنتقل إلى الدورات وآراء العملاء والفريق والباقات والأسئلة الشائعة. بصرياً، طورنا لغة حديثة وجريئة تجمع هوية النينجا وألوان العلامة والعناصر التفاعلية والحركة دون أن تؤثر في سهولة الاستخدام. يعمل الموقع العام ومنصة التدريب من قاعدة شيفرة واحدة، بالعربية (من اليمين إلى اليسار) والإنجليزية.
كيف نفّذنا العمل
- 01
تصميم UX/UI
بنينا التجربة كرحلة قرار: فهم القيمة، ثم بناء الثقة، ثم استكشاف المنهجية والمسارات ومقارنة الخيارات، ثم بدء التدريب أو التواصل.
- 02
تصميم التجربة التفاعلية
استخدمنا الكشف التدريجي وحالات التمرير والانتقالات السلسة لتوجيه المستخدم وإضافة طاقة تعكس شخصية Sales Ninja، دون أن تصبح الحركة عنصراً مشتتاً.
- 03
تطوير الواجهة الأمامية
بنينا واجهة متجاوبة للحاسوب والجهاز اللوحي والجوال. في الجوال أعدنا ترتيب الأولويات والمحتوى، مع نصوص سهلة القراءة ومساحات لمس مناسبة وزر إجراء يظهر في اللحظات المهمة.
- 04
إدارة المحتوى وتهيئة البحث
ربطنا الموقع بنظام لإدارة المحتوى وهيأناه لمحركات البحث.
الشاشات الأساسية
قرارات التصميم
صفحة مبنية حول الرحلة
بنينا الصفحة حول رحلة المستخدم، ولم نقسمها إلى مجموعة خدمات منفصلة.
النينجا لغة بصرية
حوّلنا مفهوم النينجا إلى لغة بصرية وتفاعلية، دون أن تتحول التجربة إلى تصميم ترفيهي مبالغ فيه.
أزرار إجراء في سياقها
تتكرر نقاط التحويل في سياقها بعد كل مرحلة من مراحل القرار، ولا يعتمد الموقع على زر إجراء واحد في أعلى الصفحة.
هيكلة المعلومات
أعدنا تنظيم المحتوى في رحلة تبدأ بالقيمة الأساسية، ثم الثقة والتدريب والمسارات والنتائج والباقات، وتنتهي بالتحويل.
تسلسل المحتوى
قسمنا المحتوى الكثيف إلى أقسام واضحة وعناوين قوية ونقاط سريعة، ليفهم المستخدم المنتج بنظرة سريعة قبل القراءة التفصيلية.
سرد تفاعلي
استخدمنا الحركة والتفاعل لشرح القيمة وإضافة إحساس بالتقدم والاستكشاف، ولم نعتمد على صفحات ثابتة طويلة.
الهوية البصرية
- الطابع
- جريء وحديث وتقني، حيوي ومهني وتفاعلي. تباين قوي بين الكحلي العميق والأخضر المائي الفاتح، مع خطوط جريئة ومساحات واسعة وعناصر مستوحاة من هوية النينجا.
- الخطوط
- Inter للإنجليزية، و29LT Kaff للعربية
- الصور
- صور ومشاهد من عالم المبيعات والتدريب والتفاعل البشري، تدعمها عناصر رقمية تعكس دور الذكاء الاصطناعي. التكوينات نظيفة وتركز على الأشخاص أو الموقف الأساسي، مع رسوم مرتبطة بالهوية وأشكال تجريدية وأيقونات مخصصة وعناصر واجهة تفاعلية.
- الحركة
- حركة سريعة ومحسوبة تعكس شخصية النينجا وطاقة المبيعات. انتقالات سلسة وكشف تدريجي وحالات تمرير وتفاعلات دقيقة توجه الانتباه وتضيف إحساساً بالتقدم دون إبطاء المستخدم.
الجانب التقني
التقنيات
- Next.js 16
- React 19
- PostgreSQL
- Supabase
- Prisma
- Supabase Auth
- Tailwind CSS
- GSAP
- Framer Motion
- Python
- Vercel
التكاملات
- Stripe
- Vapi
- LiveKit
- HeyGen LiveAvatar
- Deepgram
- Cartesia
- OpenRouter
- Nodemailer
- Cloudinary
- Supabase Storage
التحدي التقني
قلب المنتج محادثة بيع صوتية مباشرة مع مشترٍ افتراضي يتحدث العربية السعودية وله وجه، ولا تبدو تدريباً حقيقياً إلا إذا ردّ المشتري بسرعة. كانت النسخة الأولى تستغرق نحو 4.5 ثانية للرد بالعربية، فأُعيد بناء مسار المكالمة: اختُبر مزودو تحويل الكلام جنباً إلى جنب لاختيار أفضل تعرّف على الكلام العربي، وصار صوت الذكاء الاصطناعي يُبث مباشرة إلى الشخصية المرئية فتتحرك شفتاها أثناء الكلام. انخفض زمن الرد إلى ما بين ثانيتين و2.5 ثانية تقريباً، وعند نهاية المكالمة يراجع الذكاء الاصطناعي المحادثة وفق معايير يحددها المدرب، ويعطي درجة من 100 وملاحظات على كل مهارة و3 نقاط قوة و3 نقاط للتحسين.
الأداء والجودة
انخفض زمن الاستجابة الأولى للصفحة الرئيسية من نحو 730 ميلي ثانية إلى نحو 170 ميلي ثانية لأن الصفحة صارت تُبنى مسبقاً، ووفّر وضع الخوادم بجوار قاعدة البيانات نحو 600 ميلي ثانية في كل طلب لقاعدة البيانات. حُذف 63 ميغابايت من الصور، وتُعرض الصور بصيغة AVIF أو WebP. تضم المنصة 87 نموذج بيانات و186 نقطة API و169 صفحة، مع صلاحيات حسب الدور ومساحة مستقلة لكل شركة، وتعمل دون خوادم ثابتة فتتوسع تلقائياً مع الزيارات.
ما الذي تغيّر
عرض أوضح
صار عرض Sales Ninja أوضح في بيان القيمة الأساسية للمنصة ودور الذكاء الاصطناعي في التدريب.
تجربة واحدة لثلاث فئات
يخاطب الموقع الأفراد وفرق المبيعات والشركات في تجربة واحدة دون أن يفقد وضوح المحتوى.
رحلة مستخدم مترابطة
تربط الرحلة بين اكتشاف المنصة وفهم المنهجية واستكشاف التدريب ثم اتخاذ الإجراء.
هوية بصرية موحدة
توحدت الهوية البصرية في المحتوى والخدمات والدورات والباقات ضمن نظام واحد متماسك.
سرد واضح
تروي الصفحة قصة واحدة واضحة، من قيمة المنصة إلى المنهجية والمسارات ثم الخطوة التالية.
تجربة حديثة موجهة للتحويل
تجربة حديثة مصممة لتنقل المستخدم من اكتشاف المنصة إلى بدء التدريب أو التواصل مع الفريق.
تسلسل بصري قوي
تباين قوي بين الكحلي العميق والأخضر المائي الفاتح، مع خطوط جريئة ومساحات واسعة، يجعل التجربة مميزة من أول شاشة.
ما سلّمناه
- تصميم UX/UI
- موقع متجاوب للحاسوب والجهاز اللوحي والجوال
- تجربة تفاعلية للصفحة الرئيسية
- نظام تصميم ومكونات قابلة لإعادة الاستخدام
- تطوير الموقع
عندك مشروع يشبه هذا؟
أرسل لنا ما تحتاجه، ويصلك عرض سعر مفصّل خلال 24 ساعة: نطاق العمل والتكلفة والمدة.
اطلب عرض سعر
