Loading...
Applying mobile design patterns at scale
View project
In 2015, Xiaomi was the fastest growing smartphone maker in the world. While innovative software features paired with blazing-fast hardware had won nearly 20 million customers in mainland China, the company was relatively unknown in English-speaking markets. The team was planning a rapid international expansion, however most of the phone's UI had been designed without consideration for other languages. This made it impossible to preserve the UI's original look and, in some instances its usability, when the system was set to languages like English or Hindi. As one of the first hires on the Global Product team, I was responsible for designing and enforcing localization guidelines across a team over 80 designers, product managers, and engineers in the six months before the first device launched in India.
When I began observing feature design sessions, I noticed that all of the team's wireframes used Simplified Chinese as the default language. Many designs leaned into the concise nature of the language, featuring grids with four or five items across. While this worked perfectly for the Simplified and Traditional character sets, the designs couldn't accommodate longer languages.
Within the product team, there were about 30 working groups organized around the apps and features that Xiaomi preloaded onto its phones. My first step was to review each groups's style guides, codebase, and any other relevant documentation. In interviewing members across groups I heard designers highlight the inefficiency of recreating common patterns from scratch and pointed out that while apps felt consistent within themselves there were often inconsistencies between apps. Engineers noted the headache of keeping track of the latest translations for the UI text. As teams sprinted to ship updates updates every Friday, English and Chinese UI text had become jumbled together in the code.
Our CEO required every member of product team to spend an hour per day engaging directly with users in the company's official product forums. I used this time to compare notes with groups of enthusiasts I met from Eastern Europe and India who had begun working on translations of Xiaomi's apps in their own languages. They pointed out that a number of apps featured images with Chinese characters baked in and couldn't be scaled into multiple languages. They also noted that the translation quality for the English UI text was spotty and didn't feature any documentation as to where a given a string might show up in the UI, which made it more difficult to translate accurately.
Finally, I dug into Android's official documentation around localization best practices. My manager, a former lead on Google's Android team, helped connect me with engineers in Mountain View who offered advice on how to take advantage of features they'd built specifically to address localization requirements (e.g., plural handling, right-to-left layouts, etc.).
When I presented my findings at the weekly product all-hands meetings, I recognized that the furious pace of design and development made it difficult to change existing practices by relying on team's bandwidth alone (everyone was already working six days a week). At the same time, we needed to make changes to accommodate non-Chinese languages. Partnering with the lead engineer, I implemented changes to the code review system that required new UI and text to get sign-off from the localization team before being merged into the codebase used for production. Whenever new designs were implemented, my team would be notified automatically and promised to review and provide feedback within 24 hours after the initial commit.
We also developed an internal Wiki which featured common localization/design problems and workarounds approved by the team's design leads. This became an invaluable resource as we were able to refer engineers to existing articles directly in our review comments.
Finally, we began publishing weekly beta builds which included translations from our fans. This allowed designers to observe how their layouts fared in a wide range of languages and prompted feedback via the forms. For the first time, non-technical fans were able to view and use their translations in the context of the UI without having to compile the software on their own.
The team was able to scale from two to ten languages in under six months. Within a few months of implementing the new review system, we had untangled English and Chinese UI text and nearly all engineers adopted the recommended practices around implementing and organizing localizable resources. As a byproduct of becoming a part of the code review process, our new team quickly became integrated with other groups' workflows and had visibility into new features without needing to meet individually with each team.
The user-friendly beta build system enabled the translation community to grow to include non-technical enthusiasts. When Xiaomi entered the market in India many of volunteer translators became moderators for the form and remain active members of the community nearly and helped build one of the most active tinkerer/tech fan communities in the country.
