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

Yan
متاح
للمشاريع
لنتحدث
Yan Fontão Boring view
All work

Case 033تصميم تطبيق ويب ولوحة معلومات

Synergy Insurance Affiliates

منصة للويب والهاتف المحمول للمكاتب المنتسبة في مجال التأمين، مع صفحات نموذج أولي لأدوار Super Admin وAdmin وAgent. وتتابع الأهداف والمبيعات والوكلاء والحملات حسب المكتب، وتتضمن أداة لبناء الاستمارات.

دوري
مسارات مستخدم حسب الدور وواجهات لسطح المكتب والجوال
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Synergy من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

01

مساهمتي

عملت على مسارات المستخدم وواجهات سطح المكتب والجوال لمنصة Synergy Insurance Affiliates، المؤرشفة باسم Media Base / Base Media. يشمل التصميم أدوار Super Admin وOffice Admin وAgent، مع صفحات نموذج أولي مستقلة لكل دور في الصيغتين.

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

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

02

من الأدوار إلى تسلسل المعلومات

تغطي مسارات المستخدم ثلاثة أدوار: Super Admin وOffice Admin وAgent. وانطلاقا من لوحة المعلومات، يتفرع مسار Super Admin إلى الأهداف وأداء المنتسبين والتحليلات المالية ولوحة المتصدرين والمكاتب المنتسبة والاستمارات.

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

مخطط هيكلي رمادي للوحة معلومات للتحليلات المالية.
مخطط هيكلي للوحة معلومات تحليلية.

03

البدء من النظرة الشاملة ثم اختيار مكتب

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

تكرر Affiliate Performance هذه القراءة لمكتب واحد يختاره المستخدم من محدد في الأعلى. وتضيف مربعات ملونة للعملاء المحتملين والمبيعات ونسبة الإغلاق وصفا من أرقام الإنفاق، ويتبع العمود الأيمن الاختيار: فتتحول لوحة المتصدرين إلى Agent Leaderboard - Office.

لوحة معلومات Synergy مع قائمة يسرى وأربعة مربعات للنسب ومقياس Goal Score ورسم خطي للإيرادات وعمود أيمن للإشعارات ولوحة متصدري الوكلاء.
تضع Operation Overview النسب الرئيسية والهدف وإيرادات الأسبوع على شاشة واحدة.
Affiliate Performance مع محدد للمكتب ومربعات للنسب ومربعات ملونة للعملاء المحتملين والمبيعات ونسبة الإغلاق وصف من أرقام الإنفاق ورسم بياني للإيرادات.
القراءة نفسها لمكتب واحد، مع إضافة العملاء المحتملين والمبيعات والإنفاق.

04

ترتيب مع الأسباب إلى جانبه

تمنح Agent Leaderboard أفضل الوكلاء بطاقات كبيرة تعرض العملاء المحتملين والمبيعات ومعدل التحويل ونشاط المبيعات خلال أسبوع. ويميز اللون الأصفر المركز الأول، ويستمر صف البطاقات خلف العمود الأيمن. ويسرد الجدول أدناه كل وكيل، مع bill rate وCPA والإنفاق والمبيعات والعملاء المحتملين ومعدل التحويل في صف واحد.

وتبقى نسخة مختصرة من هذه القائمة في العمود الأيمن، تحت Notifications، في معظم شاشات سطح المكتب، فيظل الترتيب وآخر المبيعات والعملاء المحتملين في مرمى النظر أثناء المهام الأخرى.

Agent Leaderboard مع بطاقات لأفضل الوكلاء، لكل منها رسم لنشاط المبيعات، فوق جدول للوكلاء يضم bill rate وCPA والإنفاق والمبيعات والعملاء المحتملين ومعدل التحويل.
بطاقات أفضل الوكلاء فوق جدول يقارن بين الجميع.

05

الحملات حسب حصتها من المبيعات

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

Campaign Overview مع جدول للحملات ومعدلات تحويل ملونة وتصفية حسب المكتب ومفتاح Editing ومخطط حلقي لحصة كل حملة من المبيعات.
جدول ومخطط حلقي يقارنان بين الحملات حسب حصتها من المبيعات.
مخطط هيكلي رمادي لصفحة منشئ النماذج.
مخطط هيكلي لمنشئ نماذج.

06

بناء الاستمارات داخل المنتج

يخصص المخطط الهيكلي لمنشئ النماذج مساحتين منفصلتين للمستند وأدوات تحريره. ويحافظ التصميم النهائي على هذا التقسيم: الأسئلة في العمود الرئيسي وإضافة المحتوى في اللوحة اليمنى. وتفصل Form Builder وSettings وPreview بين تحرير السؤال وإعداد النموذج وفحص النتيجة.

تعمل الاستمارات كمحرر صغير بثلاث علامات تبويب: Form Builder وSettings وPreview. ويحمل كل سؤال نوع إجابته ومفتاح الإجابة الإلزامية، ويمكن نسخ أي كتلة أو حذفها. ويفسح عمود الإشعارات المجال للوحة لإضافة الأسئلة والعناوين والصور ومقاطع الفيديو والأقسام أو استيراد الأسئلة، مع Copy Link وSave Form في الأعلى.

Form Builder مع كتلة قسم، وكتلة سؤال بنوع الإجابة ومفتاح الإلزام، ولوحة إجراءات لإضافة الأسئلة والوسائط والأقسام.
يحتفظ منشئ الاستمارات بإجراءات الإضافة في لوحة جانبية.

07

سير العمل نفسه على الهاتف

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

على الهاتف يصل شريط عائم من خمس أيقونات إلى الأقسام الرئيسية، وتنتظم النسب في شبكة اثنين في اثنين فوق Goal Score. وتحت Goals Settings تفصل علامات التبويب بين المنتسبين والوكلاء، وكل هدف بطاقة تعرض قيمته المستهدفة وحالته الأسبوعية أو الشهرية وشريط تقدم وقلم تحرير.

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

لوحة معلومات على الهاتف مع أربعة مربعات للنسب في شبكة اثنين في اثنين ومقياس Goal Score وشريط عائم من خمس أيقونات.
Goals Settings على الهاتف مع علامتي تبويب Affiliates وAgents وبطاقات للأهداف الأسبوعية والشهرية، لكل منها شريط تقدم وأيقونة تحرير، إضافة إلى زر New.
شاشة هاتف عليها بطاقة صفراء لأفضل وكيل تعرض العملاء المحتملين والمبيعات ومعدل التحويل ورسما لنشاط المبيعات، فوق جدول مرتب وشريط أيقونات عائم.
تبقي لوحة المعلومات على الهاتف النسب والهدف في أول ما يظهر على الشاشة. الأهداف بطاقات قابلة للتحرير، ومعها بيان الأسبوع أو الشهر. على الهاتف تحتفظ لوحة المتصدرين ببطاقة الصدارة وتقلص الجدول.
000

التعليمات

Yan Fontão
لمسة
تفتح شاشة
نقرة
تفتح شاشة
سحب
يتجوّل في اللوحة
العجلة
الفأرة تكبّر، ولوحة اللمس تحرّك، وإصبعان يكبّران
− +
تراجع لرؤية اللوحة كاملة، أو اقترب
الأسهم
في دراسة الحالة: ↑↓ لتبديل الدراسة، ←→ لتبديل الوسائط. في اللوحة: للتحريك
مسافة
تفتح أو تعود
Enter
يفتح
Esc Backspace
رجوع
Home
العودة إلى الوسط، ثم إلى المقدمة
PgUp PgDn
القناة السابقة أو التالية
Tab
يتنقل بين المشاريع والروابط
R
مشروع عشوائي
0–9
اكتب رقم القناة، 1–61
?
هذه الصفحة
الاختصارات

موسيقى اللوحة

الملفات مضغوطة وموحّدة الصوت للويب.

متاح
للمشاريع
لنتحدث

رسالة جديدة إلى يان

أخبرني من أنت وسأرد عليك.

000

عن يان

مرحبًا، أنا يان

مصمم منتجات/ مهندس تصميم

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

  • 2018بداية تطوير البرمجيات
  • UI + codeالتصميم والتنفيذ

عملت مع Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

البرازيل · عن بُعد أو هجين أو حضوريًا

صورة يان فونتاو جالسًا بسترة خضراء ونظارة ويمسك ميكروفونًا.
متاح
للمشاريع
لنتحدث
متاح
للمشاريع
لنتحدث
000

قناة مقفلة

بموجب اتفاقية عدم إفصاح

أدخل الرمز

اطلب الرمز من يان ↗
متاح
للمشاريع
لنتحدث
YAN FONTÃO دراسات الحالة

القناة 33 تصميم تطبيق ويب ولوحة معلومات

Synergy Insurance Affiliates

منصة للويب والهاتف المحمول للمكاتب المنتسبة في مجال التأمين، مع صفحات نموذج أولي لأدوار Super Admin وAdmin وAgent. وتتابع الأهداف والمبيعات والوكلاء والحملات حسب المكتب، وتتضمن أداة لبناء الاستمارات.

دوري
مسارات مستخدم حسب الدور وواجهات لسطح المكتب والجوال
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Synergy من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

الأهداف والمكاتب والوكلاء في عرض عمل واحد

شاشات من ملفات تصميم Figma الأصلية، ببيانات تجريبية.

مساهمتي

عملت على مسارات المستخدم وواجهات سطح المكتب والجوال لمنصة Synergy Insurance Affiliates، المؤرشفة باسم Media Base / Base Media. يشمل التصميم أدوار Super Admin وOffice Admin وAgent، مع صفحات نموذج أولي مستقلة لكل دور في الصيغتين.

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

جولة عبر شاشات التصميم، وليست تسجيلا: لوحة المعلومات وأداء المنتسبين ولوحة المتصدرين والحملات ومنشئ الاستمارات.

من الأدوار إلى تسلسل المعلومات

تغطي مسارات المستخدم ثلاثة أدوار: Super Admin وOffice Admin وAgent. وانطلاقا من لوحة المعلومات، يتفرع مسار Super Admin إلى الأهداف وأداء المنتسبين والتحليلات المالية ولوحة المتصدرين والمكاتب المنتسبة والاستمارات.

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

مخطط هيكلي رمادي لصفحة نظرة عامة للمسؤول الأعلى.
مخطط هيكلي لنظرة عامة للمسؤول الأعلى.
مخطط هيكلي رمادي للوحة معلومات للتحليلات المالية.
مخطط هيكلي للوحة معلومات تحليلية.

البدء من النظرة الشاملة ثم اختيار مكتب

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

تكرر Affiliate Performance هذه القراءة لمكتب واحد يختاره المستخدم من محدد في الأعلى. وتضيف مربعات ملونة للعملاء المحتملين والمبيعات ونسبة الإغلاق وصفا من أرقام الإنفاق، ويتبع العمود الأيمن الاختيار: فتتحول لوحة المتصدرين إلى Agent Leaderboard - Office.

لوحة معلومات Synergy مع قائمة يسرى وأربعة مربعات للنسب ومقياس Goal Score ورسم خطي للإيرادات وعمود أيمن للإشعارات ولوحة متصدري الوكلاء.
تضع Operation Overview النسب الرئيسية والهدف وإيرادات الأسبوع على شاشة واحدة.
Affiliate Performance مع محدد للمكتب ومربعات للنسب ومربعات ملونة للعملاء المحتملين والمبيعات ونسبة الإغلاق وصف من أرقام الإنفاق ورسم بياني للإيرادات.
القراءة نفسها لمكتب واحد، مع إضافة العملاء المحتملين والمبيعات والإنفاق.

ترتيب مع الأسباب إلى جانبه

تمنح Agent Leaderboard أفضل الوكلاء بطاقات كبيرة تعرض العملاء المحتملين والمبيعات ومعدل التحويل ونشاط المبيعات خلال أسبوع. ويميز اللون الأصفر المركز الأول، ويستمر صف البطاقات خلف العمود الأيمن. ويسرد الجدول أدناه كل وكيل، مع bill rate وCPA والإنفاق والمبيعات والعملاء المحتملين ومعدل التحويل في صف واحد.

وتبقى نسخة مختصرة من هذه القائمة في العمود الأيمن، تحت Notifications، في معظم شاشات سطح المكتب، فيظل الترتيب وآخر المبيعات والعملاء المحتملين في مرمى النظر أثناء المهام الأخرى.

Agent Leaderboard مع بطاقات لأفضل الوكلاء، لكل منها رسم لنشاط المبيعات، فوق جدول للوكلاء يضم bill rate وCPA والإنفاق والمبيعات والعملاء المحتملين ومعدل التحويل.
بطاقات أفضل الوكلاء فوق جدول يقارن بين الجميع.

الحملات حسب حصتها من المبيعات

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

Campaign Overview مع جدول للحملات ومعدلات تحويل ملونة وتصفية حسب المكتب ومفتاح Editing ومخطط حلقي لحصة كل حملة من المبيعات.
جدول ومخطط حلقي يقارنان بين الحملات حسب حصتها من المبيعات.

بناء الاستمارات داخل المنتج

يخصص المخطط الهيكلي لمنشئ النماذج مساحتين منفصلتين للمستند وأدوات تحريره. ويحافظ التصميم النهائي على هذا التقسيم: الأسئلة في العمود الرئيسي وإضافة المحتوى في اللوحة اليمنى. وتفصل Form Builder وSettings وPreview بين تحرير السؤال وإعداد النموذج وفحص النتيجة.

تعمل الاستمارات كمحرر صغير بثلاث علامات تبويب: Form Builder وSettings وPreview. ويحمل كل سؤال نوع إجابته ومفتاح الإجابة الإلزامية، ويمكن نسخ أي كتلة أو حذفها. ويفسح عمود الإشعارات المجال للوحة لإضافة الأسئلة والعناوين والصور ومقاطع الفيديو والأقسام أو استيراد الأسئلة، مع Copy Link وSave Form في الأعلى.

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

سير العمل نفسه على الهاتف

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

على الهاتف يصل شريط عائم من خمس أيقونات إلى الأقسام الرئيسية، وتنتظم النسب في شبكة اثنين في اثنين فوق Goal Score. وتحت Goals Settings تفصل علامات التبويب بين المنتسبين والوكلاء، وكل هدف بطاقة تعرض قيمته المستهدفة وحالته الأسبوعية أو الشهرية وشريط تقدم وقلم تحرير.

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

لوحة معلومات على الهاتف مع أربعة مربعات للنسب في شبكة اثنين في اثنين ومقياس Goal Score وشريط عائم من خمس أيقونات.
تبقي لوحة المعلومات على الهاتف النسب والهدف في أول ما يظهر على الشاشة.
Goals Settings على الهاتف مع علامتي تبويب Affiliates وAgents وبطاقات للأهداف الأسبوعية والشهرية، لكل منها شريط تقدم وأيقونة تحرير، إضافة إلى زر New.
الأهداف بطاقات قابلة للتحرير، ومعها بيان الأسبوع أو الشهر.
شاشة هاتف عليها بطاقة صفراء لأفضل وكيل تعرض العملاء المحتملين والمبيعات ومعدل التحويل ورسما لنشاط المبيعات، فوق جدول مرتب وشريط أيقونات عائم.
على الهاتف تحتفظ لوحة المتصدرين ببطاقة الصدارة وتقلص الجدول.