Illustration by Rouba Shabou
We’ve all been there before: You visit a website, but it’s in a language you don’t understand. No big deal, you think to yourself at first, because you have a translation extension installed on your browser. However, as you navigate the site further, you begin to realize that the translations are, at best, awkward (and, at worst, offensive to your cultural sensibilities). Displeased, you leave the site, abandoning your user goal, never to return.
All of this could have easily been avoided if the site you visited had been localized. Localization ensures that translations were made in a context appropriate to both syntax and individual cultures. Data from a recent CSAResearch survey indicates that 76% of consumers want product information to be in their native language while another 40% won’t even purchase from sites not in their native language.
At Crowdin, we understand the importance of localization to product design. We make it easy for businesses to localize their sites, apps, emails, and games in numerous file formats. We’ve even developed a plugin for Adobe XD to empower designers to be part of the localization process every step of the way.
Doing localization right is more vital today than ever, and designers play a crucial role in making this happen. Below are some of our best practices for localizing designs.
Localize as you design to speed up roll out
As Crowdin’s CMO, I appreciate how teams today have a greater need to work together smoothly to create or maintain a great product, especially when more of us are working remotely. In the past, localization was a challenge to team efficiency.
Even just a few years ago, the product design workflow would typically involve teams settling on a design, building the product, and then releasing supporting marketing materials—all in one language. Only then would the localization process begin, starting with the translation of all content to another language (something that could take months) – a sign of localization being an afterthought, instead of part of the product development workflow.
The design team would then reevaluate the product design, in the new source language, and make changes at that point (or not, which could result in broken designs as we’ll explore below). Then the process would need to be repeated. Another scenario would be when companies finalize the product, but wait for translations (up to a few months), which would again significantly delay the release date.
Today, product teams should aim for continuous localization – where you build a product and translate content into several languages in parallel. We believe there should never be a “final” version of a product since it’s constantly being developed and improved, which also influences the copy and design. This allows customers in different countries to use your product immediately. This involves scoping translators to work constantly on copy translations, and managing that translated copy in your design tool.
Thanks to our platform, designers are able to access all the necessary sources and localized content as they’re designing. Using the XD plugin, you are able to create experiences that work in multiple languages, testing out how copy looks in different languages and making sure your user experience is always strong, for any user.
Pay attention to copy length in different languages to avoid breaking your design
One of the biggest challenges with localization was that it used to simply break your original design.
For example, if your product’s first iteration was in English and you wanted to localize it into German, you couldn’t do that without causing some major design issues. In German, words and sentence structure tend to be longer than in English. As a result, any translation from English to German was bound to require changes to the original design to accommodate this localization.
Let’s say that your original design had a dropdown menu that only had room for 10 English characters. This may have been enough room in English, but in another language, you may need space for 20 characters to accomplish the same task. Obviously, the original design couldn’t accommodate this, so the designers would have to go back to the drawing board, either chopping the translation (which could cause a host of problems), or having to incorporate a wider dropdown that may not look good aesthetically. This proved to be time-consuming and unproductive.
By seeing how copy looks in your design, and making edits on the fly in different languages, you can ensure localization never breaks your user experience.
Ideally, designers should be able to create a design and see how it looks in various languages before the product is pushed to development. By creating a workflow that allows for this, you can ensure localization will never break your design due to different copy lengths.
Localize the live aspects of your experience, too
Localization doesn’t just mean effectively translating your homepage and/or relevant calls to action. Localization means the whole gamut – translating all of the copy in your design to your customer’s native language. That means your product’s whole knowledge base—FAQs, troubleshooting guides, and other self-help content—needs to be fully translated, but you actually need to take it a step even further.
When it comes to localization, don’t forget about the full experience of your product. Your mobile experience should also be available natively, whether that’s in a dedicated app or on a mobile site. As soon as you translate the copy of your product into your customer’s native language, you need to ensure that your customer receives the full native experience with your product.
Avoid designing in Lorem ipsum, and instead focus on optimizing your designs in their target languages, ensuring your UI works across regions.
Your team is likely iterating and creating new designs on a regular basis, and these need to be localized quickly. Making your customer wait (regardless of where in the world they are) hurts your brand reputation – you should strive for full localization into target languages, at all times. To achieve this efficiently, it’s a good idea to have several assets in different languages – creating a multilingual design system gives teams a single source of truth with which to pull elements in different languages. It’s localization baked in.
Don’t rely on the English language
One of the assumptions that brands used to make in product design was that everyone could speak English well enough to use their product. It’s true that English has some advantages over many other languages. Relatively speaking, it can be easier to learn than some other languages. But that doesn’t automatically mean that all non-native English speakers will be able to use your experience effectively. Some markets really do require your product to come to them in their own language.
This also gives your product a competitive advantage. When you are able to speak to your customers in their own language, they’re much more likely to choose and stay with your product, since they are able to better understand it.
Keep in mind the opposite, too. Your customers may likely choose your competitor, if your competitor succeeds in giving them a better user experience that feels more familiar and easy to use for them. Language plays a big role in this.
Why products and teams need continuous localization now more than ever
Today, the world is more interconnected than ever. The Internet has made sure of that. It’s no longer sufficient to release your product in one language and then make your customers around the world wait to enjoy a native experience in their own language. If you’re still doing things this old way, you’re paving the way for your competitors to gobble up your customers in different global markets.
By taking a new approach to localization, and folding it into your design process, you can ensure your product is always localized for different markets in real time, each time your design goes through a new iteration.