MEE aims to create communication channels between Europe and the Middle East by providing a range of services such as academic and relocation support, translation, and public relations services. More than a simple language interpretation service, it aims to support in a cross-cultural, holistic, and individually-tailored way - providing, for example, assistance with forms or organisational issues such as housing.
Particularly targeted to international students, academics and professionals in media, management and international development, it is run by native Arabic-speaking academics and communications specialists based in the United Kingdom, who wish to use their knowledge of both languages and cultures to bridge gaps between the regions.
Since this was a start-up company with no existing website or visual identity, my task was wide-ranging, including everything from user research and testing, to generating personas and scenarios, UI design, branding and logo design. A significantly longer development time, consisting of several months, was allowed, however, which enabled more in-depth research and numerous iterations.
Due to the nature of the company, a dual-language website was also essential, which required significant additional research and testing in order to adapt UI designs for users native to a right-to-left flowing language such as Arabic.
Pen and paper sketches, a voice recorder, Adobe Illustrator, Adobe Photoshop, Sketch 3.0, Balsamiq, Brackets code editor.
One of four personas developed from user research
Since I could not observe users performing tasks on an existing website, I instead used interviews and discussions to attempt to understand more about the problems that the company was trying to address, and how their services might be approached or utilised by users.
I conducted open discussions about participants’ cross-cultural and language experiences and problems, predominately in the form of email correspondence and informal chats, utilising a translator when required, to generate detailed, in-depth user studies, personas and current user scenarios.
I also asked participants to read the initial copy that the company had provided for the website and recorded their thoughts and reactions.
Storyboard: 'Aya' persona's current situation
Frequent issues that emerged in these discussions were high anxiety, concerns with adapting to or coping with a new culture, identity conflicts, and insecurity or embarrassment over language ability, such as confusion regarding colloquial language or ‘business speak’. Therefore, it was clear that heightened emotions - particularly of anxiety, self-doubt and confusion - would significantly contribute to the nature of users’ experience of the company’s services.
In addition to these issues, in discussion directly about the company’s services several users displayed some confusion in understanding or defining precisely what the company could provide, or how it would fit into their lives. Several commented that it sounded too 'businessy' for them.
User research showed that emotions were likely to play an important role in influencing how the company’s services were experienced. Therefore, a reassuring, clear and confidence-inducing interaction was necessary.
In particular, the initial copy that was provided needed to be simplified and softened to encourage a more reassuring experience. Since the company’s services are broad, generalist, and tailored to individual requirements, a certain openness, flexibility and customisation ability also needed to be clearly articulated.
The site’s multi-language interface also needed to feel comfortable and intuitive to both native Arabic and native English speakers, reading and scanning in opposite directions.
An ideal scenario map
I drafted several maps of ‘ideal scenarios’ of user interactions with the company’s website, and used these to define and prioritize the key elements that could contribute to such scenarios.
Clear, concise copy (friendly but professional)
Logical organisation of services into clearly defined categories
Clearly explained categories, depicted by icons, which should be cross-culturally understandable
If possible, testimonials by previous clients to increase confidence in good service and provide examples of service plans
Clear signposts to further information about services, and to hiring initiation
Simple and obvious way of accessing service, perhaps an invitation to say what existing problem is
Prompt confirmation of message receipt
An interface that is intuitive to native speakers of both English and Arabic
The company had provided a basic single-page UI template that they wished to use, in a heavily customised form. Therefore, I designed all iterations around a single-page format.
The biggest challenge at this stage was to define logical and clear categories for the broad range of services that the company provides. I originally suggested five distinct categories; however, two of these categories were eventually combined, to leave four.
Several sections that the company had originally suggested were also eliminated at this stage, and much of the rest of the copy tweaked or rewritten to create a clearer, more reassuring tone.
Wireframes for English version of site
User Journey: 'Aya' persona uses an early wireframe of website
Eye-tracking tests generally detect an F-pattern when users look at web pages, beginning in the top-left corner and following the same direction as written words. On an Arabic website - or, indeed, a site in any language that is read from right to left rather than left to right - this pattern does not appear to occur, but is instead reversed. This is important not only in the alignment of the text but also in the positioning of navigation and header information, in order to create an intuitive interface that 'feels right'.
Since written Arabic does not use capitalization, I also had to ensure that all visual hierarchies that, on the English site, relied on uppercase text, would be preserved on the Arabic site, using either font size or colour.
Dual language prototypes (this design was created pre-translation, so uses dummy Arabic text)
I created a mirror image of the interface for the Arabic version of the site, also allowing more room for text, since Arabic requires a larger font size to be read comfortably. It is challenging for a native English speaker to judge how a design will be viewed by eyes accustomed to scanning in the opposite direction - therefore, I tested the mirrored design with native Arabic speakers, to ensure that the layout felt natural when scanning from right to left.
The final logo uses amalgamated English and Arabic letters and warm, rich colours that both cultures generally associate with the Middle East. An earlier iteration, with cooler, more corporate blue colours, appeared, in testing, to reinforce the ‘too businessy’ impression that several users had derived from the company’s initial copy. The warmer, earthier colours of this prototype received a much more positive response.
Several suggested features, such as testimonials, were removed from the initial prototype, potentially to be added at a later date.
This project involved several significant challenges, in the broad nature of the company's services, and the dual-language requirements of the site. It therefore provided a very valuable learning opportunity to me, and a chance to research and implement several concepts that were previously unfamiliar to me.
The site's design can be expected to undergo significant changes as the business develops - particularly in the way that service categories are defined, or in methods of accessing services. Therefore, routine user testing on a regular basis will be desirable, to keep the fulfilment of user needs aligned with the developing business.