دراسة حالة · تقنية تعليمية · تطبيق جوال

MyAUC

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

  • قائد تصميم UI/UX
  • يونيو 2022 – ديسمبر 2023
  • iOS · Android · OutSystems
  • 4 مطوّرين، ومختبِران، ومدير منتج، وأنا، مع فريق تجربة المستخدم في الجامعة
  • متاح على App Store · Google Play

نظرة سريعة

المشكلة
كان الطلاب وأعضاء هيئة التدريس والموظفون يتنقّلون بين منصات متفرقة لإنجاز مهامهم اليومية، وكان زوار الحرم الجامعي يجدون صعوبة في الوصول إلى وجهاتهم ومعرفة الجهة المناسبة للتواصل.
ما قمت به
قدت تصميم UI/UX مع فريق تجربة المستخدم في الجامعة عبر أكثر من 200 شاشة و11 وحدة، وبنيت المكوّنات والسمة البصرية على OutSystems.
النتيجة
متاح على iOS وAndroid بأكثر من 10 آلاف عملية تنزيل على Google Play. واختيرت الشاشة الرئيسية عبر اختبار A/B، اختار فيه 59% من 106 طلاب التصميم الفائز.
ثلاث شاشات من MyAUC: شاشة الترحيب بخيارات تسجيل الدخول، والشاشة الرئيسية باختصارات جهات الاتصال والصحة والحافلات، والتهيئة التي تسأل عن الخدمات التي تظهر في الشاشة الرئيسية.

الجدول الزمني للمشروع

  1. المشكلة والحلصياغة المشكلة واستراتيجية التصميميونيو–أغسطس 2022
  2. توليد الأفكارهيكلة المعلومات ومسارات المستخدميونيو–نوفمبر 2022
  3. الإطارات الشبكيةإطارات منخفضة وعالية الدقةسبتمبر–نوفمبر 2022
  4. تصميم الواجهة والنموذج الأوليالتصميم البصري والنموذج الأوليسبتمبر 2022 – مايو 2023
  5. البناء على OutSystemsمكوّنات الواجهة والسمة المخصّصةديسمبر 2022 – ديسمبر 2023
  6. الملاحظات والاختباراختبار A/B وتطبيق الملاحظاتمارس – ديسمبر 2023

المشكلة.

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

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

  • الطلاب

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

  • أعضاء هيئة التدريس والموظفون

    وجدوا صعوبة في إدارة المهام، والوصول إلى النماذج الإلكترونية، ومراجعة جداولهم، ومتابعة معلومات العمل مثل الإجازات والرواتب.

  • الزوار

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

الحل.

تطبيق جامعي واحد يجمع الموارد من كل المنصات، بتنقّل بسيط ووحدة لكل خدمة:

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

مراحل التصميم

  1. 01

    المشكلة والحل

    • صياغة المشكلة
    • استراتيجية التصميم
  2. 02

    توليد الأفكار والرسم

    • هيكلة المعلومات
    • مسار المستخدم
  3. 03

    الإطارات الشبكية

    • إطارات منخفضة الدقة
    • إطارات عالية الدقة
  4. 04

    تصميم الواجهة والنموذج الأولي

    • التصميم البصري
    • النموذج الأولي
  5. 05

    الملاحظات والاختبار

    • اختبار A/B
    • تطبيق الملاحظات
أسبوعًا
48+
شاشة
200+
وحدة
11

الأدوات المستخدمة

  • Figma
  • Adobe Illustrator
  • Miro
  • Google Docs
  • Google Sheets
  • Microsoft Teams
  • Jira
  • Slack

ماذا تعلّمنا.

  1. كان على تطبيق واحد أن يخدم أشخاصًا مختلفين جدًا. احتاج الطلاب وأعضاء هيئة التدريس والموظفون والزوار كلٌّ إلى مجموعة مختلفة من الخدمات، فلم يكن ممكنًا أن يعرض التطبيق الشيء نفسه للجميع.
  2. كان على الشاشة الرئيسية أن تكون شخصية. لا يحتاج الجميع إلى كل خدمة كل يوم، لذا كان يجب أن تكون الوحدات الأكثر استخدامًا لكل شخص في متناوله، والبقية على بُعد نقرة.
  3. كان على الشكل أن يكسب الناس. في اختبار A/B لثلاثة تصاميم للشاشة الرئيسية مع 106 طلاب، كان التصميم C المفضّل بوضوح (59.4%)، متقدمًا على B (38.7%) وA (1.9%).

رسم خريطة التطبيق.

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

  1. تثبيت التطبيق وفتحه
  2. تسجيل الدخول
  3. من أفراد الجامعة أم زائر؟
من أفراد الجامعة
  1. التهيئة
  2. اختيار الوحدات
  3. تخصيص الإجراءات
  4. إعادة ترتيب الوحدات
زائر
  1. إدخال الاسم والبريد الإلكتروني
  2. التحقق برمز لمرة واحدة
الشاشة الرئيسية
  • الملف الشخصي
  • الإشعارات
  • الإجراءات السريعة
  • جهات الاتصال
  • الحافلات
  • الطعام
  • النماذج
  • الشؤون الأكاديمية
  • التنقل
  • المكتبة
  • الصحة

الإطارات الشبكية.

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

ثلاثة إطارات شبكية رمادية لـMyAUC: شاشة تطلب الاسم ورقم الهاتف مع زر تأكيد الرقم، وملف عضو هيئة تدريس أو موظف برصيد الإجازات وموعد الراتب التالي والعُهد والغرامات، وقائمة إشعارات قابلة للبحث.

لكل خدمة لونها الخاص.

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

الأساسي

  • #0F385A
  • #1D6DAF
  • #50A0E2
  • #A8CFF0
  • #D3E7F8
  • #E9F3FB
  • #F6FAFE

الرماديات

  • #222222
  • #4D4D4D
  • #808080
  • #B3B3B3
  • #E6E6E6
  • #F2F2F2
  • #FFFFFF

ألوان الخدمات

  • جهات الاتصال#8DB938
  • الحافلات#FEC34E
  • الصحة#00A9A3
  • التنقل#0083AD
  • النماذج#AB218E
  • الطعام#F15B4E
  • المكتبة#E8CFA0

روح عمارة الجامعة.

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

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

الخطوط.

تستخدم الواجهة خطين، Roboto وCairo، لكلٍّ منهما الأوزان الخفيف والعادي والعريض.

Roboto

الخط

  • خفيفTell us what services you want to see on your home screen!
  • عاديTell us what services you want to see on your home screen!
  • عريضTell us what services you want to see on your home screen!

Cairo

الخط

  • خفيفأخبرنا بالخدمات التي تريد رؤيتها في شاشتك الرئيسية!
  • عاديأخبرنا بالخدمات التي تريد رؤيتها في شاشتك الرئيسية!
  • عريضأخبرنا بالخدمات التي تريد رؤيتها في شاشتك الرئيسية!

اختبار الشكل قبل بنائه.

أجرينا اختبار A/B مع 106 طلاب و26 موظفًا لمعرفة انطباعهم عن ثلاثة أشكال مختلفة للشاشة الرئيسية. وفضّلت المجموعتان التصميم الثالث، الذي طبّقناه مع تغييرات طفيفة في التخطيط تراعي قيود التطوير وسهولة الوصول.

ثلاثة تصاميم للشاشة الرئيسية، معنونة A وB وC، يعرض كلٌّ منها رصيد AUC Pay مع اختصارات لسجل المعاملات وإدارة المحفظة.
الطلاب106 مشاركًا
  • التصميم A1.9% (2)
  • التصميم B38.7% (41)
  • التصميم C59.4% (63)
الموظفون26 مشاركًا
  • التصميم A15.4% (4)
  • التصميم B38.5% (10)
  • التصميم C46.2% (12)
التجربة الأساسية

التهيئة

تطلب التهيئة من المستخدم اختيار الوحدات التي سيستخدمها بانتظام. ولكل وحدة أيضًا إجراءات سريعة ومعلومة يمكن أن تظهر في الشاشة الرئيسية، فيختارها المستخدم كذلك.

وإذا تخطّى المستخدم التهيئة، تظهر كل الوحدات في الشاشة الرئيسية بإجراءاتها ومعلوماتها الافتراضية.

ثلاث شاشات للتهيئة: اختيار الخدمات التي تظهر في الشاشة الرئيسية، واختيار أهم إجراءين لخدمة ما، وسحب الخدمات لإعادة ترتيبها.
التجربة الأساسية

الشاشة الرئيسية والقائمة الجانبية

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

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

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

الملف الشخصي

تحصل كل فئة على ملف شخصي بالمعلومات المهمة لها.

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

الإشعارات

يختار المستخدم المواضيع التي يريد أن يُبلَّغ بها من إعدادات الإشعارات.

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

التخصيص

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

شاشات التخصيص: تعديل الخدمات في الشاشة الرئيسية، واختيار المعلومة التي تعرضها خدمة ما، واختيار إجراءاتها السريعة.
وحدة

الشؤون الأكاديمية

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

  • رؤية المحاضرات والواجبات والمواعيد الأكاديمية القادمة، وإضافتها إلى التقويم أو مزامنتها مع وحدة المهام.
  • عرض المعدل التراكمي والساعات المكتسبة والوضع الأكاديمي ودرجات الفصول السابقة.
  • ضبط تذكيرات للمحاضرات والواجبات.
  • رؤية القيود واتخاذ الإجراء اللازم.
  • قراءة الإعلانات العاجلة، التي تتسع لها كل وحدة.
  • فتح التطبيقات الأكاديمية المرتبطة، مثل Blackboard وSelf-Service Banner.

وتتحكم إعدادات الوحدة في المزامنة مع تقويم الهاتف أو وحدة المهام، وتضم كل الإعلانات والشروحات.

شاشات الشؤون الأكاديمية: ضبط تذكير لمحاضرة، وجدول المحاضرات الأسبوعي، وقائمة بقيود الإرشاد الأكاديمي والقيود المالية.
وحدة

المهام

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

  • جدولة مهمة.
  • تحديد مهمة كمهمة.
  • إضافة تذكير لمهمة.

دورة حياة المهمة

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

شاشات المهام: الصفحة الرئيسية للمهام بقوائم ذكية مثل اليوم والمجدولة والمهمة، وقائمة «القراءات» بمهمة مهمة ومهام موسومة، ونافذة «إضافة مهمة» بالاسم والوصف والقائمة والجدولة والخيارات المتقدمة.
وحدة

المكتبة

تتيح وحدة المكتبة حجز مساحات في مكتبة الجامعة للدراسة والبحث، ومتابعة أي غرامات مكتبية، ومعرفة ساعات العمل لتخطيط الزيارات.

حجز المساحات

اختر يومًا ونوع مساحة لرؤية الفترات المتاحة، ثم احجز حتى ثلاث فترات زمنية.

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

التنقل

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

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

الطعام

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

وللمسؤولين، يتابع عرض للتحليلات مسار الطلب، من المستخدمين النشطين إلى من يزورون قسم الطعام ومن يُكملون طلبًا.

شاشات الطعام: الصفحة الرئيسية للطعام بطلب قيد التحضير ومطاعم الحرم، وسلة طلب مع إتمام الطلب، وتقييم مطعم.
وحدة

جهات الاتصال

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

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

الصحة

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

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

الحافلات

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

شاشات الحافلات: المحطات المفضّلة بمواعيد الحافلة التالية، وقائمة محطات خط ما بمواعيدها، والبحث في الخطوط والمحطات.
وحدة

النماذج الإلكترونية

تضع وحدة النماذج كل نموذج في مكان واحد، منظّمًا في فئات وفئات فرعية، ليجد الناس النموذج الذي يحتاجونه ويرسلونه بسهولة.

شاشات النماذج الإلكترونية: فئات النماذج، وقائمة نماذج فئة ما، والمساعدة.

من Figma إلى OutSystems.

إلى جانب تصميم الشاشات، بنيت مكوّنات الواجهة والسمة المخصّصة مباشرة على OutSystems، ليعيد المطورون استخدام مكوّنات جاهزة، ما قلّل وقت التسليم.

الأثر

عملية تنزيل على Google Play
10K+
شاشة صُمّمت عبر 11 وحدة
200+
من 106 طلاب اختاروا الشاشة الرئيسية الفائزة
59%

ملاحظات ختامية

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