تصميم واجهات متكاملة (End-to-End Product Design) لتطبيق NutriAI، وهو تطبيق ذكي في مجال التغذية واللياقة (HealthTech) يعتمد على الذكاء الاصطناعي (AI) لتقديم توصيات مخصصة للمستخدمين بناءً على بياناتهم الصحية وسلوكهم الغذائي.
- تحليل المستخدمين وتحديد شخصياتهم (User Personas).
- صياغة رحلة المستخدم (User Journey) بهدف تبسيط التجربة وتقليل الخطوات غير الضرورية.
- تصميم واجهات حديثة وبديهية باستخدام Figma، والتركيز على تحقيق توازن بصري بين التحفيز وسهولة الاستخدام عبر شاشات مثل:
• Onboarding
• Dashboards
• تتبع الوجبات والنشاط البدني.
- طوّرت نظام تصميم (Design System) متكامل لضمان الاتساق البصري وتسريع عمليات التطوير المستقبلية.
- التزمت بمعايير إمكانية الوصول (Accessibility Standards) لتحقيق تجربة شاملة.
- اعتمدت نظام ألوان متوازن (Color Palette) يجمع بين الطاقة الحيوية للعميل والاحترافية في الواجهات التشغيلية.
اللون الأساسي: أخضر زمردي - يرمز الأخضر إلى النمو، الحيوية، والثقة — وهي قيم جوهرية في مجال الصحة.
اللون الثانوي: أبيض ناصع - يعبّر عن التوازن البصري والمساحات الواسعة.
- استخدمت اللون الأخضر في عناصر الدعوة إلى الإجراء (CTAs) والبيانات الإيجابية مثل تحقيق الأهداف اليومية، بينما وفّر اللون الأبيض وضوحًا بصريًا عاليًا ومظهرًا عصريًا ومنفتحًا.
- اتبعت نهج التصميم البسيط والحديث (Minimal Design) لتحقيق توازن بين المساحات البيضاء والعناصر التفاعلية الدقيقة.
- استخدمت خطوط Sans-serif واضحة لضمان قراءة مريحة عبر مختلف الأجهزة، مع تباين مدروس بين العناوين والنصوص الفرعية لخلق تسلسل بصري منظم.
- صمّمت الهوية لتكون مرنة وقابلة للتوسّع لتناسب تطوير منتجات مستقبلية مثل نسخة الويب أو النظام الإداري دون الإخلال باتساق العلامة.
- قدّم التصميم تجربة استخدام أكثر سلاسة وتفاعلية، مما رفع معدل الاستمرارية والرضا لدى المستخدمين.
- ساعد نظام التصميم فريق التطوير على تسريع عملية التنفيذ بنسبة 40%+ مع الحفاظ على اتساق الهوية البصرية عبر جميع الشاشات.
عدد الواجهات/الشاشات: 8 شاشات
المكونات/الأقسام المشمولة:
Onboarding (2 شاشات: ترحيب + إعداد سريع)
الشاشة الرئيسية / Dashboard (تلخيص الحالة اليومية)
شاشة تسجيل الوجبة (Quick Log)
شاشة إضافة وجبة مفصلة (Search / Scan / Manual)
شاشة تتبع النشاط اليومي (مؤشرات بسيطة)
شاشة الأهداف والإشعارات
شاشة الملف الشخصي والإعدادات.
تسليم: ملف Figma + صور PNG لكل شاشة
تصميم Wireframe أولية لتحديد بنية الصفحات
5.00
|
|
تصميم Mid / High Fidelity عالية الدقة باستخدام Figma
5.00
|
|
تصميم نموذج تفاعلي Interactive Prototype
5.00
|
|
إنشاء نماذج تصميم Design System للمكونات والأنماط
5.00
|
|
عمل تقارير Information Architecture (IA)
5.00
|
تصميم Wireframe أولية لتحديد بنية الصفحات
5.00
|
|
تصميم Mid / High Fidelity عالية الدقة باستخدام Figma
5.00
|
|
تصميم نموذج تفاعلي Interactive Prototype
5.00
|
|
إنشاء نماذج تصميم Design System للمكونات والأنماط
5.00
|
|
عمل تقارير Information Architecture (IA)
5.00
|