Design Driven
Localization
The Problem
As Life360 began to grow it's user base outside of the US the traditional localization process became a pain point, and a new approach was needed.
My Role
-
Design Team Lead
-
Documentation & Training
-
Workflow/Process Design
The Team
-
Myself
-
Joaquin Munoz, Localization Manager
-
Rostyslav Yerchenko, Implementation Engineer
-
Jacob Wheeler, Localize CSM
Overview
This case study explores a design-driven approach to localization that significantly improved the efficiency of translating UI content into multiple languages. By utilizing real UI screens during the translation process, we not only sped up translation time by 40%, but we also minimized localization-related UI bugs and allowed the rapid launch of six new languages. This approach enabled our designers to craft adaptable, scalable designs, reducing friction in accommodating languages with longer text strings and diverse formatting needs.easy.
Previous pRocess
Prior to the implementation of the Design-Driven localization process the team followed a more traditional waterfall approach to localization:
Standard translation workflows, where translators work in isolation from actual UI contexts, can result in poorly formatted screens and numerous UI bugs. This leads to extended QA cycles and slower launches. Our goal was to improve both the speed and quality of our localization efforts while ensuring that our designs could easily scale across languages without breaking the user experience.
The Solution
We adopted a design-driven approach to localization, integrating real UI mockups into the translation process. Instead of relying solely on isolated text strings, translators worked directly within live UI prototypes, allowing them to see how their translations would fit within the actual design.
Additionally, we collaborated closely with designers to create UI components that were flexible enough to accommodate longer text strings in languages like German or Spanish, as well as character-based languages like Chinese or Japanese. This included utilizing scalable text areas, ensuring that buttons and labels could dynamically resize, and setting line heights and padding that could adjust based on the translated content.
​
​
Designers also incorporated fallback strategies for when translations exceeded expected lengths, such as truncation with ellipses or wrapping text to multiple lines. This proactive approach minimized the risk of UI elements breaking due to localization challenges, enabling seamless scalability across languages.
Results
Our design-driven localization approach yielded impressive results:
• 40% Faster Translation Time: By working directly with live UI mockups, translators were able to make more informed decisions, reducing the need for multiple revision rounds. This sped up the overall translation process by 40%.
• Rapid Launch of 6 New Languages: Leveraging this method, we were able to localize and launch six new languages in record time, reaching global audiences more quickly than ever before.
• Reduced UI Bugs: By designing with localization in mind from the start, we significantly minimized localization-related UI bugs. Translators and designers could preemptively address issues like text overflow or misaligned elements, resulting in cleaner final designs and smoother QA processes.