How a Dubai Product Designer Approaches Arabic Interfaces

Yasir Jamal’s account of designing for Julphar shows how navigation, product names and document versions shape what Arabic-speaking users can find.

Open the Arabic product pages of Julphar, the pharmaceutical manufacturer headquartered in Ras Al Khaimah, and you can see a design problem that extends beyond translation. The page can introduce a product category in Arabic while the catalogue below it uses Latin-script product names and numerals. A reader can move between scripts within a single task. The interface has to make the relationship between a name, a form and its category clear even when they read in different directions. Julphar’s company profile, Julphar’s Arabic product catalogue example

Yasir Jamal, a product designer and web engineer who lists Dubai Media City as his base, describes his role in the Arabic project in a public portfolio. He says his work included the Arabic layout and typography, a bilingual catalogue structure, investor information and reusable design components. The company’s public site confirms that Arabic product and corporate routes exist. Jamal’s portfolio supplies his account of the design choices. The two records establish what was proposed and what a visitor can see today, with gaps around the development history and how people used the site. Yasir Jamal’s Julphar case study

Design for what the visitor came to find

Jamal’s portfolio describes several kinds of visitor, including people looking up product information and people looking for financial disclosures. Both need to find a specific record, but they arrive with different clues. A reader looking through a catalogue may know a brand name, a product form or a category. An investor may remember the year and know that the document is a governance report. Each arrives with part of the information needed to locate the record. The interface has to do the rest.

Julphar’s Arabic product overview offers Arabic headings and category descriptions. The English general medicines page presents an alphabetical list with separate columns for generic name, brand, form and type. The Arabic product division page examined for this article also contains catalogue data in Latin script. These observations concern the public pages checked. They give no basis to assume that every filter in the portfolio exists on every route today or that the Arabic and English sites have identical content. Julphar’s Arabic product overview, Julphar’s English general medicines list

Consider a visitor who knows only the label printed on a package. A catalogue organised around broad categories may make sense to the people maintaining it. It can be less useful to someone who arrives with a name but has no reason to know the company’s classification. A search or list needs to accommodate the names readers actually bring. In practice that means identifying the authoritative product record, deciding which alternate names can retrieve it and distinguishing accepted aliases from unrelated lookalikes. In a sensitive catalogue, a generous search still needs to preserve the distinctions between records when it displays results.

The designer can then make the task testable. Ask someone to locate a record using a category, then ask another person to find it using a name copied from a document. Record which route each person takes, whether they can identify the exact entry and what they try when the first search fails. A comparison between Arabic and English is useful only if the two tasks ask readers to identify equivalent records. The aim is to find where the language or information structure impedes a real task.

Decide what changes direction

Jamal describes creating an Arabic layout hierarchy and using CSS logical properties to support both directions. In a shared interface, that approach can let layout spacing follow the beginning or end of a line rather than a fixed side. It is a way to express the relationship between elements once while allowing the page to lay them out appropriately in each language. The decision still requires judgment about individual components. W3C guidance on structural direction in HTML

Navigation controls provide one test. An arrow that takes readers to the previous step belongs to the sequence of the journey and should make sense in the direction that journey reads. An icon that represents a search does not acquire a different meaning when the text changes direction. A product code or document reference needs to preserve its own order inside a sentence or table. If the surrounding layout alters the apparent order of its characters or punctuation, a user may copy the wrong reference even though the Arabic label is accurate.

The W3C treats mixed-direction text as a separate problem from the direction of the page. Its guidance describes isolating an inline phrase so that the surrounding sentence does not unexpectedly reorder parts of it. It also explains how markup can infer a phrase’s direction where the text is inserted dynamically. A designer working on Arabic catalogue results can put these decisions in a component specification and show engineers what should happen when a result includes a Latin name, a slash or a number. A component that only appears in a tidy example with one short label leaves the difficult cases to the browser. W3C guidance on inline bidirectional text

A separate Dubai Municipality reel offers an example of Arabic and English appearing in the same public communication.

The reel and a catalogue perform different jobs. A published caption has fixed copy that editors can inspect before it goes live. A catalogue may assemble a heading, a brand name and a number from separate records, then fit the result into a phone screen. The more an interface assembles at runtime, the more important it is to test complete results with real combinations of scripts. That work belongs in component review as well as copy review.

Make the document easy to identify

Investor information gives the designer a second kind of problem. Jamal describes working on an Arabic investor area. The public Arabic and English homepages both point to the company’s Abu Dhabi Securities Exchange profile and show dated corporate updates. Julphar also publishes an Arabic governance report for 2024. A visitor who knows the year and needs the Arabic document should be able to see both details before opening a file. An Arabic landing page alone cannot tell the visitor what language a particular download uses. Julphar’s Arabic homepage, Julphar’s English homepage, Julphar’s 2024 Arabic governance report

One useful way to design a document listing is to keep document type, reporting period and language distinct. When a company replaces a file, the labels and download target should change together. When only one language version is available, label that file’s language so a visitor can decide whether to proceed. If a reader changes the site language while viewing a dated announcement, the corresponding announcement is a more useful destination than the homepage, provided an equivalent page exists. Where there is no equivalent, the product needs a clear way back to the original item.

That design depends on editorial work. If the person responsible for translations has no way to connect two language versions of a record, an interface cannot reliably preserve the reader’s place. If a year appears only within a long title, a reviewer may miss an incorrect link. Make the relationship between versions visible in the publishing workflow and test it with both a routine release and a later correction. The value of shared components becomes clear when a team can update many records without forcing readers to work out what changed.

Test comprehension before claiming an improvement

Jamal’s portfolio reports improvements in product search and discovery. The public material reviewed here does not give enough information about baselines, samples or the definition of a successful search to verify those claims. A search count can rise because more people visited the site. It can also rise because the same person had to search several times. A stronger measure follows a visitor from the starting query to the correct record and captures when they ask for help, change language or abandon the task.

Run these tasks with readers who normally use the relevant language and with people who routinely move between Arabic and English while working. On narrow screens, check what happens when a title wraps, when two labels need the same line and when the browser displays larger text. Include keyboard and assistive-technology use in the review. A layout can appear coherent visually while focus moves through it in an order that makes the steps hard to follow.

Write down how a reviewer should classify a failed attempt. A person may recognise the right result and still select the wrong row because two actions look alike. Another may fail earlier because the term used in the menu differs from the wording on a familiar document. Treat those as different findings. The first points to interaction and layout, while the second calls for a vocabulary or navigation change. A screen recording and a brief conversation after the task can help the designer tell them apart.

The same review should include a path that returns no results. Give the reader a way to check what they entered, try another name or navigate through the catalogue. If the product offers a language switch at that point, make sure it preserves enough of the search to let the reader continue. An empty state can show whether the design supports recovery as well as discovery.

After launch, a team can pair task reviews with event data. The useful signals include repeated searches for the same term, changes of language during a task and mismatches between the language requested and the file opened. Define each event before collecting it and compare it with actual examples from a review. Changing language can be a normal preference. It becomes evidence of a potential design problem when readers repeatedly explain that they could not finish the same task in the language they started with.

Jamal’s account and Julphar’s public pages show why the work crosses writing, interface design and engineering. A visitor needs a familiar way to begin the task and a precise way to identify the result. The same catalogue can carry Arabic labels and Latin product names if their relationships remain clear. The same document can be available in two languages if the interface tells people which version they are about to open. Those are the design choices a team can test on a real interface and maintain as the content changes.