How to Use a Translation Management System for Multilingual UX Design

User experience (UX) is one of the core features of a software product that hopes to distinguish itself in the global market. Learn how a translation management system can help you create good UX design for multiple languages across your entire digital ecosystem.

User experience (UX) does matter! In fact, it is a key differentiator for companies that want to compete in today’s competitive global software market. Improving your app’s user experience through good UX design can boost conversions and revenue, increase customer satisfaction, and reduce the number of customer support calls – consequently saving costs.

The best UX designers obsess over the flawless UX of their products. They are painfully aware that every design choice they make – whether it’s about color, illustrations, or the phrasing of error messages – directly affects how users perceive the product and, in turn, the brand. That’s why they experiment, test, and measure to continuously improve customer satisfaction.

Then the day arrives, when the company decides to step into a new market that speaks a different language. Suddenly, localization is on the agenda, introducing a whole new set of challenges for UX designers. Changing more than the language of the product impacts the user experience in ways that many teams didn’t anticipate. Here’s how a translation management system can help in creating good UX design for multilingual apps.

How Localization Impacts UX Design

When companies believe that localization is as easy as mere translation, then they might see all of their hard-won gains in user experience suddenly dissipate. Other cultures not only speak another language but also assign different meanings to colors, symbols, and visuals. They even use different formats for date, time, and measurements.

The goal of localization should be to create a user experience that feels like it has been specifically designed for a language and culture. Ideally, no user should detect that the original product stems from a completely different country and cultural background. That is easier said than done, though, as the traditional UX design process doesn’t easily support this undertaking.

Challenges with Traditional Multilingual UX Design

In the traditional product development process for mobile apps, websites, or other software products, UX design and localization are on opposite ends. Typically, the product teams start with a mockup and create the user interface taking only one language into consideration. The developers will subsequently build the product, and it goes live. Only now do most teams think about localization and try to introduce other languages. This leads to the following problems:

  • By not internationalizing the product straight away and not keeping the UX design flexible, the design often breaks when more languages are added.
  • Translators don’t always have enough context to know where each content key should go in the product, which results in poor translation quality.
  • Translations do not always fit in the rigid UX design, resulting in, for example, an overflow of text on buttons.
  • The broken design and out-of-context translations lead to poor user experience and can turn off customers.
  • Ultimately, it will be harder for the team to reach their business goals.

Now, let’s look at how translations can be integrated right into the design process to overcome these challenges.

UX Localization Relies on a Translation Management System

A translation management system (TMS), like Phrase, is at the heart of modern UX localization. It serves as a single point of truth for your product copy in all languages. It is where copywriters and translators do their work and developers automatically sync the content files with their repository. Thanks to dedicated plugins for Sketch and Figma, UX/UI designers can also benefit from an equally simple syncing mechanism.

Working on Your UI Design with Multiple Languages

Designers can connect Sketch and Figma with Phrase to sync their design content. With this workflow, designers can be sure to create a good design that is suitable for all languages:

  1. Push design content from Sketch or Figma to Phrase. Designers can do this directly from their preferred design tool. The plugin automatically attaches screenshots of your artboards to the text segments that are created in Phrase.
  2. When translations are ready, designers pull the content back to Sketch or Figma. They can do this with one click via the toolbar. No need to copy and paste.
  3. Designers can easily switch between the languages in their artboard via the toolbar.

This workflow allows for translated product copy to be ready when working on the UI design of a new product. The sync also automatically reduces the risk of accidental copy changes.

High translation quality is assured as the content and translation teams can see screenshots of your artboard in Sketch or Figma. Linguists have all the context they need to create high-quality copy and translations. Seeing the current state of design, even if it is not 100% final yet, enables them to pick the best wording for each content key. This is a great help to avoid overly long verbiage and nonsensical translations.

Having translated product copy for all your markets in Sketch or Figma allows UX/UI designers to:

  1. Catch design breaks and optimize your design for multiple languages (Check out our article on designing apps for internationalization).
  2. Export files easily to design collaboration tools.
  3. Conduct multilingual user tests.
  4. Export images instantly for the App Store / Google Play Store in all languages.

You can read more about this recommended workflow and how it differs from the classic product development workflow in this article: Integrating localization in your design process.

Multilingual UX Design Is Ready For Development

When the UI design and copy are done, your engineers can use them for the final product. We recommend UX designers to agree on a key naming convention with their engineers before pushing the content from their design tool to Phrase. This will, later on, allow the engineering team to use the existing translated content from Phrase in the final product.

Iterate On Your Web and Mobile App Design

Today, product development is an ongoing process. Agile teams often iterate multiple times on existing features. Copywriters and translators might want to edit the product’s wording to make it more compelling. And designers might decide on a redesign of the user interface to increase conversions. Thanks to constant syncing between your design tool and your translation management platform, everybody will be up to date.

Are you ready to bring design and translation together? Phrase offers a 14-day free trial, including the Sketch and Figma plugins, to make multilingual UX design work for you.