Improve the UI design of multilingual apps with Figma

Interface design became one of the most important stages of development. Whether working on software, a mobile application, or a website, you should prioritize the user experience when designing and doing the copy.

Not only will it help your audience find what they need, but it's also one of the ranking factors for the website.

Creating a high-quality user interface with an optimized user experience is already hard. Surprisingly, adding multiple languages to the mix isn't helping.

Problems, obstacles, and errors multiply when the app needs to be in multiple languages.

Common UX/UI localization pitfalls

UX and UI problems during localization can vary, but they all have one thing in common. There's no clear picture of every segment of the audience that'll be targeted in the future when the product is designed and developed for the first time. Honestly, that's usually impossible, and it's part of ongoing processes and research.

Multilingual applications can't have a clean UI design. This is one of the most common assumptions when it comes to both multilingual websites and multilingual mobile apps.

However, there are things that can be done in advance so they can make further actions toward localization less frustrating. So let's cut them one by one.

Everything is hard coded

The number one problem you can stumble upon during mobile app localization is that everything is hard coded.

If the application is unsuitable for a multilingual user interface, it'll require intense intervention from app developers later in the process. The whole app would need to be rewritten, raising app development costs.

To avoid it and localize faster, be sure to internationalize your software, app, or website.

Leave date format, currency, name formats, etc., out of hardcodes.

They should be changeable. You never know where you'll see the next opportunity for positioning on the global market and need to incorporate different languages.

Fixed design without prioritization and hierarchy

Simo Herold, a Lead designer at Nogle, shared his experience when it comes to app designing for multiple languages during the localization period in his current company.

One of the things that got stuck with me is that usually, apps and software don't have UI design optimized for conversion hierarchically. This tends to mess up and harden the localization.

Complications happen when there is no clear hierarchy and prioritization of actions we want users to take. In these circumstances, it's hard to adapt the design.

Every translation inevitably brings contractions or expansions of the content. If there's no clear prioritization, the designer's job will be much more difficult.

Translators don't have the context while translating

Hand in hand with design, a high-quality translation is much needed.

Don't underestimate a translator's role, if you decide to save your money on the translation, it can easily backfire during launching.

That's why delivering an excel file with listed words and phrases for translation won't work. No matter how qualified the translator is, you won't get satisfactory results.

When translators don't get the context and the information about where the things are positioned, what are the industry requirements and vocabulary, brand voice, and slang that the target audience is using, they can make serious mistakes.

This happens because, in every language, there are cases where one word can mean more things.

For example, in Serbian

luk - an onion

luk - bow (for the arch)

luk - arch (of the bridge, in the wall)

And now, imagine if the translator needs to translate a string that contains only one word: "luk". Without any context. It would be a trial-and-error process.

Moreover, this lack of information can result in prolonged processes and, eventually, budget breaking as the time and speed of transition will be extended. Not to mention the extension of the design development stage, as there is no sync between the design and translation departments. And as we mentioned, translated content impacts UX design excessively.

How to use Figma to design a multilingual app faster

If you use Figma, you can resolve all these problems effectively in the first stages.

Clear design from the beginning

Herold, the design team lead from Nogle, suggests mapping out which actions in the app you want from users. Be sure to list in which order you want them to happen before you even enter the software localization process. This will ease up decisions and always put focus on the important actions.

Highlight all changeable parts of the design and communicate what would impact UI design and the quality of user experience if there were launchings to other markets.

Share this info with the project manager, dev team, or product manager - depending on how your work and communication processes are organized.

So they understand what to hardcode and what to internationalize during app development.

Preview different versions

Xintong Liun, an award-winning UX designer that worked at Apple and Microsoft and is currently in charge of product design at Zoom, shared her thoughts on how important multiple versions are during development.

She emphasized: "The beauty of UX design is that all the design decisions are evidence-based. Everything is for the users, but when you're targeting giant audience groups, things start to shift. This is when you need to take more than just the screen you're working on into consideration."

Therefore, you can do the layouts of the UI design for multiple languages during the initial phase or after MVP launching. This way, you can check how words' height and direction will influence user experience and whether it would be clear what the priority action is. Also, you can take into consideration how cultural consumption context influences design.

Sync with the product manager and the rest of the team about how each language option would impact the interface. Also, it will be easier to understand how a preferred language can change a hierarchy in desired actions based on local culture and context.

Create multiple versions and their preview in one table in Figma to understand better

For example, Katie Koch, a Senior Designer manager at Spotify, shared the table of multiple design options for the same payment flow they made during the testing phase of a premium duo service in Indonesia.

She mentioned how different versions were influenced by different kinds of iteration teams had with local experience of the product and how the bigger picture gave them a possibility to make better decisions that are aligned with their values.

Sync with translators

If the localization process has already begun, sync with translators. You don't have to actually talk to every translator in the team that's working on the project with you. Although it's desirable

If you're working in Figma, you can connect Localizely, a translation management tool. With this plugin, a project manager can easily import language files into the tool and translate them into the design to check how everything looks before deployment and edit things while still in the process.

Furthermore, translators can use a Localizely in-context editor and preview how strings look in the app preview. They can get real context around all phrases, understand how and where the strings form the sentences, and what is expected to do in that environment.

Additional help here is that with a translation management system, a localization specialist can create glossaries and help everyone with repeatable words, brand voice, and the slang used by both the industry and the target audience. With this feature, you can also make a language selection and choose which words are not translatable and should be kept in the source language.

If you're struggling to find translators in-house, Localizely will also enable you to get professional translation services directly on the platform.

Improve the UI design with Figma + Localizely

Multi-language apps don't have to be a nightmare at any stage. With the right tools and approaches, you can improve your experience during the work and accelerate the development process and deployment.

This applies to apps as much as to multilingual websites and multilingual software.

Multilingual website design can be like an easy song if you use Figma and Localizely during the localization processes.

You can have translated text in the target language faster without UI design suffering.