Charting a course through international waters
How to help your UX team design for an international audience
Two years ago, Shopify was only available in English. Few people in Germany or Japan had heard about us. We had only just formed the international growth team to make Shopify available to people in their native tongue.
Today, we’re making commerce better in 19 languages.
“You must’ve known what you were doing,” you may think. This is definitely not true. The international growth team always jokes that we are a pirate ship — the waters can be choppy, the nights can be dark and stormy, we often get lost, and at times we don’t even know where we’re going.
Today, as we celebrate our wins, we also want to share what we’ve learned. One topic that’s particularly close to my heart is how we help our UX teams design and build for an international audience. My team, the international tools and services team within the international growth team, does not localize Shopify’s product directly, but teaches each team at Shopify how to do so and how to innovate their product for merchants around the world.
If you and your team are considering building the UX foundations for international growth, but don’t quite know where to start (like we felt two years ago) — or if you’re intimidated by the word “international” because it sounds like “a world of problems” (which it is) — fear not! This post offers practical tips that can help get you started pretty quickly.
You can do more than you think.
Start with internationalization UX principles
There are well-established UX guidelines for internationalization. Following them will ensure that your product can be designed to adapt to any international market out of the box.
Without having to reinvent the wheel, we started with three simple UX principles:
- Plan for text expansion
- Plan for word order
- Plan for cultural differences
All of these principles ensure that when a UI gets translated and adapted into a different language and locale, it looks and feels as familiar, crafted, and trustworthy as it does in English.
Are there other principles that you may need to use for internationalization? Maybe. But these guidelines give you a solid start to dive into your work quickly.
If you’re not quite sure what internationalization means, this post by Airbnb offers a good definition.
Takeaway: Don’t wait until you know everything. Starting somewhere is better than starting nowhere and some universal principles are a good starting point.
Form an opinion
Other than the UX principles we mentioned earlier, there are also global standards for internationalization. They can help you get started, ensure consistency, and maintain your product, but adopting these standards indiscriminately may not be enough to create a truly meaningful experience. You need to form an opinion about localization UX patterns where they matter.
For example, when it comes to commerce, very few things are as important as currency. It’s connected to almost everything a merchant does. When we consider a merchant selling globally, a poor mixed currency experience will leave their customers feeling confused and powerless. (“Which currency am I looking at when there’s a ‘$’?”) Even worse, it can result in serious consequences (“I just refunded an order in US dollars thinking it was in Canadian dollars.”). To create a truly crafted and considerate experience, we went beyond the existing standards, and defined our own currency formatting guidelines to show the appropriate level of details.
Similarly, we formed some strong opinions on designing address forms because addresses are also essential to our business (you won’t get things delivered if you can’t enter your address correctly).
Takeaway: Consider your product and users — what’s unique about them? What are the areas that require more localization effort? Are there special UX considerations where you need to go beyond standard practice? The answer to these questions will help you form your opinion.
Teach ’em to fish
All the general principles and opinionated guidelines won’t go very far if no one in your organization’s UX team knows or cares about them. And in case you missed the fine print — advocacy and education come with the job.
Starting small
If you are new to this whole advocacy and education business and don’t know where to start, consider learning from these good folks about how they built an army of content champions and created an accessible culture at Shopify. All of their advice has worked for us.
But you don’t need to wait until you’ve formed a full education program. We’ve had success with relatively low-effort initiatives, such as:
- starting a public Slack channel for folks to ask questions about international UX
- inviting teams to join our critique sessions to get some international perspective on their work
- identifying allies from other teams that can help us organize team learning events, such as lunch-and-learns, AMAs, or workshops.
Crafting your message
Since localization is relatively new to many UXers, one thing I’ve found particularly helpful is to make our message clear, concrete, and actionable. Some of our messages for common questions are:
- Why do we need to care about localization? (“A Brazilian merchant should find Shopify as easy to use as a Canadian one.”)
- What do you want us to do? (“Plan for text expansion.”)
- How can we do that? (“Test your design in German.”)
Measuring success
How do you know if all the things you’ve done are hitting your goals? Just like designing a product, you need to put some success metrics in place.
If you’re running a workshop, send a short survey afterwards to collect feedback. This will help you understand whether your content is helpful and relevant. After a few events we’ve run, we asked “Have you learnt anything new today?”, and the answer to that has helped us plan the content of our future education initiatives.
Another signal of effective advocacy is when more teams come to you for questions or support. This means folks are actively thinking about designing internationally. You can use these opportunities to continue to refine guidelines as you work with teams through their unique problems.
Takeaway: Advocacy and education are non-negotiable, but they don’t have to be a big-budget effort. You can start with small events or initiatives, as long as your messages are clear, concrete, and actionable. Find a way to track the effectiveness of these efforts — the last thing you want is to do a bunch of work without knowing if it’s useful.
Give’ em fishing tools
So you’ve discovered this new cool thing called fishing. You taught folks how to fish. Big congrats! But before you clap your hands and declare a job well done, there’s more.
Consider this: when it comes to UX, the checklist is pretty long — accessibility, mobile, content best practices, design principles…and it goes on. The fact is, UXers are already overloaded with things they need to consider and, despite the best of intentions, they will miss things. Now we’re telling them to add yet another item to the list.
How then, can we make designing for an international audience (almost) a no-brainer for UX teams?
For your consideration: build tools.
Internationalize the design system
Building tools sounds pretty daunting, but it’s really not. An obvious place to start is the design system.
The good thing about incorporating the UX foundations for internationalization into your design system is that the infrastructure is already there and it’s designed to be scalable and operable. Easy win!
A few months ago, together with the ever-amazing Polaris team, we conducted a complete audit of all Polaris components based on the internationalization UX principles we established. The goal was to make sure that when content is translated into other languages all the components still work as well as if they were in English.
Again the idea is to start doing something with what we already know and have, instead of trying to wait and solve all the problems at once. This kind of audit is definitely doable in a sprint. If time and resources are constrained, consider either prioritizing the most commonly used components or split the audit into two parts (identifying issues and fixing issues) — as long as you have a plan to achieve the end goal.
After our audit, all the components are now flexible enough to work well when text expands or word orders change (except for right-to-left languages).
There is still a lot more we can do to extend our design system to accommodate for international use cases. Localizing color, typography, grid, and iconography are a few things we plan to do given our system of systems approach. Ultimately, we should leverage the design system as much as we can to make it our primary infrastructure when it comes to UX internationalization and some localization.
Takeaway: If you already have a design system, internationalizing all the UI components can be a fairly contained project to work within a sprint. If you’re just starting one, even better — you can embed internationalization in it from the get go.
Tools that turn guidelines into actions
If you have read this far, you can probably tell there is a recurring theme of “bias towards action”. Not only do we want to act quickly, we also want to help our teams act easily and quickly by giving them the right tools.
Consider this scenario: even with all the components in your design system working well when text expands, the UI still breaks when these expanded components are grouped together.
In this case, our actionable recommendation for UXers would be “check your UI in a different language where your text may expand.” And the way they would do this is to grab the content, get it translated, paste it back to the design file, and check the UI. That’s a lot of work we don’t want designers to spend their precious time on.
“Can we do something?” you ask. Sure we can. In fact, it’s already done.
Netflix built a pseudo-localization tool that turns English UI into expanded fake text to show the “translated” UI. Now, because Figma is our design tool, we built a pseudo-localization Figma plugin following the same mechanism. (Again, starting with what we know and not reinventing the wheel.)
Similarly, to make following the currency formatting guidelines easier, we created a `formatCurrency` method in our i18n react library so developers can call the correct format with one line of code.
Takeaway: If your recommendations are indeed actionable, you can probably build a tool for teams to act on them. What tools can you build within your tooling ecosystem that can make following the principles and guidelines as automatic as possible?
One caveat of building tools is that it requires a significant amount of development effort. I recommend making this a bonus until there you have enough resources. In the meantime, do what you can to educate and/or leverage the design system.
Keep working on it
Earlier, we talked about seeing teams coming to you with questions as a positive result of your advocacy and education efforts. There are more reasons to celebrate this and see it as a great opportunity for your ongoing work:
- It gives you a window to see the limits of your expertise.
- These are real problems and unique to your product, so it helps you form opinions.
- Teams will remember the guidelines from this problem since you worked through them together.
For instance, a few teams have come to us with a similar problem — the layout being broken when texts are translated in narrow columns.
The principle of “plan for text expansion” still applies, but having worked through these real problems with teams, we concluded that we should always avoid narrow columns in favour of a list-style UI.
There you have it — a clear, concrete, and actionable recommendation from this collaboration. Now you can repeat the previous steps of adding it to the guidelines, forming some opinions, teaching it, and embedding it into tooling.
One thing to keep in mind is to use this as an opportunity to get creative in solving these seemingly rigid problems (instead of trying to be the “internationalization police”). Remember that you are here to support other teams through knowledge sharing, tooling, and collaboration.
Another area that we continue to work on is to learn more about our international merchants through UX research and share our learnings back to the rest of the UX teams. This is a huge undertaking, as “international merchants” is far from a homogenous group of people. People from different countries, regions, and cultures all have different expectations, behaviors, and preferences. As we are still figuring out how to do this at scale, our goal remains to help our UX teams design for these differences effectively.
Takeaway: Treat answering international UX questions as opportunities to form new opinions, patterns, and recommendations that will further help your UX team design for international audiences.
A few more words
Designing products for international audiences is still a brave new world and will undoubtedly continue to evolve. There is indeed a world of problems, but with that comes a world of opportunities. And it’s up to all of us to make the world a better place — it takes a village. ❤️🌏
—
If any of the things I talked about sounds exciting to you, we are always looking for passionate global citizens to make commerce better for everyone, everywhere.
—
Huge thanks to Paul Stairmand and Virginia Start for being the pioneers and advocates for designing for international and helping edit this post, Monika Piotrowicz for the support, as well as the amazing UXers on the international growth teams for being part of this incredible journey together. Special thanks to Tom Ayre for building the pseudolocalization Figma plugin as a Hack Days project.
Further reading:
Here are some more insights and case studies on designing for international audiences. Happy reading:
- A talk I gave on international design fundamentals if you’re not yet familiar with the topic.
- Some sound advice by Dropbox Design (which fundamentally influenced our approach).
- Adobe’s international design guides.
- The role of design in launching 62 languages at Airbnb.
- Localization at Slack.
