متاح للعمل الوقت الآن في عمّان:
English

01 // منصة SaaS للأعمال · ويب وجوال

Rawaa

أداة ولاء وسمعة تعمل عبر واتساب، تساعد المطاعم على الاحتفاظ بالضيوف الذين كسبتهم.

الدور
مصمّم منفرد: البحث وتجربة المستخدم والواجهات ونظام التصميم والنموذج
المشروع
فكرة منتج بمبادرة شخصية
المنصة
تطبيق ويب، تطبيق جوال، ومسارات رسائل واتساب
الأدوات
Figma, FigJam, UX Pilot, Figma Make

المشكلة

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

ما قمت به

بحث مكتبي حول ثلاثة أنواع من المستخدمين، وخمسة مبادئ تصميم، و46 شاشة هيكلية، ونظام تصميم، ونموذج تفاعلي للمنتج كاملًا.

النتيجة

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

Rawaa

السياق

روّاء فكرة منصة SaaS للمطاعم والمقاهي في الأردن. بدل أن نطلب من الضيف تنزيل تطبيق ولاء جديد، تبدأ التجربة برمز QR على الطاولة وتكمل عبر واتساب: نقاط عند العودة، وسؤال خاص عن التجربة بعد الزيارة، وتنبيه فوري لصاحب المطعم عند حدوث أي مشكلة، قبل أن تتحول إلى تقييم علني.

الموقع التعريفي: حلقة واتساب تظهر في الواجهة، ثم الميزات وآلية العمل والأسعار.

البحث

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

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

وأظهر تحليل SWOT لتطبيقَي الولاء المعروفَين لدى المطاعم الأردنية الفجوة بوضوح: كلاهما جيد في المكافآت، لكن لا أحد منهما يساعد صاحب المطعم حين يغادر الضيف غير راضٍ، وكلاهما يبدأ بتنزيل تطبيق.

شخصية افتراضية مبنية على البحث المكتبي: أحمد، صاحب مقهى مختص في عمّان، يقلقه أن ضيوف الحملات المدفوعة لا يعودون.

خمسة مبادئ للتصميم

تحوّلت كل فرضية إلى قاعدة، وكل شاشة بعدها رُوجعت على ضوء هذه القواعد الخمس.

  • بلا عوائق

    الضيف لا ينزّل أي شيء. مسح رمز QR ثم واتساب.

  • الساعة الذهبية

    يُطلب التقييم خلال ساعتين من الزيارة، والتجربة ما زالت حاضرة.

  • الخصوصية أولًا

    الضيف غير الراضي يصل لصاحب المطعم قبل أن يصل إلى خرائط Google.

  • نظرة واحدة

    لوحة التحكم تجيب عن “هل ضيوفي راضون، ومن هم أهم زبائني؟” دون رسوم معقدة.

  • شرح بعشر كلمات

    كل ما يقوله الموظف يتسع لجملة قصيرة: “امسح الرمز واجمع نقاطك!”

الهيكلة والهياكل السلكية

رسمت حلقة الضيف قبل أي شاشة: مسح الرمز، ثم رسالة ترحيب، ثم طلب تقييم بعد ساعتين، ثم إما دعوة لتقييم على Google للضيف الراضي، أو شكوى خاصة تصل لصاحب المطعم، وعرض لاستعادة الضيف إن لم يعد خلال أسبوعين. بعدها صمّمت 46 شاشة هيكلية بالرمادي: الموقع، والتسجيل، وتطبيق صاحب المطعم، وتطبيق الجوال. وتحوّلت الهياكل الـ46 إلى 62 شاشة نهائية بعد إضافة النوافذ والحالات وتطبيق الجوال كاملًا.

خريطة الموقع: منتج واحد بثلاث واجهات
روّاء
  • الموقع والتسجيل7 شاشة
    • الصفحة التعريفية
    • إنشاء حساب
    • تسجيل الدخول
    • خطوات البدء
      • 1 · الباقة
      • 2 · الدفع
      • 3 · الأدوات
      • 4 · ربط واتساب
  • تطبيق المالك (سطح المكتب)10 شاشة
    • لوحة التحكم
    • الزبائن
    • المكافآت
    • الرسائل التلقائية
    • مركز الطوارئ
    • التسويق
    • التقارير
    • رموز QR
    • الدعم
    • الإعدادات
  • النوافذ المنبثقة6 شاشة
    • إضافة زبون
    • إنشاء رمز QR
    • حملة جديدة
    • الرد
    • تعديل رسالة
    • مكافأة جديدة
  • تطبيق الجوال20 شاشة
    • البدء
      • شاشة البداية
      • الترحيب
      • التسجيل / الدخول
      • الباقة والدفع
      • الأدوات
      • ربط واتساب
      • جاهز
    • الرئيسية
    • الزبائن
      • تفاصيل الزبون
    • الشكاوى
      • نافذة الرد
    • التقارير
    • المزيد
      • المكافآت
      • الرسائل
      • التسويق
      • رموز QR
      • الإعدادات
      • الدعم

عشرة أقسام في الشريط الجانبي على سطح المكتب، وخمسة تبويبات على الجوال: الرئيسية والزبائن والشكاوى والتقارير والمزيد.

مسارات المستخدم
  • البداية
  • النهاية
  • شاشة
  • إجراء النظام
  • قرار

المالك: من الموقع إلى لوحة تحكم جاهزة

  1. البداية: يزور الصفحة التعريفية
  2. شاشة: إنشاء حساب
  3. شاشة: اختيار الباقة
  4. شاشة: الدفع (تجربة 14 يومًا)
  5. شاشة: اختيار الأدوات
  6. شاشة: ربط واتساب للأعمال
  7. شاشة: جاهز: اطبع أول رمز QR
  8. النهاية: لوحة التحكم

حلقة الضيف: زيارة واحدة ونتيجتان

  1. البداية: الضيف يمسح رمز QR على الطاولة
  2. إجراء النظام: رسالة ترحيب على واتساب وإضافة النقاط
  3. إجراء النظام: طلب تقييم بعد ساعتين
  4. قرار: هل كانت الزيارة جيدة؟
    • نعم: طلب تقييم على Google
    • لا: شكوى خاصة تصل إلى مركز الطوارئ
  5. شاشة: المالك يرد بشكل خاص عبر واتساب
  6. النهاية: إن لم يعد خلال أسبوعين: عرض لاستعادته
هيكل سلكي: لوحة صاحب المطعم
هيكل سلكي: مركز الطوارئ للشكاوى
  • هيكل الجوال: الرئيسية
  • هيكل الجوال: الشكاوى

تطبيق صاحب المطعم

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

لوحة التحكم: أربعة أرقام، واختصارات سريعة، وآخر الضيوف، ونصائح قصيرة.

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

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

تطبيق الجوال

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

  • الرئيسية
  • الشكاوى
  • رد خاص
  • التقارير

نظام التصميم

يستعير اللون الأخضر ثقة القناة التي يستخدمها الضيوف أصلًا، ويُحفظ الأصفر للإجراء الأهم في كل شاشة. فُحص تباين كل زوج ألوان، ويحمل خط Lexend الشاشات الإنجليزية وخط Readex Pro أنماط النص العربي، بسلّم أحجام واحد.

من Figma مبني بأنماط الألوان والنصوص في Figma. مأخوذة من ملف Figma الخاص بروّاء: 50 نمط لون (لكلٍّ منها حالتا :hover و:active)، و27 نمط نص عربي، و1,630 طبقة نص في شاشات النموذج.

النظام قيد الاستخدام

الألوان

يُحسب التباين مع الأبيض أو أغمق لون نص، أيهما أعلى. اضغط على أي لون لنسخ قيمته.

الأخضر الأساسي

الأصفر المميّز

المحتوى

الحالة

الخلفية

الخطوط

  • Lexendكل الشاشات، الإنجليزية والأرقام
  • Readex Proأنماط النص العربي: Regular وMedium وSemiBold

سلّم الخطوط

  1. Display · 56 · 700تصميم يفهمه الناس
  2. H1 · 44 · 700تصميم يفهمه الناس
  3. H2 · 28 · 600تصميم يفهمه الناس
  4. H3 · 20 · 600تصميم يفهمه الناس
  5. Body · 16 · 400تصميم يفهمه الناس
  6. UI · 14 · 500تصميم يفهمه الناس
  7. Caption · 12 · 400تصميم يفهمه الناس

الأحجام الأكثر استخدامًا في شاشات النموذج.

استدارة الزوايا

  • 8
  • 12
  • 16
  • 20
  • pill
المكوّنات وحالاتها
سلّم الخطوط

كيف استخدمت الذكاء الاصطناعي

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

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

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

الزبائن: المستويات وآخر زيارة وفلتر “معرّضون للمغادرة”، وكل ضيف على بُعد نقرة من واتساب.
الرسائل التلقائية، ولكلٍّ منها معاينة حيّة على واتساب.
التسويق: يكتشف روّاء أبطأ يوم ويقترح عرضًا مناسبًا.

النماذج التفاعلية: الموقع وأول عشر دقائق لصاحب المطعم

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

مباشر من Figmaروّاء، النموذج الكامل: الموقع والتسجيل وتطبيق المالك

يعمل داخل Figma: اضغط على العناصر كأنه المنتج الحقيقي. حجم التحميل تقريبًا 2–4 ميغابايت. افتحه بملء الشاشة في Figma (تبويب جديد)

تفضّل نظرة سريعة؟ في الأسفل الشاشات الأساسية واحدة تلو الأخرى مع الملاحظات.

تنقّل بين شاشات المسار من نموذج Figma: التسجيل، واختيار الباقة، وربط واتساب، ثم معالجة شكوى بشكل خاص.

  1. شاشة البداية
  2. الترحيب: ولاء بلا تطبيق
  3. التسجيل في أربعة حقول
  4. اختيار الباقة (تجربة 14 يومًا)
  5. ربط واتساب للأعمال
  6. جاهز: اطبع أول رمز QR
  7. الرئيسية: اليوم بنظرة
  8. تصل شكوى بنجمة واحدة
  9. رد خاص عبر واتساب
  10. تقارير الأسبوع

1 / 10 شاشة البداية

اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.

  1. الصفحة التعريفية
  2. التسجيل: ربط واتساب
  3. لوحة التحكم
  4. مركز الطوارئ
  5. الزبائن
  6. التقارير

1 / 6 الصفحة التعريفية

اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.

ما تعلّمته

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

  • الخطوة التالية: جلسات اختبار مع أصحاب مقاهٍ في عمّان، لقياس الوقت حتى أول مسح للرمز، والوقت اللازم لحل الشكوى.
  • ثم: نسخة عربية كاملة من اليمين لليسار، وتيليجرام أو الرسائل النصية كقنوات بديلة.
اختصارات لوحة المفاتيح
اختصارات المفتاح الواحد

أوقفها إن كنت تستخدم الإدخال الصوتي أو كانت تزعجك أثناء التصفح.