Money management app UI/UX

Aura — Arabic money management app with a smart assistant

Aura is a money management app in Arabic. Nahj team members designed its UI/UX in Figma: a style guide, wallets and a daily budget, a smart assistant that logs expenses, a receipt scanner and settings, all right to left.

  • Outcome: Arabic app UI and style guide

Technologies: UI/UX Design, Mobile App Design, Figma, Design System, Style Guide, Arabic RTL UI, FinTech, Personal Finance, Chat UI

Project links: Watch the project video

The Challenge

Aura is a money management app in Arabic. It brings wallets, bank accounts, goals, assets, debts and installments into one app, with a smart assistant that logs an expense from one typed or spoken sentence. The design needed to keep all of that calm and easy to scan on a phone.

Much of the work was density and direction: many balances and figures on a small screen, laid out right to left with an Arabic typeface; a chat-style assistant next to classic forms; a camera flow for receipts; and clear warnings before anything is deleted for good.

This case study shows individual work by Nahj team members, delivered across various roles and companies. It was not a Nahj studio project.

Our Approach

  1. Style guide — Style Guide and Icons pages first: a purple palette, IBM Plex Sans Arabic, and buttons, fields, cards, checks and the tab bar in their states.
  2. Navigation — A tab bar with a central add button, and a side menu for goals, assets, debts, installments, documents, reports and settings.
  3. Flows by section — Screens laid out in numbered sections on the Design page, from Home and the history log to the settings flow.
  4. Arabic, right to left — Every screen written and laid out in Arabic, right to left.
  5. States and edge cases — Error and disabled states for fields, password rules shown with check marks, and a confirmation that says what deleting a wallet removes.

Core Features

  • Wallets at a glance — Personal and work wallets on the home screen, and a total balance with its change this month on the wallets page.
  • Daily spending limit — A budget card shows the daily limit and the total spent, with a shortcut to edit the budget.
  • Smart assistant — Type or speak an expense and it is logged with its amount, category and subcategory, ready to edit or undo.
  • Smart insights — Cards that point to something to act on, such as an uncategorised electricity bill.
  • Receipt scanner — Scan a receipt or pick it from the gallery, add an optional note, and find it later in a searchable library by date.
  • Goals, assets and debts — Progress rings for goals, gold and silver holdings with their change, plus debts and installments.
  • Wallets for every purpose — Create a wallet for a purpose, such as travel or a shared flat, and invite someone to it with a code.
  • Currency and security — Six currencies to choose from for every balance and report, and a password change with clear rules.

تصميم UI/UX لتطبيق إدارة أموال

Aura — تطبيق عربي لإدارة الأموال بمساعد ذكي

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

  • النتيجة: واجهة التطبيق ودليل الأنماط بالعربية

التقنيات المستخدمة: UI/UX Design، Mobile App Design، Figma، Design System، Style Guide، Arabic RTL UI، FinTech، Personal Finance، Chat UI

روابط المشروع: شاهد فيديو المشروع

التحدي

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

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

يعرض هذا المشروع عملًا فرديًا لأعضاء من فريق نهج، أُنجز في أدوار وشركات مختلفة، وليس مشروعًا لاستوديو نهج.

كيف عملنا

  1. دليل الأنماط — صفحتا دليل الأنماط والأيقونات أولًا: ألوان بنفسجية، وخط IBM Plex Sans Arabic، والأزرار والحقول والبطاقات وعناصر الاختيار وشريط التنقل بحالاتها.
  2. التنقل — شريط تنقل بزر إضافة في المنتصف، وقائمة جانبية للأهداف والأصول والديون والأقساط والمستندات والتقارير والإعدادات.
  3. مسارات مقسّمة — ترتيب الشاشات في أقسام مرقّمة على صفحة التصميم، من الرئيسية والسجل إلى مسار الإعدادات.
  4. عربي من اليمين لليسار — كل الشاشات مكتوبة ومصممة بالعربية، من اليمين لليسار.
  5. الحالات والاستثناءات — حالات الخطأ والتعطيل للحقول، وشروط كلمة المرور بعلامات تحقق، وتأكيد يوضّح ما سيُحذف مع المحفظة قبل حذفها.

الميزات الأساسية

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

Previous Project: Inco-Tech — Industrial website for an electrical panel builder · Next Project: Axcieve — AI-powered sales platform: website and app · Back to Portfolio · Start a Conversation