Building and Localizing a Website for Avatar Studios

Avatar: The Last Airbender is an American TV series that originally aired from 2005-2008. Known for its imaginative world, deep themes, and incorporation of Asian cultural elements, the show gained wide popularity and spawned a sequel series, The Legend of Korra. Personally, Avatar holds a special place in my heart for how profound its story and characters are, and I watched it both as a kid during its original run and several times since then.

In 2021, the show creators announced a production studio named Avatar Studios that would produce more Avatar content, but at the time of this project, there were no other details released yet. With my team (Tulsi Patel, Harlyn Lane, Regina Dukes), we decided to design a site on WordPress that Avatar Studios could potentially use, localizing it into Japanese through the WPML plugin and building the foundation for localization into further languages. Feel free to watch the video below for a summary of how the process went, and read on for more details!

Overview

The following graphic shows the workflow outline of our website creation and localization process:

Each step had its own considerations and challenges, which will be discussed below.

Source Content Creation

a. Preparation

This was an extremely critical first step in the project, as it laid the foundation for smoother translation down the line. Knowing that we would be post-editing machine translation (PEMT) our soon-to-be-written source content, creating a glossary for our terminology would be critical so the MT engine could properly translate the large number of Avatar universe-specific terms.

We went about making the glossary by first identifying key terms we knew would be common throughout many pages of the site, such as names of characters, places, and Avatar universe-specific concepts (e.g. waterbending).

After brainstorming terms as a team, we created a site roadmap detailing the specific pages we would each create and decided to continue adding terms to the glossary individually as we wrote our own pages.

Another important preparation step was creation of an English style guide. Since there were four of us that would be working on our own pages, consistency was key, so I created a document to note down guidelines ranging from capitalization rules, to formality of writing, to standardizing quote styles at the top of certain pages.

b. Writing Source Pages

With the style guide in place, we each wrote our own content for the site, with a total of 17 pages in the end. Avatar Wiki was a resource from which we drew content (and it also served as the basis for some of our style guide items as well).

c. Review

Before any translation happened, we needed to check the source content for adherence to the style guide as well as to iron out any other fixes – being given low quality source content for translation is a very common issue in the localization world and we hoped to avoid this! As a reviewer, I noticed certain small inconsistencies like the justification on tables between pages (see below), which I made sure to add to the style guide and fix, as we wouldn’t have wanted these inconsistencies to carry over in translation.

Inconsistent justification on left column between two tables (left justified vs. center justified)

Translation with WPML and Memsource

a. WPML Prep

WordPress Multilingual (WPML) is a plugin that enables a website to be multilingual. There are options to translate in either the WPML Workbench (where translators and managers can be added within WPML to organize workflows), or export site content as XLIFFs that can be imported into a separate CAT tool. We chose the latter and used Memsource for our translation workspace – here is our project with all XLIFF files uploaded for translation:

b. MT with a Glossary

Memsource’s MT allows for the addition of a glossary so that certain terms will always be translated a certain way. We set this feature up with the glossary we had created earlier, then applied MT to all our XLIFF files in the project.

c. Post-Editing

We then went in and performed post-editing. Reviewing the MT, however, revealed that despite our terminology efforts, there were still many words that we “missed”, leading to inconsistent translations that needed to be fixed. For example, “Screen Comix” was sometimes translated into the Japanese script, but other times it was kept in English:

Japanese-specific features such as punctuation were also not translated consistently, and things such as this would need to be added to a Japanese style guide. Below, I fixed segments where sometimes a different Japanese “quotation mark” was used (「」 instead of 『』):

Incorporation of Target Text

a. Reimport to WordPress

With the target translations now post-edited, we exported them out of Memsource and reimported into WordPress, with WPML taking care of the rest.

b. In-Context Review

After this, we reviewed the Japanese version of the site. Something I noticed was that our contact form (created with a plugin called Gravity Forms) only had some of the strings translated. It turns out that Gravity Forms didn’t get exported with the other XLIFFs, but it can be translated separately in WPML’s workbench, which I was able to do without any issues. This would definitely be something to note as an extra step in the process, though.

c. Delivery and Next Steps

With our localized site finalized for the time being, we celebrated with a job well done!

However, since the idea of this project was to create the basis for a site the creators would be able to build off going forward, we would need to also consider how to handle site updates from a translation perspective. Memsource has an integration with WordPress that allows for a continuous localization workflow, where there are settings to customize how often to check the site for updates…

…along with options to notify groups of translators per target language when such updates are detected.

This feature would allow us to scale our efforts to maintain an up-to-date site in all languages going forward.

Lessons Learned

This project reinforced the idea that localization needs to be something incorporated into all stages of the development process. If we hadn’t written out a glossary or style guide beforehand, the target text would’ve been messy and inconsistent. Still, there were several things to consider for improvement regarding this and other aspects of the project in relation to Memsource and WPML:

  • Do Not Translate (DNT) terms for the glossary – we realized during translation that “Avatar Studios” should remain in English as a “brand” term, but it was too late by this point and we had to make manual adjustments for this. Memsource does have functionality for DNT terms, and there are also QA check settings allowing for specification of “forbidden” terms, so we could have set up “Avatar Studios” as a DNT term and set the Japanese translation of it as a forbidden term to make this easier.
  • Identifying terms for the glossary – since we still encountered quite a few terms during post-editing that we realized should’ve been included in the initial glossary, we could have utilized other methods to prepare the glossary as well such as corpus analysis tools like AntConc, which allow for easily identification of frequently occurring terms.
  • Communication during translation between post-editors – with multiple translators, it’s incredibly important to have a good communication system so that if a scenario like what was described in the previous point arises (where something affecting consistency across the entire project is at risk), all people involved can easily communicate to make sure everyone is on the same page. This made it stand out to me that Memsource does not currently have a live chat feature, so if the four of us translating didn’t already have other ways of directly contacting each other, working through this situation could’ve been a lot tougher.
  • WPML Limitations – we noticed there was no option to choose different fonts between languages with WPML (it needs to be done with additional custom CSS). Customization of fonts per language is a very important feature to have, especially between languages with different script systems, so this is another thing to consider when localizing WordPress sites.

Overall, we’re happy that we were able to successfully go through a website localization workflow, and I personally learned a lot from reflecting on our processes. I hope to apply my knowledge to future projects and continue learning how to become a better localizer!