Legal services — litigation and legal consultations · Deployed and running
Galal Osama Law Firm & Legal Consultations
A bilingual public website for a law firm, with an office panel that turns walk-in enquiries and client praise into records the firm can work through and publish itself.
- Client
- Galal Osama Law Firm — The firm's name, logo and published details appear with its agreement.
- System type
- Public marketing site + private office panel

A law firm took every enquiry by phone or WhatsApp: nothing was shared, answered and unanswered looked identical, and client praise never left a private chat. The system replaces that with two chains that run end to end without anyone retyping anything — a capped consultation form that lands in a shared office inbox flagged new, and a review flow that stores a client's words immediately but withholds them until an administrator releases them. One rule holds it together: anyone may submit, only the firm may publish — and it is enforced in the database rules, not the interface. The public site ships a complete second language, 87 translated strings each in Arabic and English, with the layout mirroring rather than translating in place.
- 2,180
- Lines of application code
- 87
- Translated strings per language
- 174
- Translated strings in total
- 6
- Security rule statements
- 50
- Character cap on an enquiry
- 2 / 2
- Languages / text directions
- Sector
- Legal services — litigation and legal consultations
- System type
- Public marketing site + private office panel
- Coverage
- Consultation intake, client-review moderation, publishing
- Users
- The firm's administrators; the public
- Languages
- Arabic and English on the public site (Arabic-only office panel)
- Directions
- Right-to-left and left-to-right
- Devices
- Phone and desktop
The problem before the system
As the firm describes it, everything arrived through a phone call or a WhatsApp message. That created three separate problems, none of which is solved by simply having a website.
Read the detailHide the detail3 points
- Enquiries had no shared record
- — A prospective client would call or message, describe their situation, and the details would live in one person's phone. There was no list anyone else could open, no way to see what had come in that week, and nothing that survived a handset being replaced.
- Nothing distinguished answered from unanswered
- — With enquiries spread across call logs and chat threads, the state of the queue existed only in someone's memory. An enquiry that had been dealt with looked exactly like one that had not.
- Client goodwill stayed private
- — Clients said complimentary things in the same private chats. None of it was visible to anyone deciding whether to instruct the firm, and there was no route from a client's words to the firm's public presence that did not involve someone retyping them.
There was also no English-language presence at all, which matters for a firm whose stated specialisms include corporate formation, commercial negotiation and contract translation — work that brings in clients who do not read Arabic.
The approach
Read the detailHide the detail
We started from how the firm actually receives work rather than from a page layout. Three things shaped every decision that followed.
The first is that enquiries are short. A prospective client does not write a brief; they write two lines saying what the matter is about. Building an open-ended message box would have produced long, unstructured text that nobody reads. We capped the enquiry field instead.
The second is that the firm answers by phone. Whatever the website collects, the next step is a call. So the record the office sees is built around the phone number, and every contact detail on it is actionable rather than merely displayed.
The third is that a law firm cannot publish unvetted statements about itself. Client reviews are valuable and cannot be an open comment box. That single constraint is what turned this from a brochure into a system with a gate in the middle of it.
The system enforces one rule, and that rule is the reason it is a system rather than a set of pages: anyone may submit, only the firm may publish. It applies twice, in two chains that run end to end without anyone retyping anything.
Consultation intake. A visitor completes the form. The record appears in the office inbox immediately, flagged new and outlined so it stands out. When someone has spoken to the client they mark it contacted, and the record's state changes permanently. The enquiry is capped at 50 characters, so what lands in the inbox is a summary the office can scan rather than an essay.
Review moderation. A client writes a review and is told plainly, at the moment of submission, that it will appear after the firm has reviewed it. The review is stored immediately but withheld. It sits in a moderation queue, badged as held, until an administrator releases it. The moment they do, it is live on the public site — no rebuild, no redeploy, no developer.
The withholding is not a convention in the interface that a determined visitor could route around. It is enforced in the database rules: a review may only be created in the unapproved state, and the public may only read reviews that are already approved. The interface and the rules say the same thing, and the rules are the ones that count.
Engineering decisions that make the difference
Constraints that come from the domain were turned into rules the system enforces, at the layer that cannot be bypassed rather than in the interface alone.
Read the detailHide the detail7 points
- 01
The moderation gate is enforced in the database, not the interface
Reviews can only be created unapproved, and unapproved reviews are unreadable to the public. Removing the interface would not open the gate.
- 02
Publishing needs no deployment
Both surfaces hold live listeners on the data, so approving a review puts it on the public site immediately, and the firm never waits on a build to change what visitors see.
- 03
The enquiry field is capped at 50 characters
It shapes what arrives rather than filtering it afterwards, so what lands in the inbox is a summary the office can scan.
- 04
Every contact detail is an action
Phone numbers dial, email addresses compose, the address opens a map, and WhatsApp opens a chat — the channel most clients in this market reach for first.
- 05
Records are cards, not table rows
Which is why the panel works on a phone with nothing truncated and nothing scrolling sideways.
- 06
Client reviews are displayed exactly as submitted
In whatever language they were written in. Nothing is machine-translated, because a rewritten testimonial is not a testimonial.
- 07
The site is built to be found
A sitemap, a canonical address, Open Graph and Twitter cards for link previews, and search-console verification — with the office panel deliberately excluded from all of it.
Access and account security
The intake is open, the inbox is not. Everything that touches client data sits behind an account in the authentication service.
Read the detailHide the detail6 points
Client contact details are readable only to an authenticated account
Consultations may be created by anyone and read by nobody without a session.
No password is embedded anywhere in the site
Access is an account in the authentication service, which also supplies the rate limiting on failed attempts.
Sign-in failures reveal nothing useful
One message covers a wrong address and a wrong password alike.
New passwords are measured, not merely required
A live strength meter alongside a minimum length and a letters-and-digits rule.
The firm can recover its own access
A reset link is sent to the administrator's address, and the password can be changed from inside the panel after re-entering the current one.
The office panel excludes itself from search
Both in the crawler rules and by setting a no-index directive while the panel is open, then restoring the previous value on the way out.
Two languages, two directions
Read the detailHide the detail6 points
- 87 translated strings in each of Arabic and English — 174 in total — covering not only headings and body copy but the parts bilingual sites usually abandon: button labels, form field hints, placeholder examples, success and error messages, and the legal disclaimer under the consultation form.
- Arabic is the default. Switching to English changes the document's language and direction together, and the choice is remembered, so a returning visitor lands where they left off.
- The layout mirrors rather than translating in place: navigation, grids, images, the experience badge and the directional arrows all move to the other side.
- Legal vocabulary is rendered in the terms an English-speaking client would expect rather than transliterated from Arabic, which matters for the commercial clients the firm serves.
- Client submissions are shown in the language they were written in rather than machine-translated, so the English view surfaces a review submitted in English while the Arabic view surfaces an Arabic one. Only the surrounding interface changes language.
- Side-by-side composites show the same screens in both languages at once — English left-to-right, Arabic right-to-left — built by photographing both captures together rather than by editing pixels.
The office panel's interface is Arabic-only. That was the right call for its users and it is stated here rather than glossed over.
English
Arabic
English
Arabic
English
Arabic
On the phone
Every screen was built to work at phone width, and the phone section of this package covers the same ground as the desktop section rather than sampling it — including the consultation request completed end to end on a phone, which is the action the whole site exists to produce.
Read the detailHide the detail7 points
- The six-card practice grid becomes a single column, each card keeping its icon, title and expander at a readable size instead of being scaled down to fit.
- The language toggle sits inside the navigation drawer as a full-width control rather than being dropped on small screens, which is where bilingual sites usually lose their second language.
- Consultation records are cards, not table rows, so nothing scrolls sideways and nothing is truncated — name, status, phone, email and request are all readable at phone width.
- The consultation form is completed end to end at phone width: full-width fields, a numeric keyboard on the phone input, and the same character counter as desktop.
- The review form's stars are sized as tap targets rather than as decoration, and the form scrolls inside its own panel so the page behind it stays put.
- The password-change dialog keeps all three fields, the live strength meter and the reveal toggle. Nothing is dropped to make it fit, which is the usual fate of secondary dialogs on mobile.
- A review can be released from wherever the administrator happens to be — held entries are badged and their publish buttons stay within thumb reach.
Arabic landing on a phone
Governance and traceability
Read the detailHide the detail
Access to client data is a single, auditable boundary. The database rules define what may be done by an anonymous visitor and what requires a session, and everything not explicitly permitted is denied by a catch-all rule at the end. Six rule statements cover the two collections and that final denial.
Every consultation and every review carries a server-assigned timestamp, so the order of arrival is the database's account of events rather than the client's. Consultations carry a contacted flag; reviews carry an approval flag. Both are states in the record, not something an administrator has to remember.
The access boundary is shown being enforced rather than asserted: a rejected sign-in, a self-service password reset, and an in-panel password change with its strength requirements.
The screens
36 screensEvery consultation, client name, telephone number, email address and review shown in these screenshots is invented. The images are the real application — its real components, layout, validation and access rules — run against an isolated local dataset; no image was retouched, the production database was never read from or written to, and the build used for capture contains no client library for the hosted database at all. The firm's own name, logo, address, published contact details and legal-awareness material are genuine and appear with the firm's agreement; what was substituted is the client data.
Language pairs
Consultation lifecycle
Review lifecycle
Admin panel and access control
The public site
Impact
| Before | After |
|---|---|
| Enquiries arrived by phone and WhatsApp and lived in one person's handset | Every enquiry is a dated record in a shared inbox |
| Answered and unanswered enquiries looked identical | New and contacted are distinguishable at a glance and recorded in the data |
| Client praise stayed inside private chats | Clients submit reviews themselves, and approved ones appear on the site |
| Publishing anything required the developer | The firm publishes and removes reviews itself, with no deployment |
| Nothing prevented an unvetted statement going public | Nothing reaches the public site until the firm releases it |
| No English-language presence | A full English site with its own dictionary, not a partial translation |
| No structured public presence for search | Sitemap, canonical address and link previews — with the office panel excluded |
The firm reports that consultation requests previously arrived only by telephone and WhatsApp. We have not measured how many enquiries or reviews the live system has handled, and this document makes no claim about it.
Numbers
System size
- Lines of application code
- 2,180
- Source files
- 15
- Lines of styles
- 205
- Components
- 9
- Page-level views
- 2
- Routes
- 2
- Practice areas
- 6
All measured. Every figure has a recorded command behind it.
Language
- Translated strings per language
- 87
- Translated strings in total
- 174
- Languages
- 2
- Text directions
- 2
Data and access
- Database collections
- 2
- Security rule statements
- 6
- Character cap on a consultation enquiry
- 50
Shipped bundle
- Scripts (bytes)
- 782,572
- CSS (bytes)
- 30,123
Raw, uncompressed sizes from a production build. No compression measurement was taken, so none is stated.
Evidence in this package
- Screenshots
- 50
- Desktop / phone / composite shots
- 31 / 14 / 5
- Captions written
- 100
- Automatic gate checks per shot
- 11
- Shots passing the capture gate
- 45 / 45
- Package verification checks passed
- 13 / 13
Deliberately not claimed
- Consultations or reviews handled in production
- —
- Visitors, traffic or conversion
- —
- Page-speed, Core Web Vitals or Lighthouse scores
- —
- Test coverage
- —
- Project duration
- —
- Uptime or availability
- —
- Business outcomes
- —
Each of these was considered and left out. Reading operating volume would have meant querying the firm's live database, which holds client names, telephone numbers and case details, and production was never touched. No analytics package is installed, no performance measurement was run against production, the repository contains no tests, and the commit history does not span the work.
Next




