Bilingual & 

Bidirectional

A Content-Driven Agency Project

The main purpose of this about-us section was to make PR material available to journalists and the general public.

The client had indicated that they wanted articles to be available in chronological order. The lefthand column goes into some detail about why that is not enough. E.g. most journalists only report about news in one country. This means that they want to go straight to the content that applies to their country. 

The client actually read every word on my documents. The agency staff also did, and reinforced the message in discussions with the client. In other words, for this particular project it was well worth my time to present logical arguments for my designs in writing.

As part of my work for this London agency, I created wireframes for the following CMS templates:

• menu pages: English only
• article list pages: mixed English and Arabic
• articles: one for English, one forArabic

Despite being for the Middle-Eastern market, the bulk of the site was going to be in English. However, all PR articles came in an English and an Arabic language version. As Arabic is written right-to-left, a separate template was needed for Arabic articles.

Using PR content sent to us by the client, I was able to populate the wireframe. This made it much easier for everybody in the client team to understand the impact of the page. It also made the reqirements clearer to the technical vendor. 

The section front is meant to draw the user in and get them interested in the content. The client's PR team told us that the press releases were used not only by journalists, but also by local students and potential job applicants. So I added a way for users to send their resume straight to HR. That was one of many proposals that the client appreciated.    

Drawing users in

This is a much less engaging page, meant mostly to allow users to find the content they are looking for. The twist is that most articles are available in Arabic as well as English. So there's an English language title column with links to articles in that language, and another one for the Arabic language titles. There's also a search function in the right hand column. 

Wayfinding in bi-lingual content

The next step was to adapt the English language article for Arabic. I did a lot of research for this part of the project. Using translation sites, it was easy enough to find Arabic sites for brands similar to the client's. 

What I didn't have access to, were Arabic design best practices. While I could draw on years of experience for the English-language article template, this was my first foray into non-Western web design. The client told me that they were going to publish the Arabic articles as straight translations from the English, with no extra local content. So in the end I just mirrored the English article template. There were a few details that I learned in my excursions and was able to add in. E.g. in Arabic numbered lists the numbers are of course on the right. But the Arabic convention of putting a dash after the number was new to me. 

If you've never seen right-to-left designs before, it's quite fun to compare the English and Arabic designs side by side. It's the kind of thing that many designers enjoy geeking out with. 

I started with the English-language article template. It is meant to be rich, with many different ways for the editor to show facts and express emotion. Having worked on many CMS systems, both as a designer and as a developer, I've seen too many article templates that lacked important functionality such as image captions and bulleted lists. 

When I started on this project, I wished that I had access to material that would help guide me. So I created some afterwards. I used it when I taught designers bidirectional design in the US.

Teaching bidirectional design