← All work

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
Galal Osama Law Firm & Legal Consultations
1 / 6

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
  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 05

    Records are cards, not table rows

    Which is why the panel works on a phone with nothing truncated and nothing scrolling sideways.

  6. 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.

  7. 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

Landing hero in both languagesThe same screen in both languages — a full direction flip, not a translated layout.

English

Arabic

Practice areas in both languagesThe same screen in both languages — a full direction flip, not a translated layout.

English

Arabic

Practice area opened, both languagesThe same screen in both languages — a full direction flip, not a translated layout.

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

1 / 10

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 screens

Every 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

Landing hero in both languagesa mirrored layout, not a translated one
Practice areas in both languagesgrid order follows reading direction
Practice area opened, both languagesthe same card opens in either direction
About the firm in both languagesprose and imagery swap together
Client reviews in both languagesreviews are stored as written

Consultation lifecycle

Step 1 — the enquiry is writtena bounded, structured intake
Step 2 — it arrives, flagged newthe same record, end to end
Step 3 — marked as contactedstate is recorded, not remembered

Review lifecycle

Step 1 — a client writes a reviewanyone may submit, nobody may publish
Step 2 — held for reviewthe moderation promise is made up front
Step 3 — the moderation queueunpublished reviews are visibly held
Step 4 — the review is releasedpublication is a deliberate act
Step 5 — live on the public sitethe loop closes without a deploy

Admin panel and access control

Administrator sign-inthe office data sits behind an account
A rejected sign-in attemptfailures say too little to be useful
Self-service password resetlockout is not a support call
The consultation inboxworked and unworked are distinguishable
The inbox in fullvolume the office can actually work through
Review moderationtwo states, one visible decision
The review queue in fullnothing is published by default
Changing the password in placestrength is measured, not merely required

The public site

Arabic landing screenright-to-left is the default, not a mode
English landing screena full second language, not a fallback
Six practice areasscope stated without a wall of text
Practice areas in Englishspecialist terms translated, not transliterated
A practice area openeddetail on demand, one card at a time
Practice area detail in Englishthe accordion carries both dictionaries
Firm profile and credentialspositioning backed by specifics
Firm profile in Englishthe badge repositions with the layout
Digital library of legal noticesa publishing surface, not a static block
Notice opened full screenpublished material stays readable
Client review carouselonly approved reviews reach the public
Reviews on the English siteclient words are never rewritten
Contact and office detailsevery contact route is one tap away
The complete Arabic pageone continuous narrative, top to bottom
The complete English pagethe second language is complete, not partial

Impact

BeforeAfter
Enquiries arrived by phone and WhatsApp and lived in one person's handsetEvery enquiry is a dated record in a shared inbox
Answered and unanswered enquiries looked identicalNew and contacted are distinguishable at a glance and recorded in the data
Client praise stayed inside private chatsClients submit reviews themselves, and approved ones appear on the site
Publishing anything required the developerThe firm publishes and removes reviews itself, with no deployment
Nothing prevented an unvetted statement going publicNothing reaches the public site until the firm releases it
No English-language presenceA full English site with its own dictionary, not a partial translation
No structured public presence for searchSitemap, 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.