Featured Video Play Icon

Localizing at the design stage: what are the advantages?

Translating an app, website or software while it’s still being developed – it may sound like a surefire headache, but it can actually significantly reduce the project duration, expense and stress levels. We’ll explain how.

If you want to conquer a new market with your app, all the content has to be right for that market. But how do you make this happen? The classic approach goes like this: the app, website or software is first programmed in the main language, you check how the texts look in the interface and then you launch the product – and only after that do you gradually start translating the content into other languages.

The downside: things which differ between languages, like sentence length or character sets, often lead to layout problems and expensive adjustments to the programming. Instead of fixing problems afterwards, the other option is to get started on the translations earlier. How? By adding integrations to the layout tool that make the prototype of the app or website accessible even during the design phase.

How does the whole thing work?

During the development phase, you or your design team probably work with a prototyping software. With the tools provided by Figma and Sketch, this work is collaborative – designers and developers work on the layout of the app or website interface together, in real time. Now, translation management systems (TMS) from third-party providers like lokalise or Smartling mean language service providers can be directly integrated into these tools too. If the prototype is there, you can get started with the translation: the client identifies the pages, frames and strings that need to be translated, and approves them for translation with a single click. The translator can access screenshots to see exactly how the text segments will look in the layout, and can provide feedback while they work, e.g. if they come across spacing issues for titles or buttons. In this way, the app is localized in tandem with the designers.

It’s a similar process via HTML with InVision or Moqups. There are also plugins for Adobe products – and you can find good solutions for other design tools, too.

What are the advantages of integrating translation into the design phase?

The goal of translating early on in the process is to identify problems before they occur – so you avoid confronting users with just half a sentence or buttons in the wrong language. The language team is involved from the start and can use the visual context to see exactly how long texts can be and where there are breaks. This improves the quality of the translation and saves time, as you almost never then need a round of proofreading in the final layout. If the translator has feedback about the programming, they can direct this straight to the developers.

At the same time, real-time updates are centralized and can be viewed in the tool for multiple languages. Integrating the TMS also means that the translation memories can be continually updated. You can place your orders in the usual way and review the current status of the design at any time, which enables quicker processes and reduces costs over the long term.

When is this the right approach?

Above all, if you want to offer your app or website in more than one additional language. Large, international teams benefit particularly from the centralized collaboration and simplified approval processes. Even if you end up using different language services – some companies prefer to use machine translation for the first live preview rather than human translation, for example – then the language service provider can easily adapt things to suit your needs. The only requirement is integration with the tool.

Cover video via YouTube


Do you work with the Supertext system or a third-party provider and want to get started on translation during the design phase? Our Technology Solution Manager Patricia Kamer would be happy to help.



Related posts


Leave a Reply

Your email address will not be published. Required fields are marked *