إعادة تصميم منصة أوتيتشر: الموقع واختيار المعلّم واللوحات

01السياق

من استراتيجية إلى منتج يستخدمه الناس

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

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

02المشكلة

أين أخطأ الموقع القديم

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

وفي فبراير 2023 شملت مراجعة سينا لموقع oteacher.org القديم 69 شاشة، فُحصت واحدة واحدة، وصُنّفت فيها كل مشكلة: بصرية، أو في البنية، أو في المنتج، أو في النص. وأبرز المشكلات:

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

تقع معظم هذه المشكلات في لحظتين: اختيار المعلّم وحجز الحصة. ومن هناك تبدأ القرارات أدناه.

كيف سار العمل في 2023

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

03البنية

البنية قبل الشاشات

رُسمت بنية المعلومات لأربعة أقسام: الموقع، ولوحة المتعلّم، ولوحة المعلّم، ولوحة الإدارة. ويمنح مدير الأدوار الفريق ثلاثة مستويات من الصلاحيات، لأدوار تمتد من الإدارة العليا والمسؤولين إلى الدعم والتشغيل والمالية.

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

ورُسمت الرحلات الرئيسية في صورة مسارات:

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

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

04القرارات الرئيسية

خمسة قرارات وراء التصميم

كل قرار يجيب عن مشكلة كشفتها المراجعة أو المقابلات، وتعرضها الفصول التالية على الشاشة.

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

05اختيار المعلّم

ثلاثة أسئلة قبل قائمة المعلّمين

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

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

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

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

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

06الحجز

تصفّح بحرية، واحجز في صفحات خاصة

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

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

طلب الحساب في لحظة الحجز فقط يُبقي الزيارة الأولى مفتوحة.

أوتيتشر على سطح المكتب — العثور على معلّم: دعوة للحجز: سجّل أولًا ثم احجز

أوتيتشر على سطح المكتب — الحجز: الحجز: الفاتورة والدفع

07التقويم

تقويم بثماني قصص

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

تمتد الحالات نفسها عبر تقويم المعلّم الخاص، والتقويم الذي يراه المتعلّم في ملف المعلّم، وخطوات الحجز، وتُعرض المنطقة الزمنية دائمًا.

القصص الثماني، مترجمة من الفارسية:

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

سبع حالات في ثماني قصص: كان على التقويم أن يبيّن من يملك كل ساعة، المعلّم أم متعلّم أم دورة.

أوتيتشر على سطح المكتب — إعدادات المعلّم: التقويم: اختيار أوقات متاحة

أوتيتشر على سطح المكتب — العثور على معلّم: ملف المعلّم: تقويم لاختيار موعد

ثماني قصص مستخدم لتقويم المعلّم، لكل منها الحالات التي يمر بها موعد الحصة — شكل 05قصص المستخدم الثماني كما رُسمت، بالفارسية، لكل منها الحالة التي تضيفها.

08المعلّمون

يتقدّم المعلّمون على خطوات، ثم يديرون حصصهم بأنفسهم

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

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

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

أوتيتشر على سطح المكتب — تسجيل المعلّم: تسجيل المعلّم: انتظار المقابلة

أوتيتشر على سطح المكتب — إعدادات المعلّم: التسعير: سعر الدرس والباقة

09نظام التصميم

نظام تصميم واحد لكل الواجهات

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

وقد جاء قبل معظم الصفحات، ولهذا تبدو صفحات التسجيل وخطوات الحجز واللوحات منتجًا واحدًا.

لوحة من نظام تصميم أوتيتشر — نظام التصميم: الألوان

لوحة من نظام تصميم أوتيتشر — نظام التصميم: الأزرار

10التكرار

خمس أفكار، ثم جولتان من المسودات

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

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

تنقل نسخ العنوان الثلاث التركيز من المعلّم إلى حاجة المتعلّم.

شاشة تصوّر لأوتيتشر — تصوّرات اللوحة: تصوّر اللوحة 1.1، القائمة الجانبية مفتوحة

شاشة تصوّر لأوتيتشر — تصوّرات اللوحة: تصوّر اللوحة 2.1، القائمة الجانبية مفتوحة

مقدمة الصفحة الرئيسية، النسخة الأولى: عنوان عن تعلّم لغة أجنبية دائمًا وفي كل مكان مع معلّم تحبه

مقدمة الصفحة الرئيسية، النسخة الثانية: عنوان عن حصة مع أي معلّم تختاره

تسجيل المعلّم، الخطوة الأولى، في المسودة الأولى: صورة حاسوب محمول على اليسار واختيار الفئة العمرية على اليمين

تسجيل المعلّم، الخطوة الأولى، في النسخة النهائية: رسم لشخصين على اليسار واختيار الفئة العمرية على اليمين

صفحة تسجيل الدخول في المسودة الأولى: صورة حاسوب محمول مع سطر مؤقت يقول إن الإعلانات ستُكتب هنا

صفحة تسجيل الدخول في النسخة النهائية: التخطيط نفسه، مع وعد حقيقي تحت الصورة

11الاختبار

كيف اختُبر التصميم

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

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

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

12اللوحات

لوحة للمتعلّمين، ولوحة إدارة للفريق

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

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

أوتيتشر على سطح المكتب — لوحة المستخدم: الحصص: القادمة، مع تغطية بيانات شخصية من العيّنة

أوتيتشر على سطح المكتب — لوحة المستخدم: المحفظة: الرصيد والمعاملات

مجالات الإدارة وما يضمّه كل منها

01
قائمة المستخدمين
- البحث والتصفية
- الاسم
- الدور
- تقارير الحصص
- تقارير الدفع
- المراسلة
- اسم المستخدم
- إعادة تعيين كلمة المرور
- تفعيل الأدوار أو تعطيلها
- تعديل المعلومات
02
مدير الخصومات
- إنشاء خصم
- قائمة الخصومات
- المبلغ
- حصة المعلّم
- حصة أوتيتشر
- الحالة

13النتائج

أُطلق، وما زال الأساس

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

مكوّنًا في نظام التصميم: 345; 24 مجموعة: الألوان، والخطوط، والنماذج، والأزرار، والقوائم، والنوافذ المنبثقة، والوضعان الفاتح والداكن; مخرج مُسلَّم
شاشة بعرض سطح المكتب والهاتف: 220; 125 صفحة لسطح المكتب و95 شاشة للهاتف، ولكل منها رسم بعرض الجهاز اللوحي أيضًا; مخرج مُسلَّم
شاشة من الموقع القديم خضعت للمراجعة: 69; صُنّفت كل مشكلة: بصرية، أو في البنية، أو في المنتج، أو في النص، في فبراير 2023; مخرج مُسلَّم

ما تم تسليمه

الموقع الجديد
اللوحة الجديدة

14دوري

دور سينا

التصميم كلّه من عمل سينا في دور تصميم المنتج، بالعمل مع مدير المنتج.

مسؤوليتي

مراجعة الموقع القديم، والمقارنة المرجعية، وخطة تتبّع النقرات
بنية المعلومات، وأدوار المستخدمين، والمسارات
الصفحة الرئيسية، وأداة اختيار المعلّم من ثلاث خطوات، وصفحات المعلّم والدورة
الحجز، بما فيه الحصة التجريبية
تسجيل المعلّم وتسجيل الدخول
لوحة المستخدم، وإعدادات المعلّم، ومدير الدورات
التقويم وقصص المستخدم الخاصة به
لوحة الإدارة
نظام التصميم والتصوّرات
اختبار قابلية الاستخدام والخرائط الحرارية للانتباه

مسؤولية مشتركة

الاستراتيجية الكامنة وراء هذا التصميم، مع مدير المنتج: المقابلات والشخصيات ومكانة العلامة وخارطة الطريق

تعاون

مدير المنتج، طوال العملية، بما في ذلك مواصفات عمليات السحب والتسعير

15ما تعلّمته

ما سأحتفظ به، وما سأغيّره

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

16كل شاشة

كل الشاشات الـ220، والتصوّرات، ونظام التصميم

يضم الفهرسان أدناه كل صفحة وحالة بعرض سطح المكتب (1,440 بكسل) وعرض الهاتف (360 نقطة): 125 صفحة و95 شاشة. وحيث رُسمت الصفحة مرتين تُعرض النسخة النهائية فقط، ويُستبعد عرض الجهاز اللوحي الذي رُسمت به كل صفحة أيضًا. وتليهما 36 شاشة تصوّر ولوحات نظام التصميم السبع عشرة.

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

أوتيتشر على سطح المكتب — العثور على معلّم: الصفحة الرئيسية

أوتيتشر على سطح المكتب — العثور على معلّم: قائمة الحصص: أفضل المعلّمين لك

أوتيتشر على الهاتف — العثور على معلّم: الصفحة الرئيسية مع أداة اختيار المعلّم من ثلاث خطوات

أوتيتشر على الهاتف — العثور على معلّم: قائمة المعلّمين

شاشة تصوّر لأوتيتشر — تصوّرات اللوحة: تصوّر اللوحة 1.1، القائمة الجانبية مغلقة

لوحة من نظام تصميم أوتيتشر — نظام التصميم: الخطوط

اللغة

إعادة تصميم المنصة — الموقع واختيار المعلّم واللوحات