The Source is a fortnightly letter from Prototypr for its community of ~600k viewers. Written by Sophie Clifton-Tucker, The Source tackles taboo topics, exposes unseen truths, and gets the scoop on the latest in the tech and design sphere.

Rampant ‘rona and her lockdowns taught the world something the design world already knew: remote collaboration is a vital tool – we’ve been doing it for years. Tools like Figma, InVision, RealtimeBoard, and Mural were some of the first to replace whiteboards with digital spaces and make real-time collaboration a core feature.

Seemingly overnight though, there was a global shift from the physical realm to digital across other industries, where remote work wasn’t really a thing. The message was clear – adapt your working style, or lose it altogether.

As the world grappled with the new normal, online job boards such as on Dribbble and We Work Remotely became a hive of activity. As a result, teams are becoming more international (except in companies “hiring globally…as long as you’re in the US” 😛). And as our teams changed, so did the tools and languages used. Take Figma and Notion, for example:

🌍 Localisation, Languages, and Listening: With a single workforce comprising multiple nationalities across a number of countries (here at Prototypr alone, we’re spread across Gibraltar, China, Taiwan, Mongolia, and Madrid), it’s important that the tools we use work for equally everyone. Figma is a great example of how a tool can be localised for different team members. Figma recently announced that they now offer RTL language support (hurrah!), at last solving the tricky issues like cursor navigation, text wrapping, and situations where heuristics fail. The team have also expanded their offices to Paris, Berlin, and Japan so as to expand their language support and learn how to best adapt Figma to these regions.

🇯🇵 Notion in Nihon: Notion has always taken great strides with regards to collaboration/localisation. Like Figma, they wanted to grow their presence in Japan; at the time there was already an active community of users in Japan, but they were of course all using the app in English. By adapting for an international audience, Notion has cleverly opened the floodgates for plenty more non-English speaking users.

Through collaborative web apps, you can be working on a document on your laptop in a cafe in balmy Blighty whilst your colleague adds notes to it in real-time from the 124th floor of the Shanghai Tower.

But it’s not enough to simply take your product online; different jurisdictions come with their own beliefs, languages, and cultural quirks that all need to be taken into account during the design stage.

Sorry if I butcher your name

With the web making the world an increasingly smaller and connected chunk of dirt, it’s a big no-no to think of your own culture or language as the standard, the ‘main one’ – or heaven forbid, the ‘right one’. Just as important as learning someone’s name.

The bottom line is, if you’re not prepping your product for localisation and designing with other cultures in mind, you’re limiting its full potential, functionality and reach – even alienating people in the process. Not sure how it works? Grab a pencil and a cuppa:

🌐 Internationalisation vs Localisation

As we build the new Prototypr platform with different cultures in mind (starting with Prototypr en español), we’ve been exploring localisation over the past month.

🚧 @Prototypr en español is coming back! cc 👋@helloelba @diegonmtz

Here’s the start of the locale switcher on the new platform – we’ll finally have a clear space made for Spanish readers 🎉, where it can’t get lost amongst all the English pic.twitter.com/g0B0LY87Uk

— graeme (@graeme_fulton) April 11, 2022

We touched upon internationalisation (AKA ‘i18n’ or ‘globalisation’) and how this paves the way and provides the building blocks for localisation (or ‘l10n’).

Without first applying internationalisation, when it comes to adapting your product for different audiences later down the line, you’ll be met with the time-consuming process of having to delve back in and write additional code.

The key thing about the Web is that it is universal. One of the most important actions taken at the start – to make sure the Web was for everyone – was Internationalisation.
– Tim Berners-Lee, inventor of the Web –W3C

Some examples of internationalisation include:

• having Unicode support;
• designing your code to allow for text expansion, resizing, and bidirectional text;
• using descriptive variable names.

Chen Hui Jing unravels the CSS-related aspects of multilingual support in his brilliant article on CSS for internationalisation. As Chen Hui explains, “Internationalisation is more than translating the content on your site into multiple languages and calling it a day.”

📍Typefaces for the world

• Once the prep work is in place, it’s time to get inside the mind of your target users. What is their preferred mode of communication? How do they typically lay out their web pages? E.g. in Arabic, not only does the text flow from right to left (RTL), but they tend to have images, such as banners, aligned right as a result. For a more in-depth how-to, take a peep at our article on Designing for Different Cultures.

• Arguably one of the most common considerations when localising a product is the font face. Some languages (e.g. Chinese or Hebrew) are more visually detailed than in the West, and therefore use more pixels than alphanumeric characters. Google have smashed it out the ballpark in this regard by creating a typeface that works for every language: Noto: A typeface for the world.

Thread on an ongoing font project, still in the initial stages; aiming to create fonts/font for as many Afrikan writing systems as possible😎 If you think you can help in any way, feel free to contact me via DM…will be sharing progress on this thread😃 pic.twitter.com/0LOxXqmnSL

— Tapiwanashe S. Garikayi (@Sebastiangary1) June 20, 2020

• Tapiwanashe is no stranger to designing fonts for different writing systems. His article Designing a font for the Mwangwego script published on Prototypr last week uncovers his very clever workaround for designing a font not yet encoded into the Unicode standard. But he didn’t stop there; as part of his relentless mission to make digital fonts for Afrikan writing systems, Tapiwanashe also designed a font for the Bassa Vah alphabet.

What I love about this stage of the process is learning how other people think, invent and everything else about their culture transmitted via language.
– Tapiwanashe S. Garikayi

– It’s not just about fonts, though; it’s important to get the translation side of things right to avoid any embarrassing blunders (like when I told my Spanish teacher I was feeling embarazada before a presentation and she sent me to the nurse’s office). UIslator is a nifty tool that has been designed to not only translate but also contextualise your copy. It’s currently available on Figma as a beta platform, and they’re working towards availability on the Sketch/XD/Studio platforms too. And just for fun, here’s a link to Polyglot: a real-time translator where you can compare multiple languages at once.

Beyond Localisation to Collaboration

We now more than ever find ourselves in an age where our colleagues are no longer able to gather round the same water cooler, instead clocking in from all over the world. Whilst this can lead to some grief (such as having to furiously Google the difference between GMT, CST, and PST), it’s largely been a hugely positive aspect.

Anyone in the world can use our app, but not everyone can understand it.

When international audiences come together

• There are a number of events and apps that see people coming together from all around the world – take Twitter spaces, for example: live audio conversations which people across the globe can join in as a listener or speaker. Twitter Spaces can be in any language, depending on who’s using it. Even if your locale is English, you’ll still be able to see Spaces hosted for other languages. Probably not a bad way to dip your toe into another language! (Duolingo if you see this I want credit.)
• Hopin is another product that encourages international, immersive experiences through their event management platform. Last year, they partnered with Interprefy to provide real-time translations during events held on the Hopin virtual event platform, taking localisation to a whole new level.
  
• And then of course you have your usual suspects such as Zoom, bane of my life since 2020, and more recently the Metaverse, where you can watch someone deliver a talk as 200 floating avatars struggle to find their feet as they fly across your screen.

How to design for global audiences

Slightly different to your collaborative apps like Figma or Twitter, there are the ones that largely cater to the individual users, but that have a staggeringly large international audience. How do they cater to such a wide array of diverse users?

– 🎧 Spotify: Designing for Belonging: Why Image Localization Matters

– 📺 Netflix: Localization Technologies at Netflix.

– 🛍️ Shopify: Psuedo-Localization: What It Is and Why It Matters

Check out our recent Twitter thread for more examples!

TL;DR

There are a number of ways to localise your product and as a result expand your market, and it doesn’t just involve translation.

This goes for the tools we use in today’s increasingly remote work spaces. Considering other cultures and languages is the key to collaboration.

Taking on board the quirks and nuances of a region will ensure your product is perfectly primed for your users, in an accessible way that doesn’t leave anyone feeling alienated. 👾