OkCupid’s Product and UX Design Approach to Internationalization (i18n) and Localization (l10n)
First of all, let’s congratulate OkCupid! OkCupid has launched its Turkish support in March 2021, it is the first localization (l10n) and internationalization (i18n) achievement in the company’s history.
It drives the international expansion one step forward with a dedicated Turkish experience and comprehensive i18n & l10n capabilities. We saw several user metrics raised to a higher level, including more success in onboarding, more questions answered, more likes sent out, and more…$$.
There are just too many good numbers to show here, but our PM Alexis gives you two of the most exciting numbers from the team’s celebration party:
OK, so why is i18n & l10n a big challenge to the team? How is i18n & l10n work different from regular product development work? Let me put you an analogy:
Building a product is like building Rome, which is cool. Internationalizing and localizing the product is like refactoring every brick of the ancient city, turning it into a modern international metropolitan that can easily scale to embrace people from all around the world, while not sacrificing living quality or breaking down the city.
OkCupid had never done this work before. As a product designer in the team, I have been exploring what a designer’s responsibilities should be. I’d like to share some of my experiences with you.
There were mainly two phases :
Phase 1 was i18n. If you are not familiar with it, here is what w3.org defines:
I18n was all about building infrastructure and completing pre-requisite work that enable OkCupid to get ready for phase 2.
Phase 2 was the actual l10n work. Here is what w3.org defines:
So it allows us to build dedicated experience for international markets. It will help your product succeed with the desired “look and feel.”
Product designer’s responsibilities in phase 1:
Start by equipping yourself with i18n & l10n design knowledge
Do a bunch of research, get a high-level sense of the fundamental i18n & l10n design mindset, for example, how images should be treated, what layout is dynamic, what type of UI elements are “l10n-ready”, how typography should be, etc.
If you want some good resources to start with, here are some examples: (see more resources in appendix.)
With this knowledge, you can audit every corner of your product, get an overview of what parts of your product are not ready for l10n.
For example, in our case, OkCupid uses a special extrude-style text across our platforms to make the text more on-brand and standout.
However, they were all image format, which means we either have to change the style to regular plain text or translate them into different languages manually. None of them sounds ideal.
Fortunately, our front-end engineers figured out a way to customize the text with an extrude style that matches exactly the design, so it can work well with different languages. Hooray!
Next, create dedicated i18n design guidelines for your company
After you learned the fundamentals, you are ready to move forward.
You need to create i18n design guidelines in your design system. It should be noted that the guidelines are tailored to your product’s needs, they should fit your product use cases, not just a Frankenstein doc from the internet. Remember, the guidelines are not only used by yourself, but also will be used by the whole design team for future projects.
For example, one of the guidelines is avoiding the sentence mixed with UI elements. In our case, I needed to find an example in our product, created a guideline that clearly shows how it applies to OkCupid’s product with clear description and good vs bad examples.
Once you finish the guidelines, don’t forget to evangelize to your design team, this would help the team align on the same page for future projects.
Translation Management System integration
I18n is not only about translation, but translation is one of the biggest parts of i18n. Your team may need a translation vendor and a Translation Management System (TMS). (Uh, jargon again?)
Translation vendor performs the translation.
TMS is a tool that optimizes the translation process and saves cost. It can be used to pre-populate translations of similar strings in the future. As a product designer, first of all, you need to find out which TMS can:
- Best supports your current design tools.
- Provides seamless collaboration between design, devs, and language experts.
Once you finalize vendor selection, you need to learn how to integrate it with your team’s current design process. For example, our TMS provides a Figma plugin that supports design mocks translation, so the PM and I planned to integrate a “design pressure test” into our current development workflow — we wanted to have the strings translated in the design phases, and parallelly test if the translation breaks the design before the feature coding process starts. It could buy us time to fix the design earlier while not waste any development resources.
If you are the first one who learned how the TMS works, train the rest of the design team to adapt the process by creating a step-by-step tutorial or a workshop, and optimize it based on your practice.
Last but not least, understand your company’s i18n & l10n scope and focus
As a product designer in the i18n project, you should take lead on collaborating with the PM to understand the international expansion strategy, what functional capabilities and domain-specific capabilities do your team need to achieve the goal.
You may also want to collaborate with the research team to understand: Target users’ culture, behaviors, preferences. Create a competitor analysis map that focuses on the themes that your team cares about. For example, we focused on gender & orientation, geolocation, etc.
You might also need the quantitive data of the current product performance as a benchmark. I called them “Pre-l10n” metrics. It would be helpful to compare with the metrics after the launch.
Be prepared to encounter (a lot of) unexpected work
Sometimes your product is ready and doesn’t need that much i18n work in the beginning. But we were not that lucky. In our case, we encountered a bunch of unexpected work — we had to refactor some big features: including the self-profile feature and location service. Each of them was months of work.
When you refactor the features, always remember the i18n goal is to remove blockers and make it l10n ready, not to drive any metrics up.
In our case, for example, when we refactored the location settings service, our back-end engineers had spent around a year refactoring the entire location database. The biggest design challenge was the location search experience. Thanks to our front-end engineer who efficiently built a new search experience, we managed to not blow up the scope and got the work done.
Overall, the actual phase 1 story is far more than what you’ve read above
Nothing is easy when you start from scratch. Trust me, we made hundreds of mistakes and sent thousands of lines of Slack messages to make things happen. So kudos to everyone on the team!
If you happen to be in a similar situation as mine, I hope this article helps you. You should not limit yourself as a pure designer, you can take up more responsibilities to keep the team rolling, and evangelize i18n & l10n to the other teammates. You will find yourself growing faster!
In the next post, I’d share how phase 2 — the actual l10n work and what the product designer’s responsibilities are at phase 2.
Appendix
If you are interested in knowing more details, you may continue to read this appendix.
- Good resources:
2. With all the research and work you have done earlier, you may want to create a central hub or a wiki for them, make sure it is accessible to everyone in the team so everyone can check the information when in need.
For example, competitors analysis matrix:
3. You can also color-code your competitor features so next time you can quickly scan a certain color to find a specific information.
4. A dashboard that shows key stakeholders and useful metrics for different markets.
