UX Localization: Design for the global audience

Shantelle Liu at UXDX Community: USA Online Series. Video: https://youtu.be/xXKiZ5fHBOk

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Introduction and why localization interests me

[00:00:00] Today I'm going to talk about user experience in the localization space. Nowadays, with increasing demand in the global market, a lot of companies are reaching into other regions. But in the meantime, we need to think about how we can localize and provide an experience that's appropriate to other parts of the world.

[00:00:31] Before I start, I just want to give a quick introduction about myself. I'm Shantelle, a UX/UI designer. I came from a video design [?] background and shifted my focus to more user-focused design later in my career. Right now I'm working at Zoom as an e-commerce designer. I basically help our customers easily buy and manage Zoom products online. I've been with Zoom a little over a year. Throughout my career I have been very lucky to have the privilege to work for large tech companies and small startups, as well as freelancing for non-profits. On that journey I learned how to design at scale for a large audience across the globe, and how you should deal with the differences between cultures, different formatting and things like that. That's where I got very interested in UX localization.

[00:01:40] For my personal background, I was born and raised in China and came to the United States to study design and start my own design career here. Living here as a first-generation immigrant, I'm constantly switching between two languages. Half of the apps on my phone are in English and the other half in Chinese. This gave me a very unique perspective and experience to observe how companies do things differently in different regions, and to study and see the differences in digital interaction between those two cultures.

[00:02:23] As I designed for a variety of people from different cultural backgrounds throughout my working experience, I naturally developed empathy for the cultural similarities and differences in the digital world, and dug deep into how, as a UX designer, we should do things differently for different regions.

[00:02:47] One thing I have noticed about UX localization is that it's not something you learn from school or a textbook. There are limited resources out there to tell you what the right thing to do is. When you're a student at school, you work on specific problems with limited use cases. You focus on just a small set of users. But when we enter the professional world, especially working for a large audience, things start shifting. You need to take more into consideration. It's beyond just the screen you are working on. There are a lot of factors you need to take into consideration, including culture and localization.

[00:03:37] Today I'd like to share some of my insights on localizing user experience and design. I will talk about why this is so important to our users and the business, and what UX localization means. I will also share best practices from the UX and the UI perspectives.

English is no longer dominant, and localization is more than translation

[00:04:02] To start with, I'd like to share some data with you all. Research has shown the online population continues to grow at the rate of nearly 1 million per day, but only 9 out of 100 newcomers to the internet actually speak or write in English. Back in 1995, 90% of online content was in English, but today, in 2022, only almost a quarter, 25.9%, of online content is in English. So as we can see, English is no longer the dominant language in the digital world, and this trend isn't stopping either. We'll see a lot of other languages and other popular apps pop up in other places as well.

[00:04:56] In the early days of the internet, localization was often limited to large tech companies, because they had the resources to expand into different regional markets. It was kind of a luxury thing to do. But now competition and demand in the tech industry have made localization a common standard. Everyone's doing it. If you are not doing it, you're falling behind. What I've found right now is that everyone wants to get into the regional market, so they want to do localization to help the brand break into the local market easily.

[00:05:47] So you will say, okay, I think this is so important, let's just translate everything from English into the local languages the local market uses, and translate into as many languages as possible. But hold on a second. Before we dive in too far, I want to take a look at an example here.

[00:06:07] This is a slider. You'll probably see in a lot of places that the left side is a low setting and the right side is a high setting, and interacting with the slider changes the setting that way. This is a very common and familiar interaction you see on the internet. However, it's a totally different story in other parts of the planet. In some countries, especially where they use right-to-left languages, the whole experience shifts. It's a mirrored interaction.

[00:06:51] Right-to-left languages such as Arabic and Hebrew not only change the direction of the text compared to English, they also change the direction of the interaction too. You can imagine how this applies in other places as well. For example, we're all very familiar with this: if you want to go to the next page, the next button is usually located on the right side. But for those countries, the next button will be on the left side, because that's how they interact, how they read. So things are very different. If you just do a simple text translation, it will be really confusing to those users.

[00:07:33] My point here is that localization is not as simple as just translation. It's more about adapting the design and content [?] to the usage habits of your target market, rather than a simple word-for-word translation.

How localization shapes design decisions

[00:07:50] Here is another example, something I worked on recently. Localization also affects our design decisions. In this example I've been working on, you can see all of the microcopy we want to test on those buttons works fine in English, since I can just do the test and pick which one performs better at the end of the day. But the approach we're taking now brings issues when it comes to localization. If we translate into some other languages, in the examples showing on the right side, you can see we might run into an issue with those languages, because some of the texts are too long. They couldn't even fit into our mobile components, and that brings issues later down the road.

[00:08:46] This requires our UI designers to think of alternative solutions. For example, we may use text links. We can also take some content outside of the button, and move some information to other placements, so we can keep the CTA shorter. So localization can also help us make design decisions: which direction we need to go and what kind of UI elements we can choose.

[00:09:21] Another example here is from Spotify. As you can see, they have a playlist for each of the countries. But what they did is not create one image and put it into production for everyone. They take the extra steps and change the design based on the country. They not only change the images, so they represent the population in the target countries, they also change the design, like the colors, so it fits better with the image overall. That brings a totally different experience to our users, because if you see something that's not really relevant to you, you might not pay attention to the content either. That's why we need to take localization seriously.

[00:10:16] Here's another example. Localization doesn't only impact small UI components or the microcopy and images. It also has an impact at a larger scale, all the way up to the product strategy level. The example you are seeing here is the same brand, but the website looks different in different regions. The Muji American website has a really minimalist design approach. It focuses on the product itself. It barely shows portrait images or a model's face. It's more about the products themselves.

[00:10:58] But on the right side, on Muji Japan's website, you see a totally different approach. It has a typical Japanese style, with a lot of nested tables and columns, and they showcase more portrait images, a lot of lifestyle images, on the website. The reason they're doing that is that in America they are still establishing the brand with the audience, so what they need to do is showcase the product itself a bit more. In Japan they are already a well-established brand. What they need to tell users is not about what they offer, the products. It's more about the stories, the branding they're building. So it's a totally different approach based on the local audience.

[00:11:53] As we see from this example, localizing your user experience is a very complicated process. It's not just translation. You need to use the correct number conversions and currencies, even adapt the UI to different space requirements, verify culturally appropriate meanings, and also change the graphic images, all the way up to the product strategy level, et cetera.

What UX localization is, and its four foundations

[00:12:25] Now you're wondering, what is UX localization exactly? In my opinion, UX localization means adapting international products for a specific region to create a relevant and appropriate experience for users. It involves everything from small things at the basic level, like translation, all the way to [?] meaning and styles, and all the details, from how people pay, the terms of service, the images, colors, icons, fonts and the cultural references they use. There are a lot of things involved in this process. In some cases you'll also hear terms like cross-cultural design or geo design. They're basically the same thing. It's all about laying the groundwork for apps or websites to meet global users' needs and expectations.

[00:13:26] Here are the four foundations that are very important when it comes to localizing the experience. First, language. Besides the basic translation, you also need to tailor your copy so it makes sense to the local audience. Second, you need to be aware of the local laws, which can affect your design layout. Oftentimes you need to add a checkbox, or have some sort of acknowledgment based on the legal requirement, or add some sort of legal disclaimer for certain countries. That's something you need to pay attention to.

[00:14:06] The third thing is interaction. You need to adapt your interaction design based on the countries you're talking to, and I will talk about it in more depth in a second. And lastly, culture. It needs to play a big part in our design considerations too.

Best practices for managers

[00:14:30] With that being said, what's the way to do UX localization better? I'll share some best practices based on my experience. If you are at a high level, a manager, you need to understand that it takes a village to get localization done. It's not just a one-person job. You need to work with cross-functional partners and educate people on the importance of localization. Localization is not just part of the design process. It also affects how the business works in other countries or regions.

[00:15:12] As more and more designers have a seat at the table now, you need to get involved early in the planning phase, which up-levels localization to a company-wide initiative. After you have the blessing from leadership, you might need to build out the process for localization to be part of the design workflow. For example, target countries and regions should be included in the creative brief or in the kickoff meeting, and the design variants need to be defined before graphic production even starts. You will also need to set up some sort of rules, naming conventions or file handling for those geo-design variants.

[00:15:57] Proper localization should really begin at the conception stage. You can define the team, maybe different designers who can work on different regions, so you can have that 360 user experience all at once and you can always see what's happening in different places.

[00:16:15] One of the most important cross-functional partners during localization is our legal team. You want them on compliance. You want to use their knowledge to make sure your designs comply with local law. Another good partner in this process is our data science team, because they can provide the numbers to help you know the users you are talking to a little bit better. For example, some countries rely more heavily on mobile, especially the APAC countries, so you might want to do a mobile-first strategy there. Versus other parts of the planet, like the US or the West, which may rely more heavily on desktop, or where they're more likely to use email for communication or login information. So you can change your strategy based on the data you learn from the data science team.

[00:17:11] The last one is to leverage internal and external resources. There are now a lot of companies or agencies that provide localization services for design teams, so you can have experts do the job and outsource that. And even in Figma [?] and Sketch there are some plugins you can use to streamline those processes as well. That's something you can consider as a manager too.

Tips for UX designers

[00:17:45] Next are some suggestions or tips for UX designers. The first thing is to use formats that align with local users' habits. You need to ensure support for things like local currencies, units, dates, time, address formats, et cetera. If you don't know how to do that, or you don't even have a list of where to start, you can take a look at common design systems such as Google's Material Design and Apple's Human Interface Guidelines. They all have some sort of guidelines for localization, especially on right-to-left languages and things you need to consider with translation. Those are a good foundation for you to get started.

[00:18:37] The next is about content. It's not only about how you place things and how it looks. People read the content, and it has a big impact. Because the content you have on the website or your product will be translated into so many languages, you want to cause as little confusion as possible. Even if you are not directly involved in copywriting and content strategy, you can still provide feedback to ensure the products you design are free of slang, or things only the local audience of a specific country can understand.

[00:19:21] For example, some phrases in English that native English speakers will be very familiar with, like "raining cats and dogs" [?], make no sense to those who are not proficient in English, or worse, they might be offended by those terms. So you want to use very clear, simple words, so your product can accurately convey its intended meaning. I always think there's a golden rule when it comes to content design: if your design can be understood by a three-year-old and at the same time by an 80-year-old, your content is doing a good job, because it reaches more of the audience you intend to reach. That's something you need to consider too.

[00:20:25] The next tip is don't make any assumptions. If you have the time and resources, don't just do general research and call it a day. Knowing a country gives you enough information from a legal or cultural perspective, but it doesn't tell you the exact user behavior in that country. For example, I mentioned earlier that APAC relies heavily on mobile, but if you don't do the research, you don't know which country relies more heavily on mobile, where you'd want to change your strategy. Don't just make an assumption and call it a day.

Tips for UI designers: copy length, components, colors, icons

[00:21:09] Next, I have some tips for UI designers as well. The first and easiest thing you can do is stress test with real copy. When you put in the real copy, you can see that some of the design will break, and you have to adapt the design or change the language you are using. This is a very simple thing you can do. As a baseline, if you don't have real copy, there's a general rule: longer languages like German and Russian are about 30% longer than English, and Asian characters like Chinese and Japanese are usually 30% shorter than English. So if you only have placeholder copy, you can add or subtract 30% of the copy and play around with the layout to see if the design still holds.

[00:22:12] The next thing is, in your handoff file, you need to make sure all of the components are responsive. That can save you a lot of time, because a great way to solve the challenge of text length is to make sure the UI components are adaptable in all viewports. You want to use fewer bounding boxes, constraints and containers with fixed dimensions. If you let things have flexible dimensions, the content can grow freely without facing constraints in a specific fixed dimension. This includes, for example, buttons. If the call to action requires really long text, consider an alternative solution like a text link or hyperlink, things like that. There's always a way for you to adapt, but you want to make sure that when you hand off, the engineer knows that too.

[00:23:21] The next thing is colors, which play a big part in our visual identity. A lot of nuance can be communicated through colors, and we oftentimes use colors to signify different sections of the app and the website. Colors have different meanings in different cultures. For example, in Asian cultures red usually means good luck and joy. It's a really good color, so you'll see a lot of Asian e-commerce using red for promotions or notifications. However, in Western countries, especially the US, red usually means something like stop, error, warning. You'll see a lot of error messages or warning messages in red, which is a totally different strategy from what an Asian designer would pick.

[00:24:17] Even in the stock market, it's true that in China red means the stock is growing, because red is a joyful color in that culture. However, in the US market red means the price is dropping. So those colors have very different meanings in those countries. When you are designing, especially for different cultures, you sometimes have to adapt the colors to convey the right meaning for those countries.

[00:24:58] The next thing is icons. You want to use icons very wisely. Icons have become a standard representation of different elements no matter the language. Most icons are globally recognizable, such as closing, trash can, et cetera. When you use those icons, they save you some time on translation, they're more globally recognizable, and they make the UI cleaner. That's something you can consider too: see if you can use icons to replace the text. But in the meantime you also need to be mindful that sometimes you'll have to mirror those icons when you're working on right-to-left languages.

Dates, imagery, and global commonalities

[00:25:50] The next thing is dates, and it ties very tightly into my first point about using the right format for the local market. In some countries, when you're asking for date of birth or any sort of date, you start with the month, but some countries start with the day, and some countries usually start with the year. If you just provide one UI, I think users can still figure it out, but sometimes it might cause confusion and they'll enter the wrong date, because the day and month can sometimes be quite confusing, which one represents which. So you have to do some research to understand what kind of format the target country is using and adapt the UI that way.

[00:26:49] The last point is the images and the videos you're using. When you're sourcing images and videos, you want to avoid showing anything, or any language, that makes local users feel offended or confused. In your creative team, if you don't have a local localization team, the easiest thing you can do is host a design critique across the company and ask everyone from different cultural backgrounds to come and provide feedback. I was invited to critique a Chinese New Year campaign my previous company did. By doing that, you can easily get some insights from someone familiar with that country and the culture, and ask them to give feedback.

[00:27:56] I have been talking about a lot of tips, and the last point I want to make is that people are far more similar globally than you might expect them to be. Some places are more multilingual, but we're all human, connected in some way in the end. There are some globally shared fundamentals [?]: we all want to get things done quickly, we want less noise on the page, an easy and intuitive experience. Those rules still apply. That doesn't mean localization takes over those rules. You have to prioritize what's most important to our users.

[00:28:42] And if we mess something up, that's okay. It's part of our learning experience. I always like to say that as UX designers we never get it right. Every time you improve something for users, you are just one step closer to being perfect. The world is changing, and we need to evolve too. That's my presentation. Thank you so much for listening. If you have any questions, feel free to send them in the Slack channel. I'm happy to answer them there.