Rawaa
السياق
روّاء فكرة منصة SaaS للمطاعم والمقاهي في الأردن. بدل أن نطلب من الضيف تنزيل تطبيق ولاء جديد، تبدأ التجربة برمز QR على الطاولة وتكمل عبر واتساب: نقاط عند العودة، وسؤال خاص عن التجربة بعد الزيارة، وتنبيه فوري لصاحب المطعم عند حدوث أي مشكلة، قبل أن تتحول إلى تقييم علني.
البحث
جمعت بين بحث مكتبي عن سلوك المستخدمين مع واتساب والتقييمات وبرامج الولاء في الأردن والمنطقة، وبنيت المنتج حول ثلاثة أدوار: صاحب المطعم الذي يدفع، والضيف الذي يأكل، والموظف الذي عليه أن يشرح النظام عند الصندوق. وشكّلت التصميمَ خمسُ فرضيات مستخلصة من البحث المكتبي:
- المغادرة الصامتة: الضيف يتجنب الإحراج، فيغادر غير راضٍ ولا يعود.
- صاحب مطعم بلا حيلة: يكتشف تقييم النجمة الواحدة بعد أيام من الموقف.
- لا رؤية للبيانات: يعتمد على ذاكرته لمعرفة زبائنه الدائمين، ولا يعرف إن كانت حملته أعادت أحدًا.
- جدار التطبيق: أدوات الولاء التي تتطلب تنزيل تطبيق تخسر الزائر العابر والجديد.
- شرح قصير: إن كان شرح الموظف أطول من جملة قصيرة، فغالبًا لن يقوله.
وأظهر تحليل SWOT لتطبيقَي الولاء المعروفَين لدى المطاعم الأردنية الفجوة بوضوح: كلاهما جيد في المكافآت، لكن لا أحد منهما يساعد صاحب المطعم حين يغادر الضيف غير راضٍ، وكلاهما يبدأ بتنزيل تطبيق.
خمسة مبادئ للتصميم
تحوّلت كل فرضية إلى قاعدة، وكل شاشة بعدها رُوجعت على ضوء هذه القواعد الخمس.
بلا عوائق
الضيف لا ينزّل أي شيء. مسح رمز QR ثم واتساب.
الساعة الذهبية
يُطلب التقييم خلال ساعتين من الزيارة، والتجربة ما زالت حاضرة.
الخصوصية أولًا
الضيف غير الراضي يصل لصاحب المطعم قبل أن يصل إلى خرائط Google.
نظرة واحدة
لوحة التحكم تجيب عن “هل ضيوفي راضون، ومن هم أهم زبائني؟” دون رسوم معقدة.
شرح بعشر كلمات
كل ما يقوله الموظف يتسع لجملة قصيرة: “امسح الرمز واجمع نقاطك!”
الهيكلة والهياكل السلكية
رسمت حلقة الضيف قبل أي شاشة: مسح الرمز، ثم رسالة ترحيب، ثم طلب تقييم بعد ساعتين، ثم إما دعوة لتقييم على Google للضيف الراضي، أو شكوى خاصة تصل لصاحب المطعم، وعرض لاستعادة الضيف إن لم يعد خلال أسبوعين. بعدها صمّمت 46 شاشة هيكلية بالرمادي: الموقع، والتسجيل، وتطبيق صاحب المطعم، وتطبيق الجوال. وتحوّلت الهياكل الـ46 إلى 62 شاشة نهائية بعد إضافة النوافذ والحالات وتطبيق الجوال كاملًا.
- الموقع والتسجيل7 شاشة
- الصفحة التعريفية
- إنشاء حساب
- تسجيل الدخول
- خطوات البدء
- 1 · الباقة
- 2 · الدفع
- 3 · الأدوات
- 4 · ربط واتساب
- تطبيق المالك (سطح المكتب)10 شاشة
- لوحة التحكم
- الزبائن
- المكافآت
- الرسائل التلقائية
- مركز الطوارئ
- التسويق
- التقارير
- رموز QR
- الدعم
- الإعدادات
- النوافذ المنبثقة6 شاشة
- إضافة زبون
- إنشاء رمز QR
- حملة جديدة
- الرد
- تعديل رسالة
- مكافأة جديدة
- تطبيق الجوال20 شاشة
- البدء
- شاشة البداية
- الترحيب
- التسجيل / الدخول
- الباقة والدفع
- الأدوات
- ربط واتساب
- جاهز
- الرئيسية
- الزبائن
- تفاصيل الزبون
- الشكاوى
- نافذة الرد
- التقارير
- المزيد
- المكافآت
- الرسائل
- التسويق
- رموز QR
- الإعدادات
- الدعم
- البدء
عشرة أقسام في الشريط الجانبي على سطح المكتب، وخمسة تبويبات على الجوال: الرئيسية والزبائن والشكاوى والتقارير والمزيد.
- البداية
- النهاية
- شاشة
- إجراء النظام
- قرار
المالك: من الموقع إلى لوحة تحكم جاهزة
- البداية: يزور الصفحة التعريفية
- شاشة: إنشاء حساب
- شاشة: اختيار الباقة
- شاشة: الدفع (تجربة 14 يومًا)
- شاشة: اختيار الأدوات
- شاشة: ربط واتساب للأعمال
- شاشة: جاهز: اطبع أول رمز QR
- النهاية: لوحة التحكم
حلقة الضيف: زيارة واحدة ونتيجتان
- البداية: الضيف يمسح رمز QR على الطاولة
- إجراء النظام: رسالة ترحيب على واتساب وإضافة النقاط
- إجراء النظام: طلب تقييم بعد ساعتين
- قرار: هل كانت الزيارة جيدة؟
- نعم: طلب تقييم على Google
- لا: شكوى خاصة تصل إلى مركز الطوارئ
- شاشة: المالك يرد بشكل خاص عبر واتساب
- النهاية: إن لم يعد خلال أسبوعين: عرض لاستعادته
هيكل الجوال: الرئيسية هيكل الجوال: الشكاوى
تطبيق صاحب المطعم
تكتفي لوحة التحكم بما يتفقده صاحب المطعم بين طلب وآخر: الضيوف النشطون، ونسبة العودة، والمكافآت، والشكاوى المفتوحة، ولكلٍّ منها اتجاهه الأسبوعي، مع اختصارات سريعة وتصنيف أهم الزبائن بالاسم. وتبقى عبارة “واتساب متصل” ظاهرة دائمًا ليعرف فورًا إن انقطعت القناة.
مركز الطوارئ هو قلب المنتج. تصل إليه التقييمات المنخفضة بكلمات الضيف نفسه، ليردّ صاحب المطعم عليه بشكل خاص عبر واتساب خلال دقائق، بدل أن يكتشف تقييمًا علنيًا بعد أيام.
تطبيق الجوال
نادرًا ما يجلس صاحب المطعم خلف مكتب، لذلك يركّز تطبيق الجوال على الرئيسية والزبائن والشكاوى والتقارير ليتفقدها بيد واحدة. تحمل الشكاوى إشارة حيّة، والرد يفتح نافذة سفلية دون مغادرة القائمة.
الرئيسية الشكاوى رد خاص التقارير
نظام التصميم
يستعير اللون الأخضر ثقة القناة التي يستخدمها الضيوف أصلًا، ويُحفظ الأصفر للإجراء الأهم في كل شاشة. فُحص تباين كل زوج ألوان، ويحمل خط Lexend الشاشات الإنجليزية وخط Readex Pro أنماط النص العربي، بسلّم أحجام واحد.
من Figma مبني بأنماط الألوان والنصوص في Figma. مأخوذة من ملف Figma الخاص بروّاء: 50 نمط لون (لكلٍّ منها حالتا :hover و:active)، و27 نمط نص عربي، و1,630 طبقة نص في شاشات النموذج.
النظام قيد الاستخدام
الألوان
يُحسب التباين مع الأبيض أو أغمق لون نص، أيهما أعلى. اضغط على أي لون لنسخ قيمته.
الأخضر الأساسي
الأصفر المميّز
المحتوى
الحالة
الخلفية
الخطوط
- Lexendكل الشاشات، الإنجليزية والأرقام
- Readex Proأنماط النص العربي: Regular وMedium وSemiBold
سلّم الخطوط
- Display · 56 · 700تصميم يفهمه الناس
- H1 · 44 · 700تصميم يفهمه الناس
- H2 · 28 · 600تصميم يفهمه الناس
- H3 · 20 · 600تصميم يفهمه الناس
- Body · 16 · 400تصميم يفهمه الناس
- UI · 14 · 500تصميم يفهمه الناس
- Caption · 12 · 400تصميم يفهمه الناس
الأحجام الأكثر استخدامًا في شاشات النموذج.
استدارة الزوايا
- 8
- 12
- 16
- 20
- pill
كيف استخدمت الذكاء الاصطناعي
استخدمت أدوات الذكاء الاصطناعي لتسريع العمل لا لاتخاذ القرار. أعطتني UX Pilot مسودات أولى سريعة لمقارنة الاتجاهات، وحوّلت Figma Make الشاشات الثابتة إلى نموذج تفاعلي لاختبار السلوك، وساعدني مساعد ذكي في الأعمال المتكررة داخل Figma. أما البحث والشخصية والمبادئ الخمسة وكل قرار نهائي فكانت مني، وراجعت كل شاشة مولّدة يدويًا.
بقية تطبيق صاحب المطعم
توقف النموذج الأول عند لوحة التحكم، فأكملت تطبيق صاحب المطعم بالإطار نفسه ونظام البطاقات نفسه ومهمة واحدة لكل صفحة: الزبائن مع مستوياتهم وفلتر “معرّضون للمغادرة”، والرسائل الست التي تشغّل الحلقة عبر واتساب، وحملات تقترح عرضًا لأبطأ أيام الأسبوع.
النماذج التفاعلية: الموقع وأول عشر دقائق لصاحب المطعم
ابدأ بنموذج Figma الكامل بشكل حي. على سطح المكتب يبدأ من الصفحة التعريفية مرورًا بالتسجيل وخطوات البدء الأربع حتى كل صفحات تطبيق المالك، مع النوافذ والتنبيهات والوضع الداكن. وتطبيق الجوال يبدأ من شاشة البداية حتى آخر تبويب. بلا طرق مسدودة.


تفضّل نظرة سريعة؟ في الأسفل الشاشات الأساسية واحدة تلو الأخرى مع الملاحظات.
تنقّل بين شاشات المسار من نموذج Figma: التسجيل، واختيار الباقة، وربط واتساب، ثم معالجة شكوى بشكل خاص.
1 / 10 شاشة البداية
اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.
1 / 6 الصفحة التعريفية
اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.
ما تعلّمته
لم يكن القرار الأكبر بصريًا، بل كان: أين يعيش المنتج؟ وضع تجربة الضيف داخل واتساب أزال جدار التطبيق الذي يصطدم به المنافسان كلاهما، وجعل السؤال عن التجربة أشبه بصديق يطمئن، لا باستبيان.
- الخطوة التالية: جلسات اختبار مع أصحاب مقاهٍ في عمّان، لقياس الوقت حتى أول مسح للرمز، والوقت اللازم لحل الشكوى.
- ثم: نسخة عربية كاملة من اليمين لليسار، وتيليجرام أو الرسائل النصية كقنوات بديلة.

















