بنك CIB

بنك CIB

بنك CIB

تجربة مصرفية برؤية جديدة

تجربة مصرفية برؤية جديدة

تجربة مصرفية برؤية جديدة

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

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

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

دوري

دوري

مقيّم تجربة المستخدم ومصمم

المدة

المدة

شهر واحد (5/2022)

قصة المشروع

قصة المشروع

كيف بدأت الفكرة؟

كيف بدأت الفكرة؟

كيف جاءت الفكرة؟

كيف جاءت الفكرة؟

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

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

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

ملخص المشروع

ملخص المشروع

نظرة مركزة على المشكلة والمنهج والحل والنتائج.

نظرة مركزة على المشكلة والمنهج والحل والنتائج.

مشكلة قابلية الاستخدام

مشكلة قابلية الاستخدام

مشكلة قابلية الاستخدام

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

عوائق بصرية

عوائق بصرية

عوائق بصرية

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

استجابة الواجهة للتفاعل

استجابة الواجهة للتفاعل

استجابة الواجهة للتفاعل

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

وضوح التنقل

وضوح التنقل

وضوح التنقل

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

قرارات ناتجة عن التقييم

قرارات ناتجة عن التقييم

قرارات ناتجة عن التقييم

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

الأدوات والممارسات

الأدوات والممارسات

جمعت بين التصميم وإدارة المنتجات، مستندا إلى رؤية واستراتيجية منحتاني الثقة للاستكشاف والتجريب والتعلم بسرعة.

جمعت بين التصميم وإدارة المنتجات، مستندا إلى رؤية واستراتيجية منحتاني الثقة للاستكشاف والتجريب والتعلم بسرعة.

جمعت بين التصميم وإدارة المنتجات، مستندا إلى رؤية واستراتيجية منحتاني الثقة للاستكشاف والتجريب والتعلم بسرعة.

الأدوات

الأدوات

الأدوات

دعمت كل أداة جانبا من إعادة التصميم. استخدمت Miro لرسم التجربة الأصلية وتحديد مواضع التعثر، وX-Mind لتنظيم منطق التنقل وتسلسل الشاشات، وNotion لتوثيق المشكلات والمسارات وأفكار التحسين. وفي Figma جمعت ذلك كله لبناء واجهة أوضح وأسهل استخداما وقابلة للتنفيذ.

دعمت كل أداة جانبا من إعادة التصميم. استخدمت Miro لرسم التجربة الأصلية وتحديد مواضع التعثر، وX-Mind لتنظيم منطق التنقل وتسلسل الشاشات، وNotion لتوثيق المشكلات والمسارات وأفكار التحسين. وفي Figma جمعت ذلك كله لبناء واجهة أوضح وأسهل استخداما وقابلة للتنفيذ.

Miro

Figma

Notion

X-Mind

الممارسات

الممارسات

الممارسات

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

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

مقابلات المستخدمين

تقييم تجربة المستخدم

هندسة المعلومات

كيف يمكننا؟

التصميم القديم

التصميم القديم

لمحة عن التصميم الأصلي وأبرز مشكلاته.

لمحة عن التصميم الأصلي وأبرز مشكلاته.

لوحة المتابعة

التقييم البصري

التقييم البصري

هنا يبدأ ما أسميه «التحليل العنكبوتي»: ربط كل مشكلة بصرية ببطاقة تشرحها.

هنا يبدأ ما أسميه «التحليل العنكبوتي»: ربط كل مشكلة بصرية ببطاقة تشرحها.

واجهات الهاتف

واجهات الهاتف

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

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

التهيئة الأولى

التهيئة الأولى

الانطباع الأول مهم. نستعرض هنا شاشات البداية وكيف تساعد المستخدمين الجدد أو تربكهم.

الانطباع الأول مهم. نستعرض هنا شاشات البداية وكيف تساعد المستخدمين الجدد أو تربكهم.

أقسام التطبيق الرئيسية

أقسام التطبيق الرئيسية

المسارات الأساسية: الرئيسية والمعاملات والمنتجات والملف الشخصي، وكيف تشكل التجربة المصرفية اليومية.

المسارات الأساسية، مثل الرئيسية والمعاملات والمنتجات والملف الشخصي، ودورها في التجربة المصرفية اليومية.

شاشات أخرى

المسارات الأساسية: الرئيسية والمعاملات والمنتجات والملف الشخصي، وكيف تشكل التجربة المصرفية اليومية.

واجهات الويب

واجهات الويب

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

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

الرئيسية

الرئيسية

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

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

تحويل الأموال

تحويل الأموال

شاشة بسيطة وفعالة لتحويل الأموال بين الحسابات. استخدمت مكوّن تبويبات مخصصا لاستيعاب أنواع التحويل المختلفة بمرونة وسرعة أكبر.

كشوف الحساب

كشوف الحساب

تعرض الصفحة جميع المعاملات عبر الحسابات والبطاقات بوضوح. وقد يتجاوز هذا التصور بعض القيود المصرفية الحالية؛ إذ أعطيت الأولوية لتحسين تجربة العميل في هذا التصميم المقترح.

شاشات أخرى

شاشات أخرى

ما تعلمته

تأملات ودروس، وما سأفعله بشكل مختلف.

ما تعلمته

تأملات ودروس، وما سأفعله بشكل مختلف.

ماذا تعلمت؟

ماذا تعلمت؟

ماذا تعلمت؟

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

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

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

ما الذي نجح؟

ما الذي نجح؟

ما الذي نجح؟

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

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

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

ما الذي يمكن تحسينه؟

ما الذي يمكن تحسينه؟

ما الذي يمكن تحسينه؟

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

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

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

تابع الاستكشاف

مشاريع أخرى وزوايا مختلفة تكشف كيف تتشكل طريقتي في التصميم.

مشاريع أخرى وزوايا مختلفة تكشف كيف تتشكل طريقتي في التصميم.

تابع الاستكشاف

مشاريع أخرى وزوايا مختلفة تكشف كيف تتشكل طريقتي في التصميم.