Designing for the world, a short introduction for Product Designers
A Global Design Landscape
In today’s design landscape, products have the potential to reach users across the globe, transcending borders and cultures. You’re likely well-acquainted with the power of a well-crafted user experience, we all have in mind an app, a service that we use regularly that changed something in our daily life — whether it is communicating easily with people very far away from us, sharing a passion, get informed or just enjoy your free time with a game, a tv show or a YouTube video.
However, these services can exist and operate thanks to hundreds of people working on them, dealing with the challenges of internationalization to provide us, users, with the best experience possible for us. To find out what this means, we will take a look at some of the complexities of internationalization when designing a product with global ambitions and topics that should not be forgotten.
The Complexities of Internationalization
I would like to state that everyone, professionals but also users, should understand that internationalization extends beyond translation. We will also talk about cultural biases, ways to mitigate them, layout, code base and user feedback.
Note: Internationalization and localization are two different concepts but not exclusive to one another. Internationalization is designing products to allow cultural adaptations. Localization is the process of adapting a product to a specific market (translation, currency, date format, number format, cultural changes). Internationalization sets the ground for localization. More on this topic here.
Context matters
Translating is the first step towards proper internationalization — content is translated and some idioms or ways of saying one thing are not matched completely, content in the target language is thus adapted to serve the same purpose. Is it really? Translators are often contractors and are not necessarily provided with the full context in which a string is used. This makes their work more difficult and they end up translating with what they have. This shows how much the context in which a user will encounter a string is important. The tone will not be the same whether the action is permanent (deleting an element, transferring money, transferring permissions…) or not.
One example of poor translation would be the use of the submit button at the end of a form. In French, submit is translated into “soumettre” which is correct. We have to pay attention to the context — we are sending data via a form — a French speaker would probably expect to read “Envoyer” (send) or “Confirmer” (confirm). “Soumettre” can be used in various cases and means “put in a state of dependence; bring back to obedience.” I repeat context matters when translating strings.
Biases and empathy
Let’s address the elephant in the room — you are biased. I am too. And that’s alright but it’s important to be aware of this cultural bias. We have been raised in a specific culture, with different influences, languages, trends, beliefs… All of these are making us the people that we are today. Our views of the world around us are not the exact same as the next person. For this reason, as designers, we tend to design our products with our own “goggles” and it is very easy to forget about everything else, users from a different background than ours.
Mitigating our biases
Incorporate User Research
The first obvious way to reduce our biases would be to incorporate user research into our design process. It is already the case for a lot of us but we should keep this sentence in mind: “I am not representative of the users I design for”. By doing so, we would be a lot more careful about what people share during user interviews, surveys, or tests. One part of the research could be focused on ethnographic studies to understand users’ daily lives, behaviors, and needs.
Cultivating diversity in design teams
Another way, a bit trickier to set in place, would be to have designers from different cultural backgrounds. It can be more challenging for SMEs compared to bigger companies as they are less known in the world than a Google or Apple for instance. The rise of remote working during the Pandemic was a good way to find talents from abroad and welcome their different outlook on the industry and users.
Implementing inclusive design practices
As we design for everyone, we must account for different use cases — a person with low vision, impairments, a person holding a baby or a dog, or a person who cannot read… inclusivity is at the heart of what we are doing — and the way we work should reflect that. Allowing diverse voices to participate in ideation and creation is crucial to building a truly inclusive product. Regular design critiques and iterative testing involving users from various backgrounds allow us to refine our designs based on real-world feedback.
Leveraging cultural competencies training
We can all learn from one another and be aware of our differences in understanding topics, concepts, and constructs. There are ways to enhance a design team's cultural competence such as cultural updates in design team meetings, ethnographic research, diversity and inclusion workshops, cultural immersion (physically or virtually)…
Inclusive by design
It all starts with code
Providing a product to the world is acknowledging different writing systems, orientations, and characters. I am French, a language that uses accents on vowels. Other languages like Romanian, Spanish, and Turkish use accents also on consonants. Many times I came across this character �, meaning that the database, a file, or a feed is not correctly using UTF-8. UTF stands for “Unicode Transformation Format”, it is here to make sure characters are rendered correctly on a screen. Every character has a Unicode that looks like this: U+000000. If a character has a code that cannot be decoded, it will be shown as a square or a �. We should make sure to always use UTF-8 when working with characters — that means all the time.
Design layout
When designing for the world, we should all be aware that some languages can be read in a different way than the one we use, from left to right, right to left, or vertically. The layout of a product should change based on the direction the language uses — switches are flipped, calendars are adapted, alignment is reversed, and so on. Below is an image from web.dev showing where a user starts to parse content, top left for the Latin alphabet, top right for Arabic, Japanese, Chinese, or Hebrew alphabets.
Below is an example of how the same screen could look with different layouts in Spanish, Japanese, and Arabic. Notice how the content is reversed in Arabic. In Japanese, the difference is more subtle as the line height is adapted to make the text more readable. All of these changes should be documented in a design system, such as Apple, Google, or SalesForce.
It is also important to embrace the tools we use when it comes to design. Figma and Sketch do not support natively vertical layout for strings for example but it may in the future ion. As designers, we need to recognize the current limitations of the tools we use to create our products.
Final word
Internationalization can be viewed as more than just a problem to be solved. It can also be viewed as a positive and accessible opportunity. As the world and its users continue to evolve, we must embrace this ever-changing journey and maintain our passion for the world around us. In this article, we covered several topics that deserve their own dedicated content: accessibility, inclusion, diversity, and culture. One thing I have learned and have always kept in mind is that design is not fixed; It evolves, and so should we.
🧑💻 This story was originally posted on my website. 🆇 Follow me on X!
