In the matter of product design
Most designers hand off.
I stay until it’s right — and check that it shipped that way.
Analysis, interface, the production fixes, and the release gate — reviewed by one person.
I take dense, high-stakes products — legal, medical, financial — and make them obvious. I ship CSS, React and Tailwind styling fixes and test automation to production with AI, without blocking a developer.
Six findings on the record, every one traceable to an exhibit. Hit 30s audit above to strip the prose and read only the numbers.
- File no.
- AE‑2025‑01
- Exhibits
- A — Syntheia · B — LightByte
- Jurisdiction
- Egypt · open to remote & freelance
- Status
- Open · accepting instructions
§00
Preface
I work on products where being wrong is expensive. A mislabelled column in a contract-review tool isn’t a design nitpick — it is someone signing the wrong thing.
So I read products the way I read contracts: line by line, looking for what shouldn’t be there. Most of what follows is a record of things I removed.
Every decision below is filed as a tracked change. Struck text is what came out; the correction is what replaced it. Where a number exists it is posted to the ledger in §05 — where one doesn’t, I say so.
The docket
Six cases on file. Each opens its own page — the argument, the decision, and what it was worth.
- A·1 The MFN App −40%processing time
- A·2 Matrix Comparison View 100%mobile parity
- A·3 The design system +30%handoff speed
- A·4 The release gate 116tickets verified
- B·1 LightByte <3 mobrief → MVP
- C·1 Interface studies 4studies on file
Syntheia is under NDA. Every interface shown below is a redrawn abstraction — real structure and real decisions, no real screens, no client data.
Permanent indexabdallahelraai.com/work
§01
Exhibit A//ACC-2025-SYN
Syntheia
Legal-tech SaaS, remote, Jan 2025 — present. A contract-review pipeline read four different ways.
Matrix View — one table, two densities
High-volume legal comparison has two readers: the one scanning for a single answer and the one auditing everything. The usual fix is to build each of them a product.
Build a second view for power users.One view. A density switch.
Two views means two mental models, two bug surfaces, and a decision the user must make before seeing any data. Columns are added in Super, never reordered — so what you learned in Simple stays true.
Simple · 3 columns
Super · 9 columns
2 modes
One mental modelNot posted to the ledger — no independent measurement.
100%
Mobile feature parity, full B2B portal
Exhibit A·2Read the full case
The MFN App — deleting the pipeline
Enterprise contract review ran on re-keying and an email chain. I mapped the path a contract actually took, not the documented one, and came back with steps to remove rather than screens to add.
Re-key the terms into the tracker.Capture once, at intake.
Circulate for sign-off by email.Approve in the flow, in place.
Every re-key was a fresh chance to be wrong. The email chain was where status went to die — nobody could answer “where is this contract” without asking a person.
- Receiveintake
- Re-keymanual entry
- Emailstatus unknown
- Sign-offchase
- Re-keymanual entry
After — 1 guided flow
- Intakecapture once
- Reviewin place
- Approvein flow
- Fileautomatic
−40%
Legal processing time
0
Manual data-entry errors
Exhibit A·1Read the full case
The AI ship log — amendments, not authorship
I built the front end.I filed amendments to it.
I do not write production features and I do not own the codebase. What I do: ship CSS, React and Tailwind styling fixes to the live MUI product with AI, correct design-system drift, and build test automation — without blocking a developer. That is the whole claim.
94.6% of every padding in the product came from three values. The other seventeen were drift — and drift is what makes a system feel like it was built by six people who never met.
The same sweep caught border-radius: 3.35544e+07px shipping in
24 places — an overflowed calculation nobody could see, because at that size
a rounded corner just looks like a straight edge.
<TableCell
- sx={{ px: 1.75, fontSize: 13, color: '#6b6b6b' }}
+ sx={{ px: 2, fontSize: 'body2', color: 'text.secondary' }}
>| Figma token | MUI theme path | Value |
|---|---|---|
| space/200 | theme.spacing(2) | 16px |
| text/body-2 | typography.body2 | 14px |
| ink/secondary | palette.text.secondary | #63625B |
Four hard-coded values replaced with three theme tokens. One component, one pull request, no developer blocked.
+30%
Engineering handoff speed, MUI token standardisation
Exhibit A·3Read the full case
The release gate
I wrote the QA process and I hold the gate. Handoff sign-off checks a file; release sign-off checks the product. Only one of those is what the user gets.
$ idle — press run
- Accessibilityaxe-core, per surface
- Visual regressionpinned snapshots, cross-platform
- Design-system conformancetoken drift, contrast, alignment
- Flow reviewend-to-end user journeys
- Design-to-code reviewbuilt UI vs the spec
- Per-surface suitesone per major product area
Stack
Playwright@axe-core/playwrightculoriTypeScript
I wrote these to make the regression pass repeatable instead of re-reading the same
screens by hand every release. culori is in there because contrast is
arithmetic — a machine should be checking it, not me squinting at a swatch.
| Ref | Severity | Finding | State |
|---|
0 of 116 verified tickets shown · representative sample, not a live export
Release gate · signed by the reviewer
116
Tickets verified to date
Exhibit A·4Read the full case
§02
Exhibit B//ACC-2024-LBY
LightByte
Salon management SaaS. Freelance, solo, Sep — Dec 2024. An ambiguous brief and a date that did not move.
Full lifecycle on my own: discovery with non-technical stakeholders, information architecture, high-fidelity MVP. The hard part was never the screens — it was getting agreement, out loud and early, on what was not being built.
Booking, inventory, payroll, CRM, marketing, reporting.Scheduling and inventory. Ship those.
A salon owner loses money two ways: an empty chair and a shelf they cannot count. Everything else was a second release, and saying so is what held the date.
Client terms limit what I can publish, so the commercial detail stays under redaction: the contract was renewed for a second phase at roughly double the original scope.
<3 mo
Ambiguous brief to shipped MVP, solo
Exhibit B·1Read the full case
§03
On record
Findings about the reviewer, in the order they usually matter.
I came to design from finance, which is why I argue in outcomes rather than adjectives. I was taught to ask what a decision costs before asking whether it’s elegant, and that habit never left.
What I actually do all day: read a workflow until I understand where it wastes people’s time, argue for removing those steps, draw what replaces them, then stay with it through code review and the release gate so the thing that ships is the thing that was designed.
Product analysis
I map the real workflow before drawing anything, then come back with a list of steps to delete. This is the part of the job I would defend hardest.
Information architecture & interaction
Dense domains where the constraint is cognitive load, not screen space. Legal, medical, financial.
Design systems
MUI-based tokens and components, kept honest against the live build. A system nobody enforces is just a file.
AI-leveraged execution
CSS, React and Tailwind styling fixes shipped to production, plus AI-assisted test automation. Deliberately narrow, deliberately useful — not front-end development.
QA & release ownership
I wrote the QA process and I hold the gate. Sign-off happens against the build, not the file.
Margin notation
- §Clause marker
- ¶New thought — break here
- ⁑Cross-reference to a finding
- ☨Contested; needs a decision
§04
Credentials
- BBA, Finance Capital University, Egypt
- Why I argue in business outcomes and not adjectives. I was taught to ask what a decision costs before asking whether it is elegant.
- Google UX Design Certificate Coursera
- UI/UX Design Fundamentals CalArts
What −40% would be worth to you
Applies the measured −40% from Exhibit A to your inputs. An estimate, not a promise — the number that matters is the one we measure on your workflow.
Value on record
Six findings, six sources. No line here that isn’t attached to an exhibit.
| Finding | Source | Value |
|---|---|---|
| Legal processing time | A · Analysis | −40% |
| Manual data-entry errors | A · Analysis | 0 |
| Engineering handoff speed | A · Ship | +30% |
| Tickets verified | A · Verify | 116 |
| Mobile feature parity | A · Design | 100% |
| Zero-to-one MVP | B · LightByte | <3 mo |
0 of 6 findings posted