[UX & Google Script] Localization

 

PROBLEM

Localization in multiple languages is harder to keep track between iOS and Android as the screens and test cases increase over time.

Besides, we faced the challenge of getting client’s copy text input efficiently as second language is often provided progressively in middle development phase and time is wasted emailing back and forth or creating another files on text changes.

My colleague, ST and I want to provide a user-friendly solution that eases the collaboration between both platforms developers and also input from the client.
 

HYPOTHESIS

A collaborative platform for localisation of copy text would benefit to users. Our strategy on what to focus on which areas:

  1. The solution has to cater for both iOS and Android platform syntax
  2. It has to be intuitive enough for a non-technical person to use
 First version of our prototype

First version of our prototype

After some research, we decided to use a key-value based system for our localization in Google Spreadsheet due to our documentation are mostly kept in Google drive. We use Google apps script to generate copy texts for both platforms to reduce the development time. Not only that, we are able to give access to client/external party to edit and they are free to change the copy text whenever they want. This gives the client a sense of control and increases satisfaction.

Developers were needed to create id which served as key to specify which screen and text it related to and put in values for the languages then retrieved exported sheets in folder. We put Google-translated value as a placeholder and highlighted it for client to substitute the correct copy text.

 

USER FEEDBACKS

Localization file is a one-stop place for developers to align on using the right keys values in both platforms and it provides fast overview to track translated/ untranslated copy texts. We used the localization file for a period of time and in between I got some observations and pain points from the other developers.

We realized:

  1. Too many steps: There were too many steps(in total 6 steps) to produce a sheet even though the localization copy texts were now at one place.
  2. Troublesome export: Most of them only saved the link of localization file but not the folder so it was troublesome to dig up the folder to get exported sheet every time in Google drive. Ironically, this increased developers efforts and frustrations.
  3. Dynamic input in a sentence: iOS and Android are using different syntax for parameters. It’s not ideal for developers to create duplicate sentences just to cater for different code syntaxes.

FEATURE EDITS

Below are how we managed to edit the functionalities based on the feedbacks:

  1. Increase efficiency: We decided to reduce the steps, from 6 steps to 3 steps within the same screen by providing copy paste function instead of export function as developers no longer need to track the localization file folder location and replace app file location as well. We provide preview of the localization as an assurance to the developers that they have the right copy texts.
  2. Parameter input for both platforms: We come up with a placeholder text({string} and {number}) so that we can further replace the placeholder with the correct syntax according to the selection platform to avoid duplicates.

 

iOS localization.strings

// Last updated: 22/10/2017, 15:35:46
"home.addNewContact" = "ADD NEW CONTACT NAME: %@, AGE: %@";
"home.title" = "Dashboard";
"home.welcome" = "Welcome %@! Do you want to %@?";
"settings.retry" = "You still have %@ tries.";
"settings.profile.subtitle" = "Welcome!";
"settings.logout" = "See you again!";

Android XML

<resources>
<!-- Last updated: 26/10/2017, 06:49:52 -->
<string name="home.addNewContact">"ADD NEW CONTACT NAME: %1$s, AGE: %1$d"</string>
<string name="home.title">"Dashboard"</string>
<string name="home.welcome">"Welcome %1$s! Do you want to %2$s?"</string>
<string name="settings.retry">"You still have %1$d tries."</string>
<string name="settings.profile.subtitle">"Welcome!"</string>
<string name="settings.logout">"See you again!"</string>
</resources>

IMPROVEMENT

  1. Currently, we need to copy existing spreadsheet template as the base for new project. This process can be automated to save time.

DEMO

1_iBYCm5AuFVxeOLcJrHQW6w.gif

Sheet: https://docs.google.com/spreadsheets/d/1mexrt6pwm9viqXBH9gZVT8eDWg6Yn9XWTgPdjk4SgqE/edit?usp=sharing

To get the codebase: Click Spreadsheet link > Tools > Script editor > Source of the files

workAmy CheongDevelopment