Cecilia Huster, User Experience Designer

 Portfolio  |  Resum√©  |  Linked In

Content Management System: A Bi-Lingual and Bi-Directional Content-Driven Project

The main purpose of the American Express Middle East about-us section was to showcase PR material. The material was going to be managed as part of a CMS. This meant that templates needed to be wireframed for:

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.

About-Us Section Examples

Sitemap

Sitemap for About-Us section

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.

High Level Wireframe of Section Front

High-level wireframe of About-Us section front page

The section front is meant to draw the user in and get interested in the content. By using the CMS to automatically showcase new content, the page stays fresh and users are shown what kind of stories they can expect.

Detailed Wireframe with Sample Content

Detailed wireframe of section front, with sample content

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.

Wireframe of Article List in About Section

Wireframe of article list

This is a much less engaging page, meant mostly to allow users to find the content they are looking for. It is meant to demonstrate a CMS template that can be re-used for all pages of this type.

English-Language Article Wireframe

Wireframe of English-language article template

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

Arabic-Language Article Wireframe

Wireframe of Arabic-language article template

While I could draw on years of experience for the English-language article template, the Arabic version required some research on Arabic sites. E.g. in 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.

Arabic Web Design

Based on this experience, I created a presentation and poster to be used when introducing the basics of Arabic web page design.

< Return to Portfolio page