Doist & Transifex

Doist is the remote-first company behind award-winning productivity platforms Todoist and Twist, which collectively supports over 30 million people worldwide. Doist has been in business for more than 15 years, employing 100 people in 35+ different countries and spread across 15 time zones. Their mission is to inspire the workplace of the future by creating simple yet powerful productivity software that promotes a more fulfilling way to work and live.

As a global company committed to building the future of work, user experience has always played a critical role for Doist. Doist’s two productivity applications, Todoist and Twist, were built from the ground up to support Doist’s asynchronous work culture that prioritizes deep work. Each application is easily accessible from any device and user-friendly. This is where localization comes in, as it helps provide an improved experience tailored to users worldwide.

The Doist team started localizing Todoist in 2012 and took steps to localize Twist when it launched in 2017. As a global company, it was imperative they make their applications accessible to many customers around the world. Todoist is now available in 19 languages and Twist in 8 languages. However, images were created manually from design mock-ups in Figma, and the brand design team didn’t have the capacity to recreate each translated image manually. For Doist, this was not the ideal experience for their non-English users. The design team wanted to find a more efficient way to localize their product screenshots and brand images.

The Figma plugin provided a helping hand for brand designer Anaïs Mares and the Doist design team. “We can take images we’ve created in English, create translation strings using Transifex, a system our translators are already familiar with, and generate localized versions automatically”. As Anaïs said, this is the first time the company has been able to translate images at this scale. The new process with the Figma plugin is faster than manually doing it, but as Anaïs notes, “it’s not a matter of being more convenient, it’s a matter of being possible at all with our resources”.

More context for translators

The Doist designers leverage the custom key names functionality that the Figma plugin offers in cases where the same content needs to be translated differently. For example, there might be two “T” strings; one for “Tuesday” and one for “Thursday.” However, Tuesday and Thursday have different initials when translated into French, “M” from Mardi for Tuesday and “J” from Jeudi for Thursday.

Setting custom key names for specific strings gives additional context to the translators and ensures higher-quality translations, as these are treated as different strings that require different translations.

The Doist designers also use the auto-generated screenshot functionality to provide more context to the translators. For example, a single string for the word “today” is used in several different places in the UI images. Translators can see exactly where by looking at the screenshots in Transifex.

The string is highlighted in the screenshots.

UI templates and marketing images

To avoid repeated work, the Doist team translates Figma UI templates once and then uses that translated UI in a marketing/brand image. This way, when working on marketing images, they only need to push the marketing content strings for translation. Using the Transifex Figma plugin, they pull back all strings (UI and marketing content) to generate the translated images.

Excerpt of the UI templates in Figma:

The Transifex Figma plugin allows the Doist design team to translate images they previously did not have the bandwith to tackle. Within a short period, they efficiently translated the Todoist App Store images into 12 languages and the Todoist homepage graphics into 19 languages, making their product more accessible to non-English users.

One app store image translated in 12 languages: