Mademoiselle: rebuilt from the ground up.Mademoiselle: أُعيد بناؤه من الأساس.

It is a commercial product at Santa Media, and I was brought in to get it to production. I chose to redesign it before rebuilding it.هو منتج تجاري في Santa Media، واستُقدمتُ لأوصله إلى الإنتاج. واخترتُ أن أعيد تصميمه قبل أن أعيد بناءه.

Roleالدور

Lead engineer, and the designerمهندسة رئيسية، والمصمّمة

Timelineالإطار الزمني

2026 to now2026 حتى الآن

Platformالمنصّة

Flutter · iOS + Android

Audienceالجمهور

Arabic-speaking, bilingualناطق بالعربية، ثنائي اللغة

Teamالفريق

Me, plus an engineer on the AI moduleأنا، ومهندس على وحدة الذكاء

Scopeالنطاق

Redesign, design system, native rewriteإعادة تصميم، ونظام تصميم، وإعادة كتابة أصلية

Mademoiselle had stalled with no clear path forward. FlutterFlow output is hard to extend and hard to maintain once an app grows, and the original interface had never really been designed for the Arabic-speaking audience actually using it.كان Mademoiselle متعثّراً دون مسار واضح للأمام. مُخرَجات FlutterFlow صعبة التوسعة وصعبة الصيانة حين يكبر التطبيق، والواجهة الأصلية لم تُصمَّم فعلاً للجمهور العربي الذي يستخدمها.

The team needed someone to decide what to keep, what to rewrite, and how to leave the product in a state where the next feature would not mean starting over.احتاج الفريق من يقرّر ما يُبقيه، وما يعيد كتابته، وكيف يترك المنتج في حالٍ لا تعني فيه الميزة التالية البدء من جديد.

I audited the prototype against where the product had to go: more screens, an AI module, continuous iteration, and an Arabic experience that felt native. The FlutterFlow base failed on all four. Every new screen added maintenance cost, and RTL had clearly been handled at the end.دقّقتُ النموذج مقابل وجهة المنتج المطلوبة: شاشات أكثر، ووحدة ذكاء اصطناعي، وتكرار مستمرّ، وتجربة عربية تبدو أصيلة. فشلت قاعدة FlutterFlow في الأربعة جميعاً. كل شاشة جديدة كانت تضيف كلفة صيانة، وكان واضحاً أن اليمين لليسار عُومل في النهاية.

I treated the rewrite as the one chance to set the product up to grow. Build the system first, and every screen after it, including the AI module being built in parallel, inherits it for free.تعاملتُ مع إعادة الكتابة كالفرصة الوحيدة لتهيئة المنتج للنمو. ابنِ النظام أولاً، فترثه كل شاشة بعده بلا مقابل، ومنها وحدة الذكاء التي كانت تُبنى بالتوازي.

Goalالهدف

An Arabic-first product that stays maintainable as it growsمنتج عربي أولاً يبقى قابلاً للصيانة وهو ينمو

Hypothesisالفرضية

Starting from a system beats patching FlutterFlowالبدء من نظام يتفوّق على ترقيع FlutterFlow

Priorityالأولوية

Token grammar before screensقواعد الرموز قبل الشاشات

Tradeoffالمفاضلة

A slower start, and no design debt to pay laterبداية أبطأ، ولا دَين تصميمي يُسدَّد لاحقاً

Building the design system before the screens was deliberate. A system assembled after the screens are finished is a retrofit, and it never quite fits. Built first, it becomes the grammar everything else gets written in.بناء نظام التصميم قبل الشاشات كان مقصوداً. النظام الذي يُجمَع بعد انتهاء الشاشات ترقيعٌ لاحق، ولا يلائم تماماً أبداً. أما المبنيّ أولاً فيصير القواعد التي يُكتَب بها كل شيء بعده.

01 / 06

Beauty, from the front door.الجمال، من الباب الأول.

Home opens on her city, with a search across salons, services and looks. Saved looks, offers and a review prompt after each visit sit underneath.تفتح الرئيسية على مدينتها، وفيها بحث في الصالونات والخدمات والإطلالات. وتحتها الإطلالات المحفوظة والعروض ودعوة لتقييم كل زيارة.

Text variantsخيارات النصّ

17

Button variantsخيارات الأزرار

9, every state9، بكل حالة

Themesالسمات

Light · Dark · Brandفاتح · داكن · العلامة

Directionالاتجاه

RTL + LTR

Scriptsالخطوط

Arabic · Latinعربي · لاتيني

Tokensالرموز

Semantic, never a raw hexدلالية، ولا hex خام أبداً

The nine button variants cover the whole interaction matrix: primary, secondary, ghost, destructive and icon, each with default, hover, pressed, disabled and loading states, in Arabic and Latin type, across all three themes. Every state was designed before any state was coded.تغطّي خيارات الأزرار التسعة مصفوفة التفاعل كاملة: أساسي وثانوي وشبحي وتدميري وأيقونة، لكل واحد حالات افتراضية ومرور وضغط وتعطيل وتحميل، بالخطّين العربي واللاتيني، وعبر السمات الثلاث. وكل حالة صُمّمت قبل أن تُبرمَج أي حالة.

A second engineer built the AI module in parallel while I drove the redesign and the rewrite. The risk in any parallel workstream is divergence: two people inventing two visual languages that somebody has to reconcile later.بنى مهندس ثانٍ وحدة الذكاء بالتوازي بينما قدتُ إعادة التصميم وإعادة الكتابة. والخطر في أي مسار عمل موازٍ هو التباعد: شخصان يخترعان لغتين بصريتين على أحدٍ أن يوفّق بينهما لاحقاً.

The design system absorbed that risk. Because the token grammar already existed, the AI screens were built as instances of the same system instead of a separate look, and there was nothing to reconcile when the branches met.امتصّ نظام التصميم ذلك الخطر. ولأن قواعد الرموز كانت موجودة أصلاً، بُنيت شاشات الذكاء كنسخ من النظام نفسه لا كمظهر منفصل، ولم يكن هناك ما يُوفَّق عند التقاء الفرعين.

Mademoiselle is active and shipping as a native Flutter app on a bilingual, three-theme design system. Every screen is an instance of that system rather than a one-off, so an inconsistency shows up in the system before it reaches production.Mademoiselle نشط ويُطلق تطبيقَ Flutter أصلياً على نظام تصميم ثنائي اللغة بثلاث سمات. وكل شاشة نسخة من ذلك النظام لا حالة فردية، فيظهر أي تناقض في النظام قبل أن يصل الإنتاج.

Building the system first inverts the usual order, where a design system is documentation someone writes at the end. Here it was the foundation, and that is why a second engineer's parallel work landed without adding design debt.بناء النظام أولاً يقلب الترتيب المعتاد، حيث يكون نظام التصميم توثيقاً يكتبه أحدهم في النهاية. هنا كان الأساس، ولهذا نزل عمل المهندس الثاني الموازي دون أن يضيف دَيناً تصميمياً.

Inheriting a stalled codebase settled the argument for me. The system is what let one person redesign and rewrite alongside a second engineer without the two halves drifting. I treat it as the first deliverable now.وراثة قاعدة كود متعثّرة حسمت المسألة عندي. النظام هو ما أتاح لشخص واحد أن يعيد التصميم والكتابة إلى جانب مهندس ثانٍ دون أن ينحرف النصفان. وأنا أعامله الآن كأول مُسلَّم.

With more time I would document the system as a living reference with usage examples, so whoever comes next extends it instead of quietly working around it.بمزيد من الوقت سأوثّق النظام مرجعاً حيّاً مع أمثلة استخدام، كي يوسّعه من يأتي بعدي بدل أن يلتفّ حوله بصمت.