Project Introduction

For the whole fourth semester, our team Xiu finished a big website design and localization project for General Stilwell Scholarship (the website we built can be accessed here), a scholarship aimed at Chinese students at MIIS.

Why did we choose this client?

General Stilwell is a US army general who served in the China Burma India Theater during WWII. To many Chinese people, he is a legendary general that helped Chinese defend our territory during WWII. The Stilwell Foundation was founded in 1982 to provide scholarships to students from China for studies toward a master’s degree at the MIIS. Its mission is to promote Sino-American understanding, appreciation, and goodwill as it honors the legacy of a man with deep ties and great affection for the Chinese people.

The person who’s in charge of fundraising in China reached out to two of our team members who are two of the current recipients of the scholarship, expressing her will of building a Chinese website for the scholarship. After discussing all the possibilities, we agreed on building an English website first, and then localizing it into Simplified Chinese.

Our goal

Our goal of this project is to help the scholarship foundation reach more potential donors in China and increase our school’s visibility to attract more Chinese students.

Project scope

After meeting with our client, we finalized the things to do for the project, including shooting an English video featuring the current recipients’ life at MIIS so that prospective students and donors can get to know some of them and localize it with subtitles, importing all the texts and images provided by our client, designing the whole website, and localizing the website into Simplified Chinese with a decent language switcher.

Processes

Video production and localization

Our first step was to develop a list of questions for our scholarship recipients – These included questions like “What are you studying?”, “Why did you want to come to MIIS and what you like most about the school?”, “How the scholarship was helping you to achieve your goals?”. Next, we hired our volunteer internal engineer to film each recipient at various spots on campus with separate audio recording device for editing the footage later.

Shooting the interview video

After our engineer edited the video and sent us the .srt subtitle file, we then recruited a volunteer translator to translate subtitles in Google Translator Toolkit.

Translating in Google Translator Toolkit

After editing and proofreading, our engineer burned the subtitles into the video and did some final edits. And this is the localized video posted on YouTube.

Website design and localization

Website design and implementation

After shooting the video, we started to build our website from scratch. Based on the materials we collected from our client, we decided to have four pages on the website and drew the layout of each page on paper and it became our foundation of website design. Meanwhile, we communicated with our client, getting suggestions for the design and also getting support of the content.

And then, it was time to turn the design into reality. We created a WordPress website using our own account as a testing website because at that time, we hadn’t dealt with the domain and hosting issue and we wanted to have a stable and clean website before being visible to the public. We found a suitable theme for the website, used Elementor, a localization-friendly page builder to help build our website.

Build the website with Elementor

We also inserted some amazing templates from the Internet to make our website more appealing. Below are some examples:

Picture slider on the home page

Profile pictures and bios of recipients

Donate page

After all the website design work, we created an email account using the website cPanel and created a YouTube Channel with it. Then, we uploaded the interview video we localized and display it on our web page.

Website migration and localization

After getting an official domain and hosting server for the scholarship website, we installed WordPress in the cPanel of the website and migrated all the content from our testing website to the official website using a plug-in called All-in-One WP Migration.

For localization, we installed WPML to create the language switcher, and recruited translators to translate all the content including pages, menu, website title and tagline. Due to time limit, we didn’t connect WPML with any CAT tools or translation management systems but asked the translators to translate the content directly in WordPress, which was very tricky and it’s something that shouldn’t be done in the real world. Later, we synced the English and the Chinese menus and everything was good to go.

Suggestions for future tasks

First of all, to improve the service package. There will probably be updated information for the website, so continuous design and localization is necessary. Also, even though we only built the website for the scholarship, we still think it’ll be a great idea to help them build the logo and the business card to complete the whole service package we provide. And since there are some previous scholars now in China responsible for fundraising and they constantly go to charity meetings, localization of the business card is also potentially needed.
Second, all the videos are now on YouTube which can’t be accessed in China. So the videos need to be uploaded on one of these Chinese media platforms.
Third, to improve SEO (search engine optimization) in major Chinese search engines such as Baidu, 360 and Sougou. Since the goal of the website we built is not only to attract Chinese donors for the scholarship, but also to bring more Chinese students to MIIS, we think SEO is also very important.

Lessons learned

From this project, I do have learned many things when comes to website localization. These may not be directly related to project management, but they are very useful when you provide localization consultancy to the clients:

Always build a testing website that is not visible to the public first and then migrate all the content to the real website. If something gets messed up on the real website during the localization process, it will cause a huge disaster.
Not all page builders are localization-friendly. Page builders make website design way easier and make everything look perfect and chic. However, WordPress or other website builders cannot recognize some page builders and therefore can’t pull out the strings input on those page builders for translation. And that’s why we chose to go with Elementor for this project after doing some research.
If you are going to display videos on the website from a media platform and the client asks you to upload the localized videos for them on social media, do not use your own account. It is unprofessional. Either ask the client to give you their login information or register a new account for them.
When localizing videos and websites, make sure to take into account whether the audience can get accessed to them. Do enough research before choosing the platforms. For example, YouTube and many social media platforms such as Facebook and Instagram are banned in mainland China.
Always look for creative solutions. When we designed our website, there were something wrong with the page builder and we couldn’t get the three-column texts working in the right format. So instead of putting them in one column which would take up too many space, we created a PDF file with all the texts in a right format and inserted a text link on the web page so that when the viewers click the link, they can view the texts with online PDF reader.
Insert a text link at the bottom

This portfolio is based on a project of localizing a JavaScript game called Swap by my teammates Roxy Ma, Michelle Huang and me in the course Website Localization during the 2018 spring term at MIIS. The portfolio is divided into three parts: the brief introduction of the project, the basic workflow of the project, and thoughts from the angle of project management based on the project.

Brief Introduction of the project

Our project is to localize a JavaScript game called Swap with a method called 24 Ways from English into Simplified Chinese. Swap is an on-line tile-based puzzle game. It’s written in Javascript using the HTML 5 canvas for rendering. You control the ball and progress through various tricky and challenging levels to reach your goal. The death count piles up when you reach a new level. The following link can take you to a short 20-second demo of the original game: Demo of the original game. Our goal is to localize all the texts on the web page and add a dynamic language picker that looks natural to the interface.

Basic workflow of localizing the game

Our process of localizing the game includes preparation, translation, localizing the victory tiles and adding a language switcher.

Preparation

The first thing we did was to figure out what needs translation. We went through all the levels and identified the texts that needs translation. Below is the interface of the beginning of the game. All the strings circled down below such as “Deaths”, “Level”, “Reset” and “Skip” should be translated. The tips at the bottom like “Use arrows or WASD to move” in Level 1 varies as levels change and we need to make sure every tip is translated.

Interface of the web page at the beginning

Finally, if the users successfully go through all the levels and win, they will see “SWAP” at the end, which is something we need to localize in a quite unique way.

Victory tiles that need localization

For the strings in HTML, we duplicated the index.html file and renamed it to index_zh.html. For the strings in JavaScript, we adopted the method of 24 Ways internationalization. As seen in the code down below, we wrapped the strings “Deaths” and “Level” by adding an underscore and parentheses around them for externalization.

Wrapping the strings in JavaScript

After we wrapped up all the strings, we put them in a Strings.js file in the js folder of the game and it was ready for translation.

Strings.js file for translation

A challenge we encountered was we found that the tip strings are in an array. We tried to use 24 ways internationalization to wrap it, but it didn’t work.

Tips in JavaScript

So after brainstorming, we came up with a direct and simple solution: we copied the level.js file and then we decided to translate the tips directly in the Chinese level_zh.js file and linked it back to the index_zh.html file.

Translation

Now that all the strings were internationalized, we were ready to translate. For the HTML file, we simply threw the .html file into Memsource to translate. Then, we copied all the translations into the index_zh.html file like this:

Copying the translations into the .html file

For strings in JavaScript, we needed some extra work. First we copied the String.js into a word doc, and then we hid all the unnecessary. And then we saved it as .rtf file and then imported to Memsource to translate. After the translation was done, we put it back in the Strings_zh.js file, and linked it back to the index_zh.html file.

Localizing the victory tiles

At the end of this little game, when the player manages to win all rounds, there is a tile visualization of the English word “SWAP” shown. In order to properly localize this final screen, we need to figure out a way to transform this “SWAP” word into some Chinese characters.

Since the final credit “Swap, by Noah Moroze and MIchael Yang. Thanks for playing!” is shown together with the “SWAP” tiles, they must have been created at the same place, so we went ahead and searched for this line among all js files and found that it’s true. The swap tiles are mapped out using coordinates, 1 equals a grey tile, 0 equals a white tile and -1 place a blue inside the white tile.

Tiles in the JS file

Chinese characters are very complicated to be visualized by tiles, we could easily lose the aesthetic sense of the characters by drowning ourselves into the 1 and 0s, so we decided to come up with a simple workflow to visualize the character design first in powerpoint, then convert the design into coordinates and finally copy the coordinates into the js file.

To prove our assumption, we converted our characters into coordinate bundle. And the “Swap” tiles are successfully mapped out at the end of game.

Localized victory tiles

Adding the language picker

After all the translations, it’s time to add the language picker and link it to the pages using HTML and CSS.

Adding the code for language picker

First, we created the language selector in both the English and the Chinese HTML pages using the code. And it looks like this on the page. The link worked, but it just didn’t look pretty.

The language picker without CSS

So we inspected the existing codes inside the <body> tag and moved the language <span> tag to the right place and used CSS make the language switcher look natural to the webpage. So we added some styles to the language picker. We set the font family to match the font of all the other texts. We found the color of the grey tiles that appear on the start page in a .js file and set the background color to the same color. To make the picker look like a button, we adjusted the border radius. Then, we removed the underline of the text in the language picker and changed the font color to white. Our language picker now looks like this and everything was well translated.

We eventually successfully localized the game into three languages. The final version can be seen here: Final version of the localized game.

Thoughts from the perspective of project management

Even though all of our team members play the roles of localization engineers and translators during the project and no project management was involved, project management in this case may involve complicated steps and is never easy. Project managers who is going to manage similar JavaScript games should take the following factors into account:

When a game is being localized, text truncation will be a major issue if the text boxes are not expandable. Engineers may want the translators to make some tweaks and have a shorter version of the translations, which requires project managers to communicate with the translators about the need. This problem didn’t happen in our project since each piece of the dialogues was not too long. But one of our challenges was that when throwing HTML files to Memsource, translators had to manually inserted the tags into the right place. In real world, this can cause so much trouble since a missing tag may mess up the file. Project managers are supposed to make sure either engineers filter the tags out before handing over to translators or MQA check the tags carefully.

Translating HTML file in Memsource

Therefore, localization testing is a major step that project management should be involved in as much as possible. Many potential issues will show up in testing and project managers need to in which step things goes wrong and return to people responsible for that step for modification.
Last but not least, for the 24 Ways internationalization method, because the translator was working on the .rtf file and it was the engineer that was responsible for copying every translated string into JavaScript, there was a huge possibility of pasting a wrong for an engineer who doesn’t know the language. So in this project, a strict LQA process is highly required and the project manager should closely monitor the process.

Kimi Li's Localization Wonderland

Never stop creating.

Month: May 2018

Website Design and Localization – General Stilwell Scholarship Project