🎯 نبذة عن المشروع:
- قدّمتُ تصميمًا متكاملاً (End-to-End Product Design) لمنصة BiteGo لتوصيل الطعام، وهي منصة متعددة الأطراف (Multi-Sided Marketplace) تخدم أربع فئات رئيسية: العملاء، المطاعم، شركات التوصيل، والإدارة.
- هدف التصميم: بناء منظومة متكاملة تربط تجربة العميل الأمامية مع لوحات تحكم إدارية وتشغيلية فعّالة.
💼 سير العمل (Workflow):
- تحليل المستخدمين وتحديد شخصياتهم (User Personas)، حيث حدّدتُ أربع شخصيات نموذجية لكل طرف:
1. العميل السريع: يبحث عن تجربة طلب سريعة وبسيطة.
2. العميل المستكشف: يهتم بالمحتوى، العروض والتقييمات قبل القرار.
3. صاحب المطعم: يحتاج إلى واجهة لإدارة الطلبات، القوائم، والربحية.
4. شركة التوصيل: يفضّل واجهة تركّز على التتبع، الخرائط، وإدارة الجداول الزمنية.
- صممت رحلات مستخدم (User Journeys) مخصّصة لكل شخصية لتوضيح سيناريوهات الاستخدام الأساسية، نقاط الألم، ونقاط الفرص لتحسين التجربة.
- نفّذت هيكلة معلومات Information Architecture (IA) لكل لوحة تحكم، لضمان تدفق البيانات التشغيلية بكفاءة وسهولة الوصول للمؤشرات الحرجة.
- انتقلت إلى تصميم Wireframes أولية، لتخطيط البنية وتدفق التفاعل.
- طوّرت Mid-Fidelity للاختبار، وأخيرًا High-Fidelity على Figma.
- إنشاء Interactive Prototypes للاختبارات القابلة للمشاركة.
- طوّرت نظام تصميم موحّد (Design System) يحكم المكونات عبر جميع الأدوار، وقمت بتصميم Landing Page تسويقية لزيادة التحويلات والتسجيلات.
- التزمت بمعايير إمكانية الوصول (Accessibility Standards) لتحقيق تجربة شاملة.
🎨 نظام الألوان وسبب الاختيار:
اللون الأساسي (Primary Color):
🟠 برتقالي دافئ — يرمز إلى النشاط، السرعة، والدفء، مما يعزز إحساس المستخدم بالحيوية أثناء عملية الطلب.
اللون الثانوي (Secondary Color):
🟢 أخضر معتدل — يعبّر عن النجاح، الإتمام، والإيجابية في الحالات الناجحة (مثل تأكيد الطلب).
🪶 الهوية البصرية والخطوط (Visual Identity & Typography):
- اتبعت نهجًا عمليًا قائمًا على الشبكات (Grid Layouts) لتنظيم المعلومات داخل الـ Dashboards.
- استخدمت خطوط Sans-serif حديثة لضمان وضوح الأرقام والمقاييس، مع نظام أيقونات موحّد لتسريع الفهم البصري وتقليل الزمن اللازم لاتخاذ القرار.
💡 المخرجات النهائية:
- إنشاء Wireframes أولية لتحديد بنية الصفحات وتدفق التفاعل.
- تصميمات Mid/High-Fidelity عالية الدقة لتجربة توزيع العناصر البصرية وتأكيد هيكل التفاعل.
- نموذج تفاعلي (Interactive Prototype) يشمل تدفقات العميل والمطعم والسائق والإدارة.
- نظام تصميم (Design System) موحّد للمكونات والأنماط.
- صفحة هبوط Landing Page متكاملة لأغراض التسويق والتحويل.
- تقارير Information Architecture (IA) وتوصيات لتحسين سير العمل.
🚀 الأثر والنتائج:
- بسّطت التجربة التشغيلية لكل الأطراف وزادت كفاءة تنفيذ المهام اليومية.
- مكنت لوحات التحكم الإدارة من اتخاذ قرارات أسرع باستخدام مؤشرات أداء واضحة.
- حسّنت تجربة العميل الأمامية مما أدى إلى ارتفاع احتمالية تكرار الطلبات وتحسين معدلات التحويل من صفحة الهبوط.
- سرّعت عملية التطوير لدى الفريق بفضل نظام التصميم (Design System) الموحد.
🛠️ الأدوات المستخدمة:
Figma – Adobe Illustrator – Adobe Photoshop – FigJam – Maze – Overflow
