NeatInvoice هو منتج SaaS قمت بإنشائه في Harun Studio: مساحة عمل لإعداد الفواتير للعاملين المستقلين والفرق الصغيرة في السوق العالمية. إنه ليس منشئ ملفات PDF لمرة واحدة، وليس برنامج محاسبة مؤسسي، كما أنه ليس لوحة معلومات عامة تعمل بالذكاء الاصطناعي.
إذا كنت قد صممت منتج ويب من قبل، فمن المحتمل أنك تعرف هذا الشعور: تستمر إضافة الميزات، ولكن بدون تحديد موضع واضح، يبدأ المنتج في الظهور مثل كل شيء آخر موجود بالفعل في السوق.
مع NeatInvoice، بدأت من السؤال المعاكس: ما هي المشكلة التي لا تزال أدوات الفواتير الحالية لا تحلها بشكل جيد بما فيه الكفاية؟
في هذه المقالة، سأشرح كيفية تصميم المنتج: المشكلة التي أردت حلها، والموضع الذي اخترته، وقرارات التصميم، والميزات التي قمت بإنشائها ولماذا، والنهج الفني وراء ذلك.
وقبل الخوض في التفاصيل، إليك النقاط الأساسية التي أود التأكيد عليها:
هل ترغب في إنشاء منتج SaaS بنهج مماثل؟ تحدث عنها في استشارة مجانية.
قبل كتابة سطر واحد من التعليمات البرمجية، قمت بتعيين ثلاث شكاوى استمرت في الظهور في سوق فواتير المستقلين:
| شكوى | لماذا يهم |
|---|---|
| ”لقد أرسلت الفاتورة منذ ثلاثة أيام. هل فتحوها أصلاً؟“ | بعد خروج الفاتورة لا توجد إشارة إطلاقا |
| ”لا بد لي من تذكير العملاء يدويًا في كل مرة يتأخر فيها الدفع.” | المتابعات متكررة وليست آلية |
| ”تستغرق أداة تحرير الفواتير وقتًا أطول في التعلم من عملي الفعلي.” | التنقل معقد للغاية؛ تضيع قيمة المنتج في التعقيد |
وراء كل هذه الأمور الثلاثة يوجد نمط أعمق: سير عمل إعداد الفواتير المستقل مجزأ. ملفات PDF في مكان واحد، والتتبع في جدول بيانات، والتذكيرات في التقويم اليدوي. لا يوجد منزل فواتير واحد يربطها معًا.
غالبًا ما يقع المنافسون الحاليون في نقيضين: بسيط جدًا (مولد PDF بدون تتبع، ولا حالة، ولا نظرة عامة) أو معقد جدًا (برنامج محاسبة المؤسسة مع فترة تأهيل طويلة). يهدف NeatInvoice إلى سد الفجوة في المنتصف.
القرار الأكثر أهمية لتحديد الموقع في بداية المشروع: تبيع الصفحة الرئيسية مساحة عمل، وليس مولد PDF.
العلامة التجارية (neatinvoice.app) | طريق منفصل (/invoice-generator) | |
|---|---|---|
| الدور | الهوية الأساسية: مساحة عمل الفواتير | مسار تحسين محركات البحث: ملف PDF سريع بدون حساب |
| الحث على اتخاذ إجراء | ابدأ مساحة عمل مجانية | توليد قوات الدفاع الشعبي |
| الهدف | المنزل الفواتير طويلة الأجل | نقطة الدخول، تحويل للتسجيل |
لقد وجهت عمدًا النسخة الرئيسية للعلامة التجارية إلى زاوية نادرًا ما يلمسها المنافسون:
تم إرسال فاتورتك. ماذا الآن؟
ليس “مولد فاتورة مجاني في 30 ثانية.” المشكلة ليست في إنشاء فاتورة. الكثير من الأدوات تفعل ذلك بالفعل. المشكلة هي ما يحدث بعد إرسالها: عدم معرفة ما إذا كان يجب المتابعة أم الانتظار، وعدم وجود مكان واحد لرؤية كل شيء لم يتم دفعه بعد.
| فاتورة نظيفة | البدائل الشائعة |
|---|---|
| مساحة عمل مجانية للأبد | نسخة تجريبية مجانية مدتها من 7 إلى 14 يومًا، ثم نظام حظر الاشتراك غير المدفوع |
| نظرة عامة على التمويل + يحتاج إلى الاهتمام بالمجان | نظرة عامة فقط على المستويات باهظة الثمن |
| رابط مباشر + تتبع المشاهدة | مرفق PDF بدون تتبع مفتوح |
| محرر محلي أول | السحابة فقط، تأخير عند عدم الاتصال بالإنترنت |
| واجهة مستخدم هادئة من الدرجة المالية | قوالب مشغولة / جمالية لوحة القيادة بالذكاء الاصطناعي |
| حدود صادقة (25 فاتورة/شهر مجانًا) | تسويق مضلل “غير محدود” |
ما لا أدعيه عمدًا: “الفوترة المدعومة بالذكاء الاصطناعي”، و”المحاسبة الشاملة”، و”تخطيط موارد المؤسسات على مستوى المؤسسة”.
المستقلون والفرق الصغيرة (من 1 إلى 3 أشخاص) في السوق العالمية: المصممون والمطورون والاستشاريون والكتاب. واجهة المستخدم والنسخة للمنتج باللغة الإنجليزية لأن السوق عالمي.
المهمة التي يجب القيام بها لقد صممت من أجل:
يتجنب NeatInvoice عمدًا جماليات SaaS العامة: التدرجات الأرجوانية، والبطاقات الزجاجية، والشارات “المدعومة بالذكاء الاصطناعي” في كل مكان.
داخليًا، أطلق على المرجع المرئي اسم “المكتب الموثوق به”: غلاف دافئ باللون الأبيض الفاتح، ووثيقة الفاتورة في المنتصف كالبطل، والكروم الهادئ. اللكنة النيلية فقط للإشارات المشاركة والمرسلة والمعروضة. الهدف بسيط: تبدو الأرقام موثوقة، ويظل مستند الفاتورة هو البطل، وتبدو واجهة المستخدم الشاملة مألوفة مثل المنتجات المالية (Stripe، Linear، Mercury).
أهم قرارات هندسة المعلومات لتجربة المستخدم:
| شاشة | الطريق | وظيفة |
|---|---|---|
| المحرر | /workspace | إنشاء وتحرير ومعاينة الفواتير |
| نظرة عامة | /workspace/overview | نبض التمويل، يحتاج إلى اهتمام، اتجاه الإيرادات |
يحتوي شريط التنقل في مساحة العمل على علامتي تبويب فقط: المحرر ونظرة عامة. النظرة العامة ليست لوحة منزلق. إنه طريق الوجهة الخاص به.
السبب العملي هو أن الموظفين المستقلين الذين يقومون بإصدار الفواتير يتنقلون بانتظام بين “تحرير الفاتورة” و”التحقق من ما لم يتم دفعه بعد”. هذه سياقات مختلفة بما يكفي لشاشات منفصلة، دون الحاجة إلى العشرات من عناصر القائمة.
مباشر، وبسيط، من الدرجة المالية. تشرح النسخة ما سيحدث بعد ذلك: الحفظ والنشر والإرسال والتذكير. لا صيغ التفوق بدء التشغيل. لا تتم إعادة صياغة مصطلحات المنتج الرسمية (مساحة العمل، نظرة عامة، الرابط المباشر، يحتاج إلى اهتمام) بشكل عرضي.
يستخدم المحرر تخطيطًا منقسمًا على سطح المكتب: مستند فاتورة بحجم 760 بكسل على اليسار، ومفتش بحجم 380 بكسل على اليمين. يحتوي الشريط الجانبي على مكتبات للفواتير والجداول المتكررة والعملاء والعناصر. توجد معاينة العميل، وهي طريقة عرض ذات عمود واحد تمامًا كما يراها العميل على الرابط المباشر. دعم أكثر من 40 عملة و12 لغة محلية لملصقات الفواتير. يقوم PDF بتصدير جانب العميل. دورة حياة الحالة: مسودة ← مرسلة ← معروضة ← مدفوعة، مع “متأخرة” و”ملغاة” كحالات طرفية.
لقد اخترت النهج المحلي أولاً لأن المحرر يعمل يوميًا ويجب أن يشعر بالاستجابة. لا تنتظر التعديلات على الشبكة؛ تعمل المزامنة السحابية في الخلفية بمؤشرات صادقة (خمول، حفظ، حفظ، خطأ). الضيوف على /invoice-generator يحفظون في المتصفح؛ تتم مزامنة المستخدمين الذين قاموا بتسجيل الدخول عبر Supabase. تقلل معاينة العميل من مخاطر ظهور الفاتورة بشكل مختلف عندما تصل إلى العميل. تعمل مكتبات العملاء والعناصر على تسريع الفواتير المتكررة دون إعادة إدخال البيانات.
الميزات الأساسية هنا:
/inv/[id]) كصفحة للقراءة فقط للعملاء الذين ليس لديهم حسابلا يمكن تتبع مرفقات PDF. الرابط المباشر هو العامل الرئيسي الذي يميزه، وهو إجابة مباشرة على “هل قاموا بفتحه؟”
هناك شيء واحد يحتاج المستخدمون إلى فهمه: نشر رابط مباشر ليس مثل حالة الإرسال. يمكن نشر المسودات لمعاينة العميل؛ تتطلب التذكيرات الآلية (Pro) حالة الإرسال أو التأخير. إن إبقاء هذه المفاهيم منفصلة يمنع التوقعات الخاطئة.
في الخطة المجانية، يقوم المستخدمون بنسخ رابط مباشر ومشاركته عبر البريد الإلكتروني أو Slack أو أي قناة يستخدمونها بالفعل. يضيف Pro تسليم البريد الإلكتروني داخل التطبيق باستخدام الرابط المباشر في النص الأساسي، وليس مرفق PDF، بالإضافة إلى تذكيرات الدفع المجدولة بعد 3 أو 7 أو 14 يومًا من تاريخ الاستحقاق، مرة واحدة لكل فاتورة.
يبقى التطبيق المجاني مفيدًا بدون البريد الإلكتروني داخل التطبيق؛ نسخ الرابط يكفي لمعظم حالات الاستخدام. يعمل Pro على تحقيق الدخل من التسليم والأتمتة، وليس زخرفة واجهة المستخدم. إن تذكيرًا واحدًا لكل فاتورة مقصود: يكفي للدفع، وليس كافيًا للشعور بالبريد العشوائي.
تظهر نظرة عامة:
يمكن لكل صف الارتباط العميق بالمحرر (?invoice=id) أو مشاركة الهدف (?share=1).
وهذا ما يجعل المنتج يبدو وكأنه مساحة عمل، وليس مجرد محرر فاتورة. تم تصميم العناصر التي تحتاج إلى الاهتمام حتى تتمكن من معرفة الخطوة التالية، وليس مجرد موجز إعلام عام.
دفتر أستاذ لجميع الفواتير مع عوامل تصفية للحالة والعميل والشيخوخة والبحث، متصل من نظرة عامة دون تبديل التطبيقات. نظرة عامة هي للملخص اليومي. النشاط مخصص للتدقيق والبحث الأعمق.
يكمل الرسم البياني المفوتر مقابل المدفوع بمرور الوقت النظرة العامة دون ازدحامها. يمكن للعاملين لحسابهم الخاص رؤية أنماط التدفق النقدي دون جدول بيانات منفصل.
كل مساحة عمل لها هوية المرسل الخاصة بها: الشعار، وتفاصيل المرسل، وحقول الدفع، والبادئة، والعملة، واللغة الافتراضية. مجانًا يحصل على مساحة عمل واحدة؛ Pro حتى 10. قم بالتبديل من شريط التنقل؛ يتم تحديد نطاق المكتبات والمقاييس في مساحة العمل النشطة.
يدير العديد من المستقلين أكثر من اسم تجاري واحد. تعمل مساحات العمل المحددة على منع اختلاط بيانات العميل والفواتير عبر العلامات التجارية.
تعمل المخططات الموجودة على القماش بمثابة جداول رئيسية. تبدأ الجداول الزمنية الجديدة بالتوقف مؤقتًا حتى يتم تنشيط المستخدم بعد اكتمال قائمة التحقق. فواتير التكرار هي فواتير فرعية؛ تحرير حدث لا يغير المخطط.
تعتبر الخدم الشهرية حالة استخدام احترافية واضحة. يؤدي فصل المخطط عن الحدوث إلى منع التعديلات المتكررة غير المقصودة من كسر الجدول الرئيسي.
يوفر مسار /invoice-generator ملف PDF داخل المتصفح بدون تسجيل، و10 فواتير شهريًا محليًا. بعد تسجيل الدخول، يمكن دمج المسودات في مساحة العمل السحابية.
هذه نقطة دخول لتحسين محركات البحث (SEO) وإعداد خفيف. ليست هوية العلامة التجارية، بل هي جسر إلى مساحة العمل الكاملة.
| طبقة | الاختيار | السبب |
|---|---|---|
| الواجهة الأمامية | جهاز توجيه تطبيق Next.js، React، Tailwind CSS v4 | التوجيه القائم على الملفات، ومكونات الخادم، والنظام البيئي الناضج لـ SaaS |
| قاعدة البيانات والمصادقة | Supabase (Postgres، Auth، Storage، RLS) | مصادقة + البيانات العلائقية دون إنشاء واجهة خلفية من الصفر |
| استضافة | فيرسيل | نشر سريع، وتكامل GitHub، وصديق للبيئة |
| البريد الإلكتروني | إعادة الإرسال | تسليم الفاتورة والتذكير من التطبيق |
| الفواتير | بولار.ش | الاشتراك الاحترافي (التأسيسي والمعياري) |
| قوات الدفاع الشعبي | جيل من جانب العميل | لا توجد تكلفة خادم لكل عملية تصدير |
يمر البريد الإلكتروني حاليًا عبر إعادة الإرسال؛ قد أفكر في Unosend لاحقًا لتحقيق كفاءة التكلفة مع نمو حجم الإرسال.
تم تصميم NeatInvoice بمساعدة كبيرة من الذكاء الاصطناعي، وهو نمط استخدمته من قبل على ImageTools.pro وPenasihat Hosting. المؤشر للتطوير الأساسي، Codex للتعليمات البرمجية المتكررة وإعادة البناء، Antigravity لتكرار واجهة المستخدم الأمامية.
أدى الذكاء الاصطناعي إلى تسريع تكرار واجهة المستخدم والنموذج المعياري، لكن قرارات المنتج (مخطط البيانات، ودورة حياة الفاتورة، والنشر مقابل الإرسال، وتحقيق الدخل) ظلت متعمدة ويدوية.
تم تصميم NeatInvoice حول مساحة عمل مفيدة أولاً، مع توفر إمكانات التسليم والأتمتة المتقدمة مع تطور المنتج. تهدف قرارات المنتج إلى دعم سير عمل الفوترة الحقيقية بدلاً من إنشاء عرض توضيحي محدود بشكل مصطنع.
تعد النظرة العامة وتتبع العرض بمثابة قرارات تحديد الموقع، وليست ميزات مقفلة عمدًا لفرض الترقيات.
** تحديد الموضع أكثر أهمية من عدد الميزات. ** يفوز برنامج NeatInvoice بفضل الوضوح بعد الإرسال، وليس عند تجميع الميزات.
علامة تجارية منفصلة عن مسار تحسين محركات البحث. /invoice-generator ومساحة العمل منتجان في مجال واحد. ويجب ألا تكون هوياتهم ضبابية.
**شاشتان تكفيان للفواتير اليومية. ** المزيد من التنقل لا يعني تلقائيًا الأفضل.
النشر والإرسال مفهومان مختلفان. يجب تصميمهما وتوصيلهما بشكل واضح لأنهما يؤثران بشكل مباشر على التذكير وتتبع التوقعات.
الأمر المحلي أولاً أمر منطقي بالنسبة للمحرر اليومي. تعد استجابة واجهة المستخدم أكثر أهمية من المزامنة القوية في الوقت الفعلي.
الطبقة المجانية الصادقة تبني الثقة. لقد سئم سوق الفواتير بالفعل من إرهاق التجارب.
التصميم الهادئ هو ميزة. بالنسبة للمستندات المالية، الثقة تأتي من ضبط النفس، وليس من الزخرفة.
يوضح NeatInvoice كيف أتعامل مع تصميمات منتجات SaaS في Harun Studio: البدء من مشكلة واضحة، والتمسك بالموضع بإحكام، والحفاظ على انضباط التصميم، ثم التنفيذ تقنيًا دون الإفراط في الهندسة.
إذا كانت لديك فكرة لمنتج ويب أو نظام أساسي داخلي في ذهنك، فيمكننا مساعدتك بدءًا من تدقيق الاحتياجات وحتى التنفيذ:
المنتج المباشر: neatinvoice.app. خريطة الطريق العامة على neatinvoice.app/roadmap.
مؤسس Harun Studio ومطور مواقع ومدوّن ومراجع لاستضافات المواقع. يساعد أصحاب الأعمال على بناء مواقع أكثر صحة من خلال التصميم والتطوير والصيانة طويلة الأمد.
اكتشف رؤى أخرى ترتبط ارتباطًا مباشرًا بهذا الموضوع.
دراسات الحالة تجربتي في إنشاء ImageTools.pro، وهو تطبيق لمعالجة الصور عبر الإنترنت مدعوم بواسطة Next.js وSharp.js وShadcn UI، وكيف غيّر الذكاء الاصطناعي الطريقة التي أقوم بها بإنشاء تطبيقات الويب.
اقرأ المقال
دراسات الحالة دراسة حالة حول ترحيل Penasihat Hosting: من إعداد WordPress الذي كان لا يزال قويًا بالفعل إلى Next.js 16 + PostgreSQL للحصول على مرونة طويلة المدى ونظام إدارة محتوى مخصص وصفحات أدوات وأساس منتج أكثر قابلية للتطوير.
اقرأ المقال
لقد قمت بتحويل موقع HTML صممه فريق MSI Freight إلى موقع WordPress مخصص بنفس التصميم، و13 صفحة، و32 مقالة مُرحَّلة، و346 قاعدة إعادة توجيه.
اقرأ المقال