Skyscanner is used by a whopping 100 million global users every month. Our website and app are available in 37 different languages across 70 markets, with over 70% of our users coming from markets where English isn’t their first language.
Because of this, our Localisation experts sit in the Product Design team as we know how important it is to include them throughout the end-to-end product development flow. We want each user to feel as though the product was developed for them.
Content considerations
Writing copy for localisation
Add context using the content design annotation component
Add design notes to Figma files to provide extra information for ambiguous language choices, such as idioms. This helps translators create alternatives for other cultures and languages.
![Localisation template 3](https://studio-assets.supernova.io/design-systems/8384/7a14abde-e3f3-4e1b-8040-3312822052f6.png)
Be mindful of global holiday/event differences
Holidays and events are celebrated at different times of the year worldwide. Content related to these events may only feel relevant for some audiences at any given time.
- Christmas is celebrated in January in some markets and not celebrated at all in others
- April Fool’s Day doesn’t exist in Spain or Latin America. There’s a similar celebration in December called ‘el Día de los Inocentes’, which means 'Day of the Innocent Saints'
Consider seasonal differences
Be mindful that seasons differ in the Southern and Northern Hemispheres. For example, 'Summer deals' aren’t relevant for an Australian traveller in July.
Emojis can carry different meanings
Emojis that are widely used and understood in the UK can be perceived as offensive or nonsensical in other global markets. Emojis must be editable and not hard-coded so translators can change them to more relevant or appropriate ones.
Translators can rework the sentiment or symbolism of a message and find an appropriate emoji that works for the language in question.
Check out this example with British English messaging for deals in April. The copy has wordplay around the weather pattern ‘April showers’ — which is specifically relevant to the UK — with an corresponding emoji. Each market’s messaging shows how the content and sentiment have been localised with a more relevant emoji for each language.
Market |
Messaging |
---|---|
English |
Let us shower you in April deals🚿 |
Catalan |
A l'abril, ofertes mil 🌧️ |
Mexican Spanish |
Déjate consentir como niño con las ofertas de abril 🍭 |
Brazilian Portugese |
Entre na onda das ofertas de abril 🌊 |
Emojis can also have different connotations in other countries. Emojis that are used in everyday conversation with family and friends in the UK can elicit a negative reaction in other cultures or languages. Here are a few examples.
British English perception |
Other markets’ perception |
---|---|
Thumbs up 👍 |
Offensive in Greece |
OK hand gesture👌 |
Insult in Brazil and Turkey |
Money with wings 💸 |
Losing money in several markets |
Clapping 👏 |
Sexual connotations in China |
Design with localisation in mind
Use auto layout in Figma designs
Translated copy can expand by up to 30% on average more than English. Use auto layout so designs can expand or contract based on the length of the copy.
![Localistion template 42](https://studio-assets.supernova.io/design-systems/8384/16b69902-dcab-4484-b75c-cb05adacf88f.png)
Watch out for incorrect hyphenation
Some languages such as German or Finnish have long compound words that have to be divided into two lines. If you notice something that doesn’t look right during quality testing, talk to the Localisation team, who can help shorten or hyphenate the word correctly.
![Localistion template 5](https://studio-assets.supernova.io/design-systems/8384/baa9f988-4a0e-4c41-ac9b-b3536cfaab13.png)
Be mindful of right-to-left languages
Our product is available in Arabic and Hebrew, which are right-to-left languages. The written content and elements are swapped around to be shown in the other direction. Check interfaces are designed with this in mind.
![Inventory Cards • SEO](https://studio-assets.supernova.io/design-systems/8384/af2217d1-9e74-4406-b198-4a3c80df6aa4.png)
Best practices for placeholders
Use placeholders for dynamic values
Always use placeholders for dynamic values of data instead of hard coding or omitting any information/placeholder. The placeholders need flexibility to be moved around in the string for other languages’ sentence structures.
![Localisation template 4](https://studio-assets.supernova.io/design-systems/8384/efd629c3-7a2e-4c51-a616-f39e4513bc72.png)
![Localisation template 5](https://studio-assets.supernova.io/design-systems/8384/0a9c7fcb-d21c-4a45-b5da-331023942728.png)
Use descriptive placeholders
Descriptive placeholders help translators understand what information will be displayed such as time, city, airport, price etc. Use clear and consistent placeholders to help create accurate translations.
Flights from {origin_airport}
Flights from {0}
Use clear and specific placeholders
Vague placeholders such as {destination} could be interpreted as an airport, origin city or even country. Some languages use different grammatical structures for each different case. The placeholders must be clear about what the data set is.
Flights to {city}
Flights to {country}
Flights to {airport}
Flights to {destination}
Use the correct placeholder format
Use the placeholder format supported by the Strings Dashboard and the project the string is created in.
Common supported formats |
Extra info |
---|---|
{{value}} |
Recommended |
@@value@@ |
Recommended |
${value} |
|
<value> |
|
{value} |
Hyphens not supported |
When strings are sent for translation placeholders are blocked to become uneditable to prevent errors. The placeholder won’t be recognised if an unsupported format is used or if one of the opening/closing symbols is missing. In this case, the source copy will need to be updated and sent for translation again.
Leave punctuation and symbols outside of placeholders
Some languages use punctuation and symbols differently from English or use different symbols altogether. Leave them outside of placeholders to avoid mistranslation.
Language |
Example translation |
---|---|
English |
Save 20% |
Turkish |
%20 tasarruf edin |
French |
Économisez 20 % |
Korean |
20% 절약 |
Save {0}%
Save {0%}
Create separate strings for singular and plural
Pluralisation is handled differently from language to language. Create separate strings for singular and plural formats so copy can be translated accordingly.
Got a question?
Drop the team a message in #localisation and they'll be happy to help.