Published on <a href="https://blog.prototypr.io/how-to-design-for-an-iranian-audience-without-compromising-design-8e1701bc7c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jessica Lovegood 
Have you ever trusted a website you couldn’t understand? What if that website involved finances and legal compliancy?
I’ve been consulting with the OSACO group for a few years and our latest project was to build their finance focused website for some key prevention work they’re doing in Iran.
This meant that as well as the English website, they also needed an Iranian translated version (which is a right-to-left language) so that they could ensure trust and legitimacy with that audience.
<h3>A bit about OSACO</h3>
OSACO Financial specialise in financial compliance and anti-financial crime consulting and training and as such a serious subject, language and appearance are really important to create trust and authenticity.
<h3>The main challenges</h3>
<ul>
<li>Building trust with the Iranian audience through imagery, colouring and copy</li>
<li>Doing this without compromising the strong brand/design that OSACO have</li>
</ul>
<h3>Language</h3>
One of the first noticeable changes was of course the language. Changing the website to Farsi, meant that our website needed to support another script and the direction of Farsi. When you add the language in WPML it adds the relevant code for you:
<pre>&lt;html dir=”rtl” lang=”fa-IR”&gt;</pre>
On the Farsi versions of the pages, the language direction of the pages is changed from left-to-right to right-to-left. It also specifies the language of the page with the ‘lang’ attribute.
This also allows us to use different stylings in the CSS depending on the language. Most of the stylings remain the same, due to branding. Yet scripts like Farsi and Arabic, often require larger font sizes than Latin. The brand for this website has a lot of large text as default so the script is readable however as a general rule we’d recommend:
<pre>:lang(fa) { font-size: 125%; font-family: helvetica, verdana, sans-serif; }</pre>
<h3>Elements on the page</h3>
The next major change we made was regarding the layouts and content of the pages. When a language changes direction, so does the flow of the journey. Elements like primary buttons and navigation move to the left hand side. Imagery at times needed to be flipped, when used under text or denotes a direction for example:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dMWCL9HfczX_4H0L.">English and left-to-right<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3fMY1Nih-kiFoUqZ.">Image flipped with the face on the left. Caption reads “This banner is designed for text on the right. Ideal for Farsi.”
Note how flipping the banner image matches the flow of the text. The direction of lighting on her face, and the slight angle towards the text, should match the flow determined by direction of the language.
<h3>The header and footer</h3>
CSS can target right to left languages, as well as specific language codes. This is a more generic approach for future translations in additional right to left languages.
We used this to our advantage to not only change the text direction of the header and footer but also to flip the placement of the menu and the menu items.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*prnrhaStkQwqh8ci.">English version of the header with logo left and menu right. Notice the flow of the menu left-to-right (starting with home and ending with contact)<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2mX8j1W5htf38VpH.">Farsi version of the header with logo right and menu left. Notice the flow of the menu right-to-left instead
To do this we used the ‘rtl’ class added to each page by WPML to float each item in the opposite direction when in right-to-left mode.
<pre>.rtl .fw-wrap-logo, .rtl .fw-footer-logo { float: right; }</pre>
<pre>.rtl .fw-nav-wrap, .rtl .fw-footer-menu { float: left !important; }</pre>
As you can see from the classes we did the same with the footer menu:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*66DHGXOmlRrXaeVx.">English version of the footer with logo left and menu right<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*KrHC49ClgX1gtoJn.">Farsi version of the footer with logo right and menu left
We also had a copyright notice at the bottom which needed two versions — one english and one Farsi. We used the same technique to show/hide each version when in rtl and ltr:
<pre>:not(.rtl) .facopyright { display: none; }</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ajW8Y6aVJKNyOngV.">English footer<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9XxlBa-jNlUjYtFG.">Farsi footer
<h3>Page layouts</h3>
The below sketches show how everything changes with the direction of the language. We design so much which points people in a particular direction or information. Whether that is arrows on call-to-actions or the flow of the information in sections that it is essentially to change the ‘flow’ of items on the page to convert visitors.
Note: Arrows denote direction of text or imagery
Homepage — <a href="https://www.osacofinancial.com/">English version</a> — <a href="https://www.osacofinancial.com/?lang=fa">Farsi version</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H94BebRQ80bLEYBV0rShjw.png">
Our approach to compliance — <a href="https://www.osacofinancial.com/our-approach-to-compliance/">English version</a> — <a href="https://www.osacofinancial.com/our-approach-to-compliance/?lang=fa">Farsi version</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Sok_EqNhZsX19h-VzyYfPw.png">
About — <a href="https://www.osacofinancial.com/about/">English version</a> — <a href="https://www.osacofinancial.com/about/?lang=fa">Farsi version</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WlWUqTcE0ecCQyqaGmDe-g.png">
Get in touch — <a href="https://www.osacofinancial.com/get-in-touch/">English version</a> — <a href="https://www.osacogroup.com/get-in-touch/?lang=fa">Farsi version</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RzNTOS776fgwwKlORSv2UQ.png">
<h3>Imagery/graphics</h3>
A few of the images within the site were edited to match a right-to-left viewpoint but the biggest image change was the main graphic that outlines OSACO’s process including the embedded text within the graphic:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bTyCVpnNbrCp-vomMlj_aQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QBwnf3guiiLBCN9ePVruvg.png">
<h3>Further improvements</h3>
There&#8217;s always more to do, so for further improvements we may have looked at the colours and branding in order to adjust the prominent brand colours to reflect more localised symbols of trust.
This site was built with <a href="https://wordpress.org">WordPress</a>, the theme used is <a href="https://themefuse.com/the-core-multi-purpose-wordpress-theme/">The core</a> and the plugin for translations was <a href="https://wpml.org">WMPL</a>
Special thanks to <a href="https://medium.com/u/89620defcd21">Elizabeth Chesters </a>for consulting on the project and blog!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8e1701bc7c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-design-for-an-iranian-audience-without-compromising-design-8e1701bc7c">How to design for an Iranian audience without compromising design</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to design for an Iranian audience without compromising design

Top Stories