تصميم تجربة المستخدم والواجهة لتطبيق SkillNest للتعلّم
صمّمنا تطبيق SkillNest من البحث حتى الواجهة النهائية: تطبيق تعلّم على الجوال يخدم جمهورين معاً — أفراداً يشتركون شهرياً أو يشترون دورة منفردة، وموظفي شركات يحصلون على خصم الشراكة ببريدهم المهني أو برمز من شركتهم.
تطبيق تعلّم واحد صُمّم لمستخدمَين مختلفَين تماماً
تطبيق SkillNest يقدّم دورات إلكترونية لتعلّم المهارات المهنية والإبداعية على الجوال، ويخدم نوعين من المتعلّمين: أفراداً يشتركون شهرياً أو يشترون دورة واحدة في كل مرة، وموظفي شركات شريكة يتعلّمون بخصم. صمّمنا التجربة من البحث حتى الواجهة النهائية حول هدف واحد: أن يصل كلٌّ منهما من الشاشة الأولى إلى أول درس بأقل قدر من العوائق.
- الدور
- بحث، تجربة مستخدم، وواجهة
- القطاع
- التعليم الإلكتروني
- المنصّة
- تطبيق جوال
- المستخدمون
- أفراد وفرق الشركات
التحدي: جمهوران في تطبيق واحد
أغلب تطبيقات التعلّم مبنية حول مشترٍ واحد. أما SkillNest فكان عليه أن يخدم اثنين في الوقت نفسه: فرداً يدفع من ماله، يريد سعراً واضحاً وطريقة بسيطة للبدء، وموظفاً عقدت شركته شراكة مع المنصّة، يريد الخصم المستحقّ له دون أن يلاحق أحداً للحصول عليه. والتصميم لأحدهما وحده يعني خسارة الآخر.
البحث: ما الذي تتركه المنصّات الكبرى
راجعنا Udemy وCoursera وSkillshare وLinkedIn Learning، وأجرينا جلسات أسئلة وأجوبة مع أشخاص واجهوا هذه الصعوبات أثناء العمل من المنزل. تكرّر النمط نفسه: المنصّات تبيع إما بالدورة أو بالاشتراك، ولا تجمع أيٌّ منها بين الاثنين مع خصم ترعاه الشركة. وخطط الشركات مثل Coursera for Business مصمّمة للمؤسسات الكبيرة، وخطوات التسجيل والدفع طويلة ومعقّدة في الغالب، ولا سيما على المستخدم الجديد.
عمر وسارة: مستخدمان واحتياجان
شخصيتان حكمتا قرارات التصميم. عمر، 26 عاماً، مصمّم جرافيك يدفع من ماله: يريد تعلّم مهارات تصميم جديدة بسرعة وبتكلفة معقولة، وتُنفّره خطوات التسجيل المعقّدة والأسعار المرتفعة والخطط غير الواضحة. وسارة، 30 عاماً، أخصائية تسويق ترتبط شركتها بشراكة مع المنصّة: تريد الاستفادة من خصم الشراكة للوصول إلى الدورات المميّزة، ويعطّلها التحقّق المعقّد والإجراءات اليدوية. كان على كل شاشة أن تعمل لكليهما.
خصم يُطبَّق دون أن يُطلب
الفكرة التي قام عليها التصميم: ألّا يمرّ الموظف بإجراء يدوي ليحصل على خصم رتّبته شركته مسبقاً. صُمّم التطبيق ليتعرّف على نطاق البريد المهني للشركة الشريكة، أو ليقبل رمزاً تصدره الشركة، فيُطبّق الخصم دون أن يعتمده أحد يدوياً. تحصل الشركات على وسيلة لتدريب موظفيها بلا عبء إداري إضافي، ويصل الموظف إلى الدورة مباشرة.
الهيكل قبل اللون
قبل أي تصميم بصري، حدّدنا المسارات الخمسة التي يقوم عليها التطبيق: ترحيب قصير يمكن تخطّيه، وتسجيل الدخول وإنشاء الحساب، والشاشة الرئيسية، والدفع والاشتراك وصولاً إلى شاشة تأكيد، وملف شخصي يعرض بيانات المستخدم وحالة اشتراكه. ثم رُسمت كل شاشة رئيسية هيكلاً رمادياً أولاً، فحُسمت قرارات الترتيب والأولويات قبل أن يشتّت اللون الانتباه عنها.
نظام بصري قابل للتوسّع
تقوم الواجهة على أساس موثّق: نظام ألوان يضمّ بنفسجياً أساسياً ولوناً وردياً مساعداً وتدرّجاً بينهما، ومجموعة ألوان محايدة، وألواناً مخصّصة لحالات النجاح والتنبيه والخطأ — إلى جانب سلّم للخطوط ومكتبة مكوّنات تشمل الأزرار وحقول الإدخال وبطاقات الدورات بأشرطة التقدّم وشريط التنقّل السفلي وخطوات الدفع. واختير البنفسجي لما يوحي به في منتج تعليمي: الإبداع والإلهام والتقدّم.
من الشاشة الأولى إلى أول درس
ترافق الواجهة النهائية المتعلّم من البداية إلى النهاية: ترحيب من ثلاث شاشات يمكن تخطّيه، وتسجيل دخول بالبريد الإلكتروني أو بحساب Google، وشاشة رئيسية تبدأ بالدورة الجارية ونسبة إنجازها. وتجمع صفحة كل دورة بين مشغّل الفيديو وقائمة الدروس والوصف، ويدعم الدفع البطاقات المحفوظة وينتهي بشاشة تأكيد مع إيصال بصيغة PDF، ويضمّ الملف الشخصي رمز الشركة وحالة الاشتراك في مكان واحد. وتوضّح خريطة كاملة لتدفّق المستخدم كيف تتّصل كل شاشة بما يليها.
