Mademoiselle — redesigned from the ground up.Mademoiselle — أُعيد تصميمه من الأساس.

Mademoiselle is a commercial mobile product at Santa Media. It had stalled as a FlutterFlow prototype; I was brought in to take it to production — and chose to redesign it before rebuilding it.Mademoiselle منتجٌ تجاري للجوال في Santa Media. كان متعثّراً كنموذج FlutterFlow؛ استُقدمتُ لأخذه إلى الإنتاج — واخترتُ إعادة تصميمه قبل إعادة بنائه.

Roleالدور

Designer + lead Flutter devمصمّمة + مطوّرة Flutter رئيسية

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

2026 — present2026 — حتى الآن

Platformالمنصّة

Flutter · iOS + Android

Audienceالجمهور

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

Teamالفريق

Me + one AI-module engineerأنا + مهندس وحدة ذكاء اصطناعي

Scopeالنطاق

Redesign → DS → native rebuildإعادة تصميم ← نظام تصميم ← إعادة بناء أصلية

Mademoiselle had stalled in production with no clear path forward. FlutterFlow output is hard to extend and impossible to maintain at scale — and, more importantly, the original UI had never been designed for the app's actual Arabic-speaking audience.كان Mademoiselle متعثّراً في الإنتاج دون مسارٍ واضح للأمام. مُخرَجات FlutterFlow صعبة التوسعة ويستحيل صيانتها على نطاقٍ واسع — والأهمّ أن الواجهة الأصلية لم تُصمَّم قطّ لجمهور التطبيق الفعلي الناطق بالعربية.

The team needed someone who could make the call on what to keep, what to rebuild, and how to set the product up so the next feature wouldn't require starting over again.احتاج الفريق شخصاً يستطيع اتخاذ القرار حول ما يُبقي، وما يُعيد بناءه، وكيف يُهيّئ المنتج بحيث لا تتطلّب الميزة التالية البدء من جديد.

I audited the existing prototype against where the product needed to go: more screens, an AI module, ongoing iteration, and a first-class Arabic experience. The FlutterFlow base failed on all four — every new screen compounded the maintenance cost, and RTL had been treated as an afterthought.دقّقتُ النموذج القائم مقابل وجهة المنتج المطلوبة: شاشاتٌ أكثر، ووحدة ذكاء اصطناعي، وتكرارٌ مستمرّ، وتجربةٌ عربية من الدرجة الأولى. فشلت قاعدة FlutterFlow في الأربعة جميعاً — كلّ شاشةٍ جديدة كانت تُراكم كلفة الصيانة، وعُومل اليمين-لليسار كفكرةٍ لاحقة.

The strategic call was to treat the rebuild as a chance to set the product up to grow — a system first, so every later screen and the parallel AI module would inherit it for free.كان القرار الاستراتيجي معاملة إعادة البناء كفرصةٍ لتهيئة المنتج للنمو — نظامٌ أولاً، كي ترث كلّ شاشةٍ لاحقة ووحدة الذكاء الاصطناعي الموازية ذلك مجاناً.

Goalالهدف

A maintainable, Arabic-first product that can keep growingمنتجٌ قابل للصيانة، عربيٌّ أولاً، يستطيع الاستمرار في النمو

Hypothesisالفرضية

A system-first rebuild beats patching FlutterFlowإعادة بناءٍ بالنظام-أولاً تتفوّق على ترقيع FlutterFlow

Priorityالأولوية

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

Tradeoffالمفاضلة

Slower start in exchange for zero design debtبدايةٌ أبطأ مقابل صفر دَيْن تصميمي

Building the Design System before building screens was a deliberate sequence. A system built after the screens are done is a retrofit — it never quite fits. Built first, it becomes the grammar everything else is written in.بناء نظام التصميم قبل بناء الشاشات كان تسلسلاً مقصوداً. نظامٌ يُبنى بعد إنجاز الشاشات تحديثٌ لاحق — لا يلائم تماماً أبداً. أما المبنيّ أولاً فيصير القواعد التي يُكتَب بها كل شيءٍ آخر.

01 / 06

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

Home opens on the user's city, a search over salons, services and looks, and gentle nudges — saved looks, offers, and a review prompt after every visit.تفتح الرئيسية على مدينة المستخدمة، وبحثٍ في الصالونات والخدمات والإطلالات، وإيماءاتٍ لطيفة — إطلالات محفوظة، وعروض، ودعوة لتقييم كل زيارة.

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

17

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

9 — all states9 — كل الحالات

Themesالسمات

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

Directionالاتجاه

RTL + LTR

Scriptsالخطوط

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

Tokensالرموز

Semantic — never raw hexدلالية — لا hex خام أبداً

The 9 button variants cover the full interaction matrix — Primary, Secondary, Ghost, Destructive, and Icon — each with Default, Hover, Pressed, Disabled, and Loading states, in both Arabic and Latin type, across all three themes. Every state designed before any state was coded.تغطّي خيارات الأزرار التسعة مصفوفة التفاعل كاملةً — أساسي، وثانوي، وشبحي، وتدميري، وأيقونة — لكلٍّ حالات افتراضية ومرور وضغط وتعطيل وتحميل، بالخطّين العربي واللاتيني، عبر السمات الثلاث جميعاً. كلّ حالةٍ صُمّمت قبل أن تُبرمَج أي حالة.

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

The Design System absorbed that risk. Because the token grammar existed first, the AI-specific screens were built as instances of the same system rather than a separate look — so there was nothing to reconcile at the merge.امتصّ نظام التصميم ذلك الخطر. ولأن قواعد الرموز وُجدت أولاً، بُنيت الشاشات الخاصة بالذكاء الاصطناعي كنُسخٍ من النظام نفسه لا كمظهرٍ منفصل — فلم يكن هناك ما يُوفَّق عند الدمج.

Mademoiselle is active and shipping as a native Flutter app on a bilingual, multi-theme Design System — a stalled prototype turned into a maintainable product. Every screen is an instance of the system, not a one-off, so inconsistencies surface in the system before they reach production.Mademoiselle نشطٌ ويُطلق كتطبيق Flutter أصلي على نظام تصميمٍ ثنائي اللغة متعدّد السمات — نموذجٌ متعثّر تحوّل إلى منتجٍ قابل للصيانة. كلّ شاشةٍ نسخةٌ من النظام، لا حالةً فردية، فتظهر التناقضات في النظام قبل أن تصل الإنتاج.

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

Inheriting a stalled codebase made the case for design-system-first undeniable: the system was what let one person redesign and rebuild in parallel with a second engineer without the work drifting. I now treat the system as the first deliverable, not the last.وراثة قاعدة كودٍ متعثّرة جعلت الحجّة لنظام-التصميم-أولاً لا تُنكَر: النظام هو ما أتاح لشخصٍ واحد إعادة التصميم والبناء بالتوازي مع مهندسٍ ثانٍ دون أن ينحرف العمل. وصرتُ الآن أعامل النظام كأول مُسلَّم، لا آخره.

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