Navan Tech Blog
Breaking Language Barriers: Navan’s Localization Success Story

Breaking Language Barriers: Navan’s Localization Success Story

Bill Watson

21 Jun 2024
5 minute read
Signpost Pointing to Locations Worldwide
Lost in translation? Discover how Navan navigated localization challenges with Lokalise, GitHub Actions, and some customization.

To truly serve a global audience, every piece of an application’s user interface must be accessible in multiple languages. This is no small feat. Manually handling translations is time-consuming and error-prone, especially as the application scales.

Of course, connecting with a global audience requires more than just translating text; it demands a thoughtful localization strategy that adapts content to various languages and cultural nuances. This task is paramount for a company with a diverse global user base like Navan. But managing localization across a complex, evolving platform can be daunting.

By integrating a suite of advanced localization tools and automation solutions, Navan has streamlined the localization process. Here’s how we did it.

The Challenges of Localization

Localization involves adapting text based on cultural norms, idiomatic expressions, and technical requirements while maintaining consistency and quality. Here are some of the common challenges faced by global companies.

1. Complexity of Content Management

  • Volume of Content: Large applications have vast amounts of content, including user interfaces, help texts, error messages, and marketing materials — all of which need to be translated accurately.
  • Dynamic Content: Because content often changes frequently, continuous updates and re-translations are necessary.

2. Diverse Language Requirements

  • Language Variety: Supporting multiple languages, some of which have unique characters, scripts, and reading directions (e.g., right-to-left languages like Arabic and Hebrew), adds complexity.
  • Dialect and Regional Variations: Different regions may require localized versions of the same language (e.g., British English vs. American English).

3. Cultural Differences

  • Cultural Sensitivity: Localizing content involves more than just translating words; it requires adapting to cultural norms and expectations to ensure the content is appropriate and resonates with the local audience.
  • Idiomatic Expressions and Context: Translations need to capture idiomatic expressions and context-specific nuances, which can be difficult.

4. Technical Challenges

  • Encoding and Character Sets: Engineers must ensure the application supports various character sets and encodings to correctly display text in all languages.
  • UI and Layout Adjustments: Adapting the user interface to accommodate different text lengths and directions without breaking the design is another obstacle. For example, German words are often longer than their English counterparts, which can affect layout and design.

5. Integration with Development Workflows

  • Version Control: Translations must be managed in sync with the development process, to ensure that updates and changes are reflected across all languages.
  • Automation and Tools: Integrating translation management systems (TMS) with development tools is necessary to automate the localization workflow and minimize manual intervention.

6. Consistency and Quality Assurance

  • Maintaining Consistency: Terminology, tone, and style must remain consistent across all languages and the entire application.
  • Quality Control: Implementing rigorous quality assurance processes is necessary to catch and correct translation errors, inconsistencies, and cultural inaccuracies.

7. Collaboration Across Teams

  • Coordinating Efforts: Localization involves collaboration between developers, translators, project managers, and other stakeholders, often across different time zones and regions.
  • Feedback and Iteration: Feedback from users and stakeholders continuously improves the quality and relevance of translations.

How Navan Solved The Localization Challenge

To tackle these challenges, Navan built a custom solution that leverages automation and collaboration tools to streamline the process. Here’s how we did it, step by step.

The Foundation: Lokalise

Just as a solid foundation is essential for building a house, Lokalise serves as the bedrock for Navan’s localization efforts.

Lokalise is a powerful TMS and localization platform that helps developers and localization managers handle translations efficiently. It provides a centralized interface for uploading and downloading translation files, version control, and additional features for collaboration and integration with other platforms.

Navan uses Lokalise as the central hub for all product translation-related activities. This includes uploading source files for translation, downloading translated files, managing translations in different languages, and glossary and Translation Memory management.

The Framework: Application CLI

Like a house’s framework supports the structure, Navan’s custom Command Line Interface (CLI) supports and streamlines the localization process. This tool provides a set of commands that developers can use to upload and download translations, among other tasks, making the process more efficient and standardized across projects.

This decision to decouple our uploads and downloads from the existing continuous integration and continuous delivery (CI/CD) or project codebases allows our front-end teams the flexibility and standardization required to implement this automation based on their needs.

Some benefits include:

  • Local Development: Team leads and developers can test using a sandbox project to ensure local changes are reflected appropriately in Lokalise.
  • Node Package Manager (NPM): All node-based projects can consume package as a dev dependency with versioning to prevent breaking changes and code consolidation.
  • Continuous Integration (CI): We can choose to run these CLI commands on any provider or in different cadences, like on push or schedule.
  • Management: Lokalise manager can easily modify project setups with a central configuration file and test with ease.

Here is the CLI API reference related to Lokalise commands:

Localization Code Screenshot A

Our CLI requires a configuration file for all commands which gives each command the context when performing a task. In this case, you can see there is a downloadConfig and uploadConfig property which is passed through to the Lokalise project.

Localization Code Screenshot B

To help with developer ease of use we created helper commands in project.json so our team can reference these commands.

Localization Code Screenshot C

These commands ensure that developers can quickly sync their translations with Lokalise and maintain up-to-date localization across all projects.

The Utility Network: GitHub Actions

Just as a modern house benefits from a well-designed utility network that manages electricity, water, and other essential services, Navan’s localization process is enhanced by the automation capabilities provided by GitHub Actions. Navan set up a shared workflow that handles the extraction, upload, and download of translations; the process is triggered automatically by specific events such as new commits or scheduled runs.

Navan uses a shared repository to centralize all GitHub Actions via shared workflows, composite actions, and custom JS actions. This consolidation allows front-end teams to consume standard workflows, or CI building blocks which are governed and provide versioning to prevent breaking changes.

Below is an example of our consumer Github Action which is scheduled to run daily and uses the shared workflow which invokes the CLI under-the-hood.

Localization Code Screenshot D

By integrating Lokalise, a custom CLI, and GitHub Actions, Navan has created a robust localization system that saves time, reduces errors, and improves collaboration. This innovative and comprehensive approach ensures that as Navan grows, its localization process remains scalable and efficient, and provides a consistent and seamless experience for users worldwide.

See the Navan app in action now.

Return to blog

More content you might like