Mixoo (مشروع تم تنفيذه في وكالة Ikadran)
تصميم UI/UX لتطبيق ويب وتحسين مرحلة الانضمام (Onboarding)
تصميم واجهة SaaS، تطبيق ويب (Web App) وأنظمة تفاعلية
Mixoo هو تطبيق ويب مبتكر قمت بتصميم تجربة المستخدم ورسومات الواجهة الخاصة به بالكامل خلال فترة تدريبي في وكالة Ikadran. ارتكز جوهر هذا المشروع على إنشاء مسار انضمام (Onboarding) تفاعلي للغاية ومصمم حسب الطلب.
كان الهدف الرئيسي هو تبسيط مسار الإعداد الأولي المعقد والفني لأقصى حد (تحديد الأهداف، تقدير عدد الصفحات المطلوبة، اختيار القوالب البصرية وخيارات التسويق)، وذلك لتحويله إلى أداة إعداد خطوة بخطوة سلسة، مشجعة، ومحسّنة لمعدلات التحويل.
تهدف استراتيجية UI/UX الشاملة إلى زيادة تسجيل المستخدمين (SaaS activation) عبر تقليل الجهد الذهني المرتبط بإنشاء وتسعير أي مشروع عبر الإنترنت:
تصميم مسار انضمام ديناميكي وتفاعلي (Gamified) مقسم إلى 5 خطوات رئيسية (النشاط، الأهداف، الصفحات، الخيارات، والتسويق).
دمج نظام تسعير وتقدير تكلفة فوري (Dynamic Pricing Sidebar) مرئي على الشاشة لطمأنة المستخدم بشأن ميزانيته.
إنشاء نظام اختيار قوالب بصرية جذاب جدًا ليتمكن العميل من تخيل مساحته المستقبيلة فورًا.
ضمان استجابة تقنية ممتازة وتوافق تام مع مختلف الشاشات بالاعتماد على تصميم الهواتف أولاً (Mobile First).
سمح لي هذا المشروع بالاستفادة من الميزات المتقدمة لـ Figma لتصميم منطق تطبيقي (SaaS) دقيق ومحوري حول المستخدم.
هندسة الانضمام وبحوث UX: تحليل دقيق لتدفقات المستخدمين (User Flows) لترتيب الأسئلة منطقيًا. تم التفكير في كل خطوة لتجنب ترك الموقع، وذلك عبر بطاقات تفاعلية مبسطة لاختيار صفحات الموقع (الرئيسية، الخدمات، الاتصال، إلخ).
التوجيه الفني وتصميم UI: اختيار ميثاق بصري حديث، تقني ومطمئن، بأساس أبيض أنيق مع لمسات باللون الأزرق الزاهي لتوجيه النظر نحو أزرار الإجراءات (CTA مثل “Next”). تم تحويل الأيقونات وبطاقات الخيارات إلى رسومات متجهة (Vector) لضمان وضوح بصري مثالي.
النماذج التفاعلية المتقدمة والتصميم الاستجابي: تطوير نماذج عالية الدقة للكمبيوتر والهواتف الذكية، مما يضمن انتقالاً سلسًا للعناصر على شاشات المحمول. تم استخدام ميزات auto-layout والمكونات الديناميكية في Figma لمحاكاة السلوك الدقيق لتطبيق الويب النهائي.
نماذج عالية الدقة للكمبيوتر والجوال لأداة الإعداد ومسار الانضمام الكامل.
نظام تصميم تطبيقي كامل (أنماط الحالات: المحددة، عند التمرير، غير النشطة، وأزرار التنقل).
نموذج تفاعلي يحاكي الاحتساب الديناميكي للأسعار وتغيير الخطوات.
توثيق لتدفق UX الخاص بالتطبيق موجه لفريق التطوير في Ikadran.
