How we improved localization process of our website
Speeding up iterations over languages we speak
“We speak your language”, says one of the posters at Azimo offices. And while we’re serious about our customers’ money, Azimo is not staffed by cold machines that send financial transactions around the world. We are people who build products for other human beings. We do our best to be genuine, approachable, and cheerful. That’s why it’s essential that we can develop and iterate the language we use in our products - and do it fast.
We can take another look at the Azimo poster. Even in Azimo we sometimes speak different languages. Engineering jargon may not be so obvious for colleagues from other departments, but our job is to build solutions that make this communication better.
Our homepage, Azimo.com is often where a customer meets Azimo for the first time. The homepage is translated into ten languages, and the copy we use there is updated on a weekly basis, to make sure that our message is clear and our customers understand how our service makes their lives easier.
Serving so many languages is also quite a challenge for us. To cover such a complex platform as Azimo, we needed to create tens of thousands of translation keys, which are then translated into ten languages. We couldn’t easily manage this amount of content via simple spreadsheets. That’s why earlier this year we integrated Azimo with a professional translation management platform - Lokalise. Lokalise helped us a lot - with managing localizable content, cooperating with translation agencies, or simplifying the technical stack.
There was one particular challenge in which the external tool couldn’t help us. In many situations, simple copy changes require a frontend engineer’s support, which unnecessarily extends the time it takes to iterate our landing pages. Let’s say you want to update our headline - “Faster, cheaper global money transfers”. Using just Lokalise to find the right content to edit would not help us. As the phrase is not unique using just Lokalise to find the right content to edit would not help us. As the phrase is not unique and occurs multiple times in our system - separately for the landing page, app store descriptions, and a few other places one would not be sure if the change will appear in the right place.
Having said that, to update this copy just on the landing page, we needed to approach our engineers to ensure that copywriters edited the right translation key. An engineer checks the CMS definition of the page or the code of component, and minutes or hours later they came back with the answer:
Oh, it’s simple. We put a lot of effort into making sure that keys are self-explanatory. It’s “web.components.heroTop8.header”, don’t you see it?
You can imagine that usually, it’s not as obvious as it sounds. 😉
Translations Debug
During one of the Azimo hackathons, we decided to simplify this process. We’ve introduced to our website a special debug mode in which content and product teams can simply preview translations keys used in the context of a specific page. Two variants of the debug mode were introduced.
Tooltip
In this mode, our website displays a tooltip with a translation key over a hovered text. Translation key works as a link to open its content in Lokalise to reduce copy-pasting. Content managers can immediately start editing the text they want.
Inline
After entering Inline mode, you can check all keys used on the page at once if needed. Simple as that!
Technical details
The first thing to make it happen was to pass the information from client to server that the debug mode is enabled.
It can be achieved in different ways, we chose to pass an extra request header with a value representing the variant of debug mode. We wanted to make it easy for our team members but not as straightforward for real customers, so they would not enter the debug mode by accident.
Once the server receives extra header information, depending on its value we add a custom data attribute with a translation key to HTML elements holding content. We also run a custom javascript function handling hover events on those elements. With a bit of styling, we ended up with a nice popup appearing above hovered translated text.
Implementing inline mode was even easier. All we had to do was to use translation keys instead of translated content during the server rendering process.
So what?
Creative work such as copywriting requires experimentation and constant changes. The more often we can test and iterate the copy, the better it gets. On the other hand, if this process requires some engineering work, it takes more time and becomes quite problematic. Some studies say that it takes about 25 minutes to come back to full focus after a distraction. No wonder that some can feel hesitant to ask software engineers and overthink things — what often kills copywriters’ creativity. Removing these obstructions from the process of change is the best thing you can do for everyone involved. Our translation debug modes helped speed up the iteration process and remove dependency on additional team members. Win-win. 🙌
Towards financial services available to all
We’re working throughout the company to create faster, cheaper, and more available financial services all over the world, and here are some of the techniques that we’re utilizing. There’s still a long way ahead of us, and if you’d like to be part of that journey, check out our careers page.
