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

الجدول الزمني للمشروع
- صياغة المشكلة واستراتيجية التصميميونيو–أغسطس 2022
- هيكلة المعلومات ومسارات المستخدميونيو–نوفمبر 2022
- إطارات منخفضة وعالية الدقةسبتمبر–نوفمبر 2022
- التصميم البصري والنموذج الأوليسبتمبر 2022 – مايو 2023
- مكوّنات الواجهة والسمة المخصّصةديسمبر 2022 – ديسمبر 2023
- اختبار A/B وتطبيق الملاحظاتمارس – ديسمبر 2023
المشكلة.
كان هدف التطبيق الجديد للجامعة تلبية الاحتياجات اليومية لكل فئة عبر بوابة رقمية واحدة، بمظهر جديد يناسب اهتمامات الناس وملفاتهم.
وقبله، كانت الحياة الجامعية موزّعة على منصات متعددة، وشعرت كل فئة بذلك بطريقتها.
الطلاب
كانوا يتنقلون بين المنصات لإنجاز مهمة واحدة، وأرادوا جدولة طلبات الطعام واستلامها حين يتفرغون بدل الانتظار في الطابور.
أعضاء هيئة التدريس والموظفون
وجدوا صعوبة في إدارة المهام، والوصول إلى النماذج الإلكترونية، ومراجعة جداولهم، ومتابعة معلومات العمل مثل الإجازات والرواتب.
الزوار
وجدوا صعوبة في التنقل داخل الحرم الجامعي، وفي معرفة المكتب المناسب للتواصل.
الحل.
تطبيق جامعي واحد يجمع الموارد من كل المنصات، بتنقّل بسيط ووحدة لكل خدمة:
- التنقل داخل الحرم، بخريطة واتجاهات وتتبّع مباشر للحافلات.
- إدارة المهام، بقوائم المهام والتذكيرات والجدولة.
- النماذج الإلكترونية، مصنّفة ليسهل العثور على النموذج المناسب.
- الإشعارات للفعاليات والإعلانات المهمة.
- الملفات الشخصية، ليرى كل شخص ما يخصّه.
- التكامل مع أنظمة الجامعة القائمة، لإبقاء البيانات متزامنة.
مراحل التصميم
- 01
المشكلة والحل
- صياغة المشكلة
- استراتيجية التصميم
- 02
توليد الأفكار والرسم
- هيكلة المعلومات
- مسار المستخدم
- 03
الإطارات الشبكية
- إطارات منخفضة الدقة
- إطارات عالية الدقة
- 04
تصميم الواجهة والنموذج الأولي
- التصميم البصري
- النموذج الأولي
- 05
الملاحظات والاختبار
- اختبار A/B
- تطبيق الملاحظات
- أسبوعًا
- 48+
- شاشة
- 200+
- وحدة
- 11
الأدوات المستخدمة
- Figma
- Adobe Illustrator
- Miro
- Google Docs
- Google Sheets
- Microsoft Teams
- Jira
- Slack
ماذا تعلّمنا.
- كان على تطبيق واحد أن يخدم أشخاصًا مختلفين جدًا. احتاج الطلاب وأعضاء هيئة التدريس والموظفون والزوار كلٌّ إلى مجموعة مختلفة من الخدمات، فلم يكن ممكنًا أن يعرض التطبيق الشيء نفسه للجميع.
- كان على الشاشة الرئيسية أن تكون شخصية. لا يحتاج الجميع إلى كل خدمة كل يوم، لذا كان يجب أن تكون الوحدات الأكثر استخدامًا لكل شخص في متناوله، والبقية على بُعد نقرة.
- كان على الشكل أن يكسب الناس. في اختبار A/B لثلاثة تصاميم للشاشة الرئيسية مع 106 طلاب، كان التصميم C المفضّل بوضوح (59.4%)، متقدمًا على B (38.7%) وA (1.9%).
رسم خريطة التطبيق.
أنشأت مسار المستخدم وهيكلة المعلومات على Miro لتوضيح كيف سيتنقل الناس في التطبيق ووحداته. يسجّل أفراد الجامعة الدخول ويمرّون بالتهيئة، ويسجّل الزوار برمز لمرة واحدة، ثم يصل الجميع إلى الشاشة الرئيسية المخصّصة نفسها.
- تثبيت التطبيق وفتحه
- تسجيل الدخول
- من أفراد الجامعة أم زائر؟
- التهيئة
- اختيار الوحدات
- تخصيص الإجراءات
- إعادة ترتيب الوحدات
- إدخال الاسم والبريد الإلكتروني
- التحقق برمز لمرة واحدة
- الملف الشخصي
- الإشعارات
- الإجراءات السريعة
- جهات الاتصال
- الحافلات
- الطعام
- النماذج
- الشؤون الأكاديمية
- التنقل
- المكتبة
- الصحة
الإطارات الشبكية.
حدّدت الإطارات الشبكية، منخفضة الدقة ثم عالية الدقة، بنية كل مسار قبل أي تصميم بصري: هنا التسجيل بالاسم ورقم الهاتف، وملف أعضاء هيئة التدريس والموظفين، وقائمة الإشعارات.

لكل خدمة لونها الخاص.
كان اختيار لوحة الألوان أمرًا دقيقًا. فـMyAUC يجمع خدمات كثيرة، ولكل منها لون علامة خاص بها في الجامعة، فكان لا بد من استخدام تلك الألوان كما هي. أعطيت كل خدمة لونها، واستخدمت الأزرق الأساسي للتطبيق ليبقى المظهر متسقًا في التجربة كلها.
الأساسي
- #0F385A
- #1D6DAF
- #50A0E2
- #A8CFF0
- #D3E7F8
- #E9F3FB
- #F6FAFE
الرماديات
- #222222
- #4D4D4D
- #808080
- #B3B3B3
- #E6E6E6
- #F2F2F2
- #FFFFFF
ألوان الخدمات
- جهات الاتصال#8DB938
- الحافلات#FEC34E
- الصحة#00A9A3
- التنقل#0083AD
- النماذج#AB218E
- الطعام#F15B4E
- المكتبة#E8CFA0
روح عمارة الجامعة.
عملنا على نقل روح عمارة الجامعة الأمريكية إلى التطبيق، خاصة في الشاشة الرئيسية. فمثلث ودرع وهلال مستوحاة من مباني الحرم تجتمع لتشكّل اللغة البصرية للتطبيق.

الخطوط.
تستخدم الواجهة خطين، 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 موظفًا لمعرفة انطباعهم عن ثلاثة أشكال مختلفة للشاشة الرئيسية. وفضّلت المجموعتان التصميم الثالث، الذي طبّقناه مع تغييرات طفيفة في التخطيط تراعي قيود التطوير وسهولة الوصول.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

من Figma إلى OutSystems.
إلى جانب تصميم الشاشات، بنيت مكوّنات الواجهة والسمة المخصّصة مباشرة على OutSystems، ليعيد المطورون استخدام مكوّنات جاهزة، ما قلّل وقت التسليم.
الأثر
- عملية تنزيل على Google Play
- 10K+
- شاشة صُمّمت عبر 11 وحدة
- 200+
- من 106 طلاب اختاروا الشاشة الرئيسية الفائزة
- 59%
ملاحظات ختامية
MyAUC أكبر مشروع عملت عليه، بإحدى عشرة وحدة وأكثر من 200 شاشة وأربع فئات مختلفة جدًا من الناس تتشارك تطبيقًا واحدًا. وكان لأمرين الأثر الأكبر في تشكيله. فاختبار ثلاث شاشات رئيسية مع الطلاب والموظفين حوّل مسألة ذوق إلى خيار واضح، وبنائي للمكوّنات والسمة البصرية على OutSystems بنفسي أبقى التطبيق المُطلَق قريبًا من التصاميم بدل أن يبتعد عنها أثناء التسليم. وفي المرة القادمة، سأُدخل هذا النوع من الاختبار في وقت أبكر، على المسارات وليس على الشكل فقط.