💼 سير العمل في المشروع:
- قدّمت تصميمًا متكاملًا (End-to-End Product Design) لتطبيق NutriAI، وهو تطبيق ذكي في مجال التغذية واللياقة (HealthTech) يعتمد على الذكاء الاصطناعي (AI) لتقديم توصيات مخصصة للمستخدمين بناءً على بياناتهم الصحية وسلوكهم الغذائي.
- بدأت المشروع بمرحلة تحليل المستخدمين وتحديد شخصياتهم (User Personas)، تلتها صياغة رحلة المستخدم (User Journey) بهدف تبسيط التجربة وتقليل الخطوات غير الضرورية.
- انتقلت بعد ذلك إلى تصميم واجهات حديثة وبديهية باستخدام Figma، مع الالتزام الصارم بمعايير إمكانية الوصول (Accessibility Standards) والتركيز على تحقيق توازن بصري بين التحفيز وسهولة الاستخدام عبر شاشات مثل:
الانضمام (Onboarding) – لوحات التحكم (Dashboards) – تتبع الوجبات والنشاط البدني.
- كما طوّرت نظام تصميم (Design System) متكامل لضمان الاتساق البصري وتسريع عمليات التطوير المستقبلية.
🎨 نظام الألوان وسبب الاختيار:
- اعتمدت تدرجات الأخضر الزمردي (Emerald Green) مع الخلفيات البيضاء لخلق توازن بصري واضح ومريح.
- يرمز الأخضر إلى النمو، الحيوية، والثقة — وهي قيم جوهرية في مجال الصحة.
- استخدمت اللون الأخضر في عناصر الدعوة إلى الإجراء (CTAs) والبيانات الإيجابية مثل تحقيق الأهداف اليومية، بينما وفّر اللون الأبيض وضوحًا بصريًا عاليًا ومظهرًا عصريًا ومنفتحًا.
🪶 الهوية البصرية والخطوط (Visual Identity & Typography):
- اتبعت نهج التصميم البسيط والحديث (Minimal Design) لتحقيق توازن بين المساحات البيضاء والعناصر التفاعلية الدقيقة.
- استخدمت خطوط Sans-serif واضحة لضمان قراءة مريحة عبر مختلف الأجهزة، مع تباين مدروس بين العناوين والنصوص الفرعية لخلق تسلسل بصري منظم.
- صمّمت الهوية لتكون مرنة وقابلة للتوسّع لتناسب تطوير منتجات مستقبلية مثل نسخة الويب أو النظام الإداري دون الإخلال باتساق العلامة.
💡 المخرجات النهائية:
- تصميمات Wireframes أولية لتخطيط بنية الصفحات وتدفق التفاعل.
- تصميمات Mid-Fidelity لاختبار توزيع العناصر البصرية وسهولة التصفح.
- تصميمات High-Fidelity نهائية عالية الدقة على Figma.
- نموذج تفاعلي (Interactive Prototype) قابل للاختبار والمراجعة.
- نظام تصميم (Design System) متكامل ومنظم قابل للتوسّع.
- تقرير توصيات UX (UX Recommendations Report) لتحسين التجربة المستقبلية.
🚀 الأثر والنتائج:
- قدّم التصميم تجربة استخدام أكثر سلاسة وتفاعلية، مما رفع معدل الاستمرارية والرضا لدى المستخدمين.
- ساعد نظام التصميم فريق التطوير على تسريع عملية التنفيذ بنسبة 40%+ مع الحفاظ على اتساق الهوية البصرية عبر جميع الشاشات.
🛠️ الأدوات المستخدمة:
Figma – Adobe Illustrator – UX Strategy – Design System – Prototyping – Accessibility Standards