MORE FROM A BOOK APART

Expressive Design Systems

Yesenia Perez-Cruz

Resilient Management

Lara Hogan

Everyday Information Architecture

Lisa Maria Marquis

Progressive Web Apps

Jason Grigsby

Flexible Typesetting

Tim Brown

Going Offline

Jeremy Keith

Conversational Design

Erika Hall

The New CSS Layout

Rachel Andrew

Accessibility for Everyone

Laura Kalbag

Practical Design Discovery

Dan Brown

Visit abookapart.com for our full list of titles.

Copyright © 2020 Senongo Akpem

All rights reserved

Publisher: Jeffrey Zeldman

Designer: Jason Santa Maria

Executive director: Katel LeDû

Lead editor: Lisa Maria Marquis

Editors: Danielle Small, Caren Litherland

Book producer: Ron Bilodeau

ISBN: 978-1-937557-87-4

A Book Apart

New York, New York

http://abookapart.com

TABLE OF CONTENTS

Cover

Foreword

Introduction

Chapter 1. People and Culture

Chapter 2. Principles of Cross-Cultural Design

Chapter 3. Cross-Cultural Practitioners

Chapter 4. Cross-Cultural Research

Chapter 5. Culturally Responsive Experiences

Chapter 6. Internationalization and Localization

Conclusion

Acknowledgments

Resources

References

Index

About A Book Apart

About the Author

僕の人生を輝かせてくれた香織と夕茉へ。

Hen Ngom man Terrem, sha ciu peren zege mba mger.

To Denenge and Tindi, for always knowing the right words.

Foreword

Design is meant to solve problems. But, time and again, I have taken my money and attention elsewhere after witnessing a brand awkwardly attempt to be relevant on social media, or after experiencing an ignorant in-product gaffe. Without sensitivity and cultural awareness, even the simplest design choice can create experiential dissonance for product users.

Unfortunately, some of the biggest mistakes occur during the process of scaling design solutions from local to global. Mental models, interface functionality, tone of voice, even symbolism can change depending on cultural context—often within the same country. Imagine the diversity of expectations across the world!

That diversity is a given in our ever-evolving, global community. As smartphones continue to reach new markets, the impact of software—with both positive and negative outcomes—will likewise continue to grow. Technology increases productivity, of course, but it can also give people from wildly differing places and backgrounds the opportunity to better understand each other.

We as designers must embrace this opportunity, and that means incorporating more perspectives as often as possible. Cross-Cultural Design does just that—not merely as a call for increased diversity, but as a toolkit of methodologies to help us adapt to the obvious new normal.

Senongo's words have changed the way I ideate and implement solutions for millions of global users at large-scale companies. Cross-Cultural Design will do the same for you by empowering you to bring your work to more folks across the globe, make your product more usable in cultures beyond your own, and transform you into a more thoughtful, skillful practitioner.

—Catt Small

Introduction

The web is rapidly globalizing. More devices and more access points mean more people—billions, in fact—are coming online, bringing all the behaviors, expressions, and expectations inherent to their cultures.

This huge multicultural audience represents an opportunity for those of us who work on the web. It’s an opportunity to ask questions of them, to observe their lived social experiences, and to choose more effective solutions that fulfill their needs. It’s also an opportunity to critically analyze the impact of culture in interactive design, a process that makes our work stronger and more accessible in the global marketplace.

One of the biggest mistakes I see in design today is the assumption that users all come from WEIRD (Westernized, Educated, Industrialized, Rich, Developed) cultures. That assumption often flows unquestioned through our entire design process. Our high-quality monitors and fast data connections do not always mimic the experiences of our users. We use imagery, typography, and taxonomies familiar to us, without researching their impact in other cultures and languages. Those of us in WEIRD countries treat the web as an extension of our own lived experiences.

If you are reading this book, then you are interested in changing your assumptions about how interfaces and websites act across cultures. This book sets out a framework for navigating and designing the highly diverse web, in a way that breeds respect and curiosity.

You won’t find an examination of “diversity” as a business catchphrase in these pages. You most certainly will not learn empathy, or basic respect for other humans. You will, however, encounter challenges to design practices that you consider second nature, asking you to rethink, at a deep social level, how your choices impact your multicultural audiences.

Those choices will come in a variety of situations, and what is considered “cross-cultural” may be more common than you think! You might be working on a digital project with an existing global customer base. Perhaps you’ve already started, and after talking to the client, you realized the project will require more cultural sensitivity than you bargained for. Maybe you are a content strategist or user experience designer, and you are about to begin conducting research with a wide range of users from different cultures. Maybe you have been asked to perform an interface audit on a website for US-based dentists—of whom about twenty-four percent are immigrants, and four percent are not citizens (http://bkaprt.com/ccd/00-01/).

Or maybe—and this is the one I hope for most—you just want to deepen your skill set. Whether your work is in research, content strategy, interface design, or interactive experiences, your projects already reach a multicultural audience. Whatever your motivation, this book will help you address that audience with clarity and purpose.

  • In Chapter 1, we’ll start by defining our modern digital audiences and their experiences on the web. Then we’ll look at their needs and preferences through the theory of cultural dimensions.
  • Chapter 2 focuses on the core principles of cross-cultural design, offering a framework for working on culturally adaptable products and experiences. We’ll look at how to contextualize the challenges you face as you design across cultures.
  • In Chapter 3, we’ll explore the role of the cross-cultural practitioner. We’ll define the skills, actions, and ways of thinking that will make your projects and teams more successful as you take on this work.
  • In Chapter 4, we will look at techniques for conducting user experience research with global audiences—and how that research can help us create effective user personas that reduce unconscious biases.
  • Chapter 5 demonstrates how the core parts of design systems can become more culturally responsive and multifaceted, and offers practical steps for creating culturally effective design artifacts.
  • In Chapter 6, we address internationalization and localization—the processes of adapting your content, design strategy, and interfaces to accommodate additional languages, nationalities, and cultures.

Throughout, I use stories to examine interesting truths and quirks of culture as we examine those key concepts. Plan to read and analyze them critically. Treat these chapters as a manual, one that analyzes different parts of the cross-cultural design process and explains key ideas, concepts, and techniques you will need to tell your own stories.

By the time you reach the end, I want you to feel empowered to approach cross-cultural design projects in a new way. Even if it’s out of your comfort zone, I hope you gain a new perspective on what it means to be a designer in a globalized world and your role in making the web a richer experience for us all, regardless of language, culture, or identity.

Chapter 1. People and Culture

In 2016, I began working on a site redesign with the Regulatory Assistance Project (RAP), an organization that helps craft climate-change regulations in the EU, China, India, and North America. They approached our agency with a few key project goals; one was to make their global reach easier to understand, so we created a “Where We Work” page to display all their key regional actions on a map (Fig 1.1).

Website showing a list of countries and a map with China highlighted.

Fig 1.1: The Where We Work page of the Regulatory Assistance Project website highlights the areas where the organization works on the map (http://bkaprt.com/ccd/01-01/).

I found a northern-hemisphere map on Wikipedia and edited the SVG so it would spin to display different countries when their name was selected in the sidebar. I thought it was a really cool idea, and the client was on board too. Win-win.

But just before launch, we got a stern email from the client telling us the maps were wrong. “Wrong? How can they be wrong?” I thought. “Wikipedia is always right!” But in my rush to get the vector file ready for development, I neglected to note that the map:

  • didn’t include any countries formed after 2011, like South Sudan, and
  • didn’t identify disputed territories, like Kashmir, the Golan Heights, or Crimea.

In fact, there are many parts of the world that don’t fit into nice neat lines, including the borders of China, India, and Pakistan—right where RAP does a huge amount of work. Oops. We quickly made the corrections (Fig 1.2).

Displaying only one view of those disputes meant that we were not participating in the dynamic, socially enacted process of culture—what Huatong Sun, an associate professor of digital media and global design at the University of Washington Tacoma, called “emergent, becoming, practiced, temporal, and thus contested” (http://bkaprt.com/ccd/01-02/). Human societies are always in flux: we endlessly remake our identities, our languages, and our methods of communication. We constantly negotiate our interactions, intentions, and meaning through language, technology, art, and the environment—and the web is part and parcel of all that.

Cross-cultural design is a complex topic. Cultural misunderstandings can lead to discomfort, embarrassment, and offense, hurting users and ruining brands. We don’t want to make choices that fail with a multicultural audience, so we often avoid thinking about it.

Map of Asia showing India and China with the Aksai Chin region between them highlighted.

Fig 1.2: We updated the maps to show disputed regions in each country. For example, both India and China claim a region in the Himalayas, which can be seen when both countries are highlighted.

But every project is an opportunity to design for and with people from every niche, and to build loyal users who keep coming back to your content. A design methodology that is culturally responsive and attuned to what global audiences need and want is one that will win in the long term. Later on, we will look at facets of culture and how they can inform design decisions, but first, let’s start by defining modern digital audiences and their cultural experiences online.

Modern Global Audiences

Who makes up the web these days? What do they look for in the digital things they use? What role does the web play in their lives, especially when they span languages, time zones, and political systems? If we can answer these questions, we can see the web as a set of widely differing life experiences, a mix of cultures and technologies, instead of the monolithic “user” we so often default to.

Devices for all

A great place to start understanding those varied experiences is by looking at mobile phones, a common way people access the internet. The Pew Research Center (http://bkaprt.com/ccd/01-03/) conducted an extensive survey of device usage patterns in eleven countries and found the following:

  • Phone ownership. Majorities in every country surveyed own their own mobile phone. Overall, about seven percent of adults share their phone, though that ranges from one percent of adults in Vietnam to seventeen percent of adults in Venezuela.
  • Smartphone usage. In the surveyed countries, younger people use smartphones at a much higher rate than those older than fifty, except in Lebanon and Jordan.
  • Dual device usage. Having a home computer and a tablet is uncommon for most internet users. Only thirty-four percent of those surveyed have access to either of these. In Jordan, half of smartphone owners report having no home computer or tablet; in Venezuela, only eighteen percent said the same.

This data on phone usage and ownership begins to show just how important it is to be connected for people in cultures across the globe. Mobile devices give people access to news and information, to each other, and to the world at large.

Access for all

The number of global internet users creeps upward every year. As of July 2019, the We Are Social and Hootsuite Global Digital Reports estimate that fifty-seven percent of all people use the internet (http://bkaprt.com/ccd/01-04/). That’s wild. When I was a child, such a thing couldn’t be imagined except in science fiction, and now there are 4.3 billion internet users around the world—and 366 million more of them have joined since 2018 alone!

But those numbers tell us there is still lots of work to be done to make the web a more welcoming place for everyone. Even as the number of users goes up globally, the benefits of connectivity are not being shared equally. The 2016 World Bank Digital Dividends report (http://bkaprt.com/ccd/01-05/, PDF) found several troubling statistics on internet access (Fig 1.3):

  • In Latin America, fewer than one in ten poor households is connected to the internet.
  • In the Central African Republic, a month of internet access costs more than 1.5 times the annual per capita income.
  • In Africa, the median mobile phone owner spends over thirteen percent of their monthly income on phone calls and texting.

One chart breaking down internet access for the total global population, and a second chart showing offline populations by country.

Fig 1.3: Though the numbers go up every year, the internet remained unavailable, inaccessible, and unaffordable to about half the world’s population as recently as 2015 (http://bkaprt.com/ccd/01-06/).

And yet, there is progress. For people who traditionally haven’t had access to the web, technology is gradually bringing them online. Mobile phones are a key driver in the growth of internet connectivity across the world. A full ninety-six percent of the world’s population lives in range of a mobile network. The number of people using mobile phones grew by about 2.5 percent last year, and internet usage has grown by 8 percent since 2018. With the right device (and enough money, of course), almost anyone can now get online. That is progress!

When people do get access, the amount of information they consume also keeps growing. A report by Ookla on connection speeds and data shows that from 2017 to 2019, average mobile data speeds worldwide increased 21.4 percent, to 27.69 Mbps (http://bkaprt.com/ccd/01-07/)! With that speed, users can stream video, download music, and play online games.

These people are the modern web. They are the audiences you are either designing for now or will be designing for in a few years. While the numbers may seem huge and abstract, keep in mind that behind each stat is a person logging on for the first time, sharing pictures of their child with family overseas for the first time, or even making their first website on a mobile phone. Your modern audiences come in all shapes, sizes, life experiences, and opportunities, and it’s our job to design with their needs in mind.

The obvious way

When it comes to the mobile money experience, things get even more interesting. Thirty-seven percent of internet users, or 2.8 billion people, shop online. They collectively spent about US$1.78 trillion in 2018, which is slightly more than the entire GDP of Canada in 2017. They are what experience designer (and “closet anthropologist”) Stephanie Rieger calls a “highly globalized group of digital-first consumers” (http://bkaprt.com/ccd/01-08/). To accommodate these new customers, business models need to rethink how people spend money and how they access the internet.

Look at the success of M-Pesa, a platform designed to do just this. The mobile money platform is an essential tool for millions in East Africa, allowing them to save, transfer, and pay money all from their mobile phones. The Economist said: “To Westerners, ‘mobile banking’ is a new way of doing something old. To many Africans, it is the obvious way of doing something new” (http://bkaprt.com/ccd/01-09/).

Chinese “super-apps,” so called because they provide an entire ecosystem of ecommerce and social services, show us yet another “obvious way” that modern audiences are handling money online. The app WeChat enables its one billion monthly active users to pay school tuition, transfer money to friends, and even take care of rent. Barclay Bram, a PhD candidate in anthropology at the University of Oxford, wrote about his experiences using WeChat for even the most mundane transactions:

I open the Meituan delivery app and scroll through all the coffee options around me. I order an Americano. I have my WeChat linked with the facial recognition scanner on my iPhone; when I pay, I just hold my phone up to my face and a green tick flicks across the screen. Seven minutes later, I get a message telling me the coffee is on the way, with the name and number of the delivery driver. It arrives at 9:53. (http://bkaprt.com/ccd/01-10/)

The web keeps evolving. Old barriers to access are falling, smartphones are taking the place of feature phones and computers, and mobile networks are handling more data every day. As access increases, so does the number of potential users our digital experiences can reach.

Interfaces as Cultural Products

Nathan Shedroff, a strategist and executive director at Seed Vault Ltd., describes digital interfaces as “cultural products,” things that mediate our social activities (http://bkaprt.com/ccd/01-11/). Databases, websites, mobile apps, social-media platforms, and (especially) intranets are all systems that reproduce, revise, and amplify different parts of our cultures—both good and bad. They illuminate our preferred methods of communication, our social rules and perceptions, and even our aesthetics.

Culture and communication

The most well-designed interfaces reinforce the ways that people like to communicate with, and about, each other. How a society talks about itself can take many forms, but some of the most interesting examples are sites that focus on reproducing and communicating culture from a government’s perspective. These act as digital products that serve millions of people—all with differing motivations and goals, but all in need of a shared understanding of their country’s norms and laws.

GOV.UK is one such example. In 2012, the United Kingdom set out a radical new vision for how the government would interact with citizens. The Government Digital Service (GDS), a group of strategists, technologists, and designers, built GOV.UK to provide a single point of access to government services (Fig 1.4). No longer would information about value-added tax, or land registries, or immigration regulations be buried under poorly designed and overwhelming HTML pages.

National Insurance page on GOV.UK demonstrating how content is surfaced clearly and written in plain language.

Fig 1.4: GOV.UK stands out as a digital strategy that has become a cultural product, representing how the citizens of the UK want to interact with their government.

For instance, the GDS worked with Her Majesty’s Land Registry to create a single database of all land restrictions on things like conservation areas and historic buildings (http://bkaprt.com/ccd/01-12/). Working with 316 local authorities, they replaced the inaccurate, manually updated registries with a new single format for the entire country. They rewrote the registry interface in plain English, and made sure all information was automatically checked against a mapping database and standardized. Along with many other transformations like this, the GOV.UK site helps citizens mediate their interactions with the government and eliminates the capriciousness and slowness that many cultures associate with bureaucracy—inspiring similar initiatives all over the world.

Culture and perception

Culture can also change the way people perceive your design and content. Different societies may expect different things from digital interactions, interpret information differently, and hold different mental models than your own. Don’t assume those mental models are fixed within the same country or culture, either. (This is another reason why research is so important, which we’ll talk about more in Chapter 4.)

Your users’ varied mental models can impact the layout, microcopy, or even information architecture of a site. In a 2003 study, researchers compared the mental models used by Taiwanese and American consumers when shopping online for home goods (http://bkaprt.com/ccd/01-13/, PDF). Participants in Taiwan had better recall and made fewer errors during testing when using a thematically organized taxonomy, where products were grouped according to their location in a house (Fig 1.5). For the American participants, a functional taxonomy—where products were grouped according to their purpose—was more effective (Fig 1.6).

In a 2013 study, Bijan Aryana, a senior lecturer at the Chalmers University of Technology, analyzed how Turkish consumers interacted with the default contacts app of their Android phones and how that behavior was connected to their cultural norms (http://bkaprt.com/ccd/01-14/). Turkish culture is collectivist (we’ll talk about that more in a moment), emphasizing the power of in-groups—families and communities—to provide safety, stability, and connections (http://bkaprt.com/ccd/01-15/). Because of this norm, many Turkish users value the ability to quickly access their in-group contacts in an interface.

Aryana asked research participants to draw their preferred organizational system for their contacts list (Fig 1.7). In contrast to the alphabetical organization of the given Android contacts app, the participants wanted the ability to:

  • organize their contacts into hierarchies, and
  • create an in-group of contacts, based on frequency and importance.

Box-and-arrow sitemap for a home goods website, showing top-level categories for Kitchen, Bedroom, Bathroom, and Laundry Room.

Fig 1.5: A sitemap organized thematically, according to a product’s place in the home.

Box-and-arrow sitemap for a home goods website, showing top-level categories for Appliances, Home/Personal Fashion, Cleaning, and Paper/Plastic Products.

Fig 1.6: The same sitemap organized functionally, according to a product’s purpose or use.

When I spoke with Aryana about this research, he pointed out that users wishing to modify and adapt standardized taxonomies is a common theme, but can be missed by teams that don’t research cultural perceptions: “For any design project, there is a need for fresh research rather than relying on what we assume we know about a culture, community, or social group.”

These two examples show how our interfaces should offer humans the mental models they are familiar with; research can help teach us what those are. The more we can align our taxonomies and interface structures with our users’ expectations, the more effective our designs will be.

Culture and aesthetics

Culture has a huge, yet often overlooked, effect on what we consider aesthetically pleasing. It’s common for Western designers to point to concepts like rational type systems, clean lines, an absence of decoration, and mathematical layout grids as universally “good” design without realizing that most of those principles originated in the century-old Bauhaus movement.

Founded in 1919 in the city of Weimar, Germany, the Bauhaus school, and later movement, aimed to create a union of all the arts, from architecture and product design to typography and graphic design. It was a clear cultural response to the hugely destructive First World War; Western Europe craved order, simplicity, and a new way of thinking about modernity. In the New York Times, Nikil Saval wrote that “the Bauhaus began as a protest against the thoughtless direction of industrialization, the harm it did to mind and spirit” (http://bkaprt.com/ccd/01-16/).

Aesthetics are a function of the products and experiences we design. But rather than base them only on WEIRD cultural principles, you should base them on what modern cross-cultural audiences find pleasing. And that’s a challenge, since beauty and form are perceived differently across cultures; we cannot actually say that our design work, in and of itself, has aesthetic value (http://bkaprt.com/ccd/01-17/).

So how to apply this thinking to your work? Start by asking yourself some pointed questions about what constitutes “attractiveness” to your audience and what will present your content in the most aesthetically pleasing light. Evaluate those cultural preferences across major visual design elements:

  • Space. What information density feels most appropriate for your audience? For example, in Japan, web pages with high information density are considered functional and aesthetic (http://bkaprt.com/ccd/01-18/). This preference goes against the Western aesthetic impulse to include ample negative space. Consider the homepage for Japan Post, the national Japanese postal service (Fig 1.8). The page in Japanese and the page in English both contain the same functional elements: logo, main navigation, package tracker, and so on. However, the information density of the Japanese page is almost double the English one, containing many more icons, text, links, and even two competing logos in the header.
  • Imagery. What images reflect the impulses and biases of your audience? Attractiveness will rarely extend to putting literally attractive people in all of your site images, but it’s worth noting that people love to see themselves reflected. Some cultures may have a taboo against certain images or expressions of beauty. For instance, in Nigeria, using your left hand to give things to people is taboo; a photo of a customer using their left hand to give money to a shopkeeper would stand out as a faux pas.
  • Color. What palettes create a harmonious effect in the eyes of your audience? In the Japan Post example, red is their primary brand color, but it also matches the color of post boxes all over the country, creating a familiar connection for the audience. Color also carries culturally symbolic meanings; the color green is sacred in Indonesia, for example, but in American culture, it often signifies money.
  • Type. What typographic scales and hierarchies are most natural for your chosen culture? Your readers’ language direction may be left to right, or right to left; what does that mean for your interface? The density of certain scripts such as Japanese, or the relative length of words in a language like German, means that your type scales, letter-spacing, and line-heights will need to be adjusted to achieve optimal aesthetics. (We will look at this in more detail in Chapter 5.)

(Top) Japanese Post homepage in Japanese, showing high information density. (Bottom) Japanese Post homepage in English, showing less information, more prominent imagery, and more white space.

Fig 1.8: The information density of the Japanese page for Japan Post is almost double that of the English-language page.

Ask yourself these questions from your own cultural point of view, but then take a step back. It is up to us, as designers, to understand and then account for those aesthetic preferences. What you value in a graphic design aesthetic will not always match what others think is beautiful.

The Identity Factor

Designing for a global audience goes beyond crafting culturally relevant aesthetics. You need to take your users’ identities—social class, gender, religion, and even personal preference—into account.

When we talk about people’s identities, I want to make it clear that they are not fixed. Identities shift and change over time, and culture, which defines those identities, changes constantly too. However, there are specific lenses we can use to examine how people view themselves, and how their cultures view them (http://bkaprt.com/ccd/01-19/, PDF). Humans of all stripes come “preloaded” with a number of identities that shape how we view ourselves and others—and how others view us. These facets include:

  • race,
  • ethnicity,
  • gender,
  • social class,
  • age,
  • religion,
  • individual identity, and
  • algorithmic identity.

As we design culturally relevant digital experiences, we will need to take these factors into account. Let’s look at them in more detail from a design perspective.

Race

Race is based on physical characteristics: skin color, eye color, facial structure, hair color, and so on. Your racial identity is something imposed on you by society. It’s not a choice you make; it is how you are seen by others. In every society, racial identity is used as a tool to maintain the power structures of some groups, oppress others, and assign value.

Our design choices—particularly photos and illustrations—can either reinforce racial dynamics or confront them. Stock photo sites like Tonl make it easy to find images that affirm the diverse racial identifies of global audiences (Fig 1.9).

Ethnicity

Homepage for Tonl.co, showing a woman in a colorful headwrap and the headline “Premiere Diverse Stock Photos”.

Fig 1.9: Tonl.co is one of a new wave of modern stock photo startups that explicitly reference race and skin color in their content strategy and brand marketing.

Ethnicity refers to an affiliation with a set of cultural markers—such as language, tradition, religion, and geographic region—that you see as part of your identity (http://bkaprt.com/ccd/01-20/). People often confuse racial and ethnic identity, but they aren’t the same thing; racial identity is something imposed and enforced externally by society, whereas ethnic identity is less institutionalized, and more about individual history and cultural participation. For instance, look at the ethnic identities of basketball star Giannis Antetokounmpo. He was born in Greece to Nigerian parents, grew up there in a Nigerian household, and now plays for the Milwaukee Bucks in the United States. He belongs to and understands his Greek, Yoruba, Nigerian, and American ethnicities. Identities can be a bit complicated, right?

Gender

Your gender identity is your understanding of how you feel in relation to being male or female. It comes from an internal place, and may or may not match your biological sex, or the gender role society has assigned you (http://bkaprt.com/ccd/01-21/).

Gender roles refer to the behaviors, attitudes, and expressions that society expects from people of the same gender identity or biological sex. Similar to race, these roles are externally enforced.

As designers, one of the most important things we can do is enable accurate representation of our users’ gender identities. In their article “Trans-inclusive Design,” Erin White, head of digital engagement at Virginia Commonwealth University Libraries, suggested several tactics for giving people control of their names and representation in digital spaces, including getting rid of “real name” requirements, building name-change processes into user profiles, and allowing users to erase their identity records from your database (http://bkaprt.com/ccd/01-22/).

A poor understanding of gender identity can warp digital projects. Even in markets where gender roles and identities are more rigid, it is still possible to choose design defaults and strategies that do not make assumptions. For example, the website for the health insurance company One Medical uses a registration form that lets customers add additional gender info as they see fit (Fig 1.10). The form field is accompanied by text reassurance that the information will not be shared; however, it would be even better to include additional context about how the data will be used, how it will be protected or encrypted, and what users can do to change or delete it in the future.

Social class

Social class is the level of society you belong to, by birth or aspiration. Every culture identifies social class in different ways, but they are all tied to wealth and power.

In the US, for instance, higher education is often marketed as a tool for members of lower-status groups to gain status (http://bkaprt.com/ccd/01-23/). However, the costs involved can be astronomical. The College Board, a nonprofit that helps expand access to college education, reported that average yearly tuition and fees at private four-year institutions was US$35,830 in 2018–19 (http://bkaprt.com/ccd/01-24/, PDF).

Sex and gender form for One Medical showing a blank text field under the heading “Gender Information (Optional)”.

Fig 1.10: The One Medical signup form lets people offer additional information about their gender identity.

Paying for that typically means taking on huge amounts of debt. So when Wellesley College’s website emphasizes that a typical student will incur only US$16,000 of debt for all four years, that sounds like a pretty good deal for a chance to move up the social ladder (Fig 1.11). The site features images of young people wearing casual clothes, engaged in quiet study and discussion. They don’t display markers of wealth or power, like expensive electronics or accessories. The message of this page is that more aid and less debt will help students access “the world’s most powerful women’s network.” Access to influential people and social status is an explicit selling point for prospective Wellesley students, and it is marketed very effectively here.

Cost and Financial Aid page for Wellesley College showing statistics about student financial aid.

Fig 1.11: The Financial Aid section of the Wellesley College website shows social-class identity in action.

Age

Age identity can reflect how different age groups interact with one another, as well as how they communicate among themselves, building a shared identity to define their generation. I vividly remember my father sitting on our porch in rural Nigeria in the 1980s, listening to the Voice of America on a small AM/FM radio. These days, I do something similar, but I check my Twitter feed for news instead.

Younger generations are often quicker to adopt emerging technology, approaching it with different ways of thinking than the (often older) creators of that technology intended. Young people these days do much of their thinking and communicating in what researcher Julia Sefton-Green calls the “digital bedroom” (http://bkaprt.com/ccd/01-25/). For wealthy kids in WEIRD countries, there’s a good chance this maps to their actual bedroom, with access to high-speed Wi-Fi and connected gadgets. But for many other young people, the exploration of technology happens in different contexts.

In “Design Principles for Indigenous Learning Spaces,” researchers at Australia National University’s Centre for Aboriginal Economic Policy Research defined a set of design principles for Aboriginal youth as they explore digital technology. The researchers state:

There are few spaces in the public domain where Aboriginal people experience a sense of control… Although access to technology in many remote communities may still be mediated through a non-Indigenous ‘gatekeeper’, the emergence of affordable small, mobile digital technologies including mobile phones, [and] laptop computers has brought technology into the everyday lives of Aboriginal people, especially young people. (http://bkaprt.com/ccd/01-26/)

They recommend creating safe spaces for young people to learn and experiment with technology. As designers, our interfaces should create pathways for them to define themselves. The age of your audience can define how they interact with your digital experience, often in surprising ways.

Religion

Religious identity is how you define your spiritual beliefs, and how your community defines your spiritual responsibilities. In designing for people in religious (and secular) societies, you must be aware of the prevailing belief systems and mores, and how they impact social behavior and perception.

In 2018, the company ConvertKit announced a rebrand—a new look, a new brand strategy, and (their biggest change) a new name—to match their growing organization. Their CEO announced that ConvertKit would be called “Seva,” based on the old Sanskrit word meaning “selfless service.” Since the company’s mission was to serve their customers, the new name captured that ethos. ConvertKit had already spent close to US$500,000 buying a domain and designing marketing collateral, a design system, and a new identity system (http://bkaprt.com/ccd/01-27/).

However, seva (ਸੇਵਾ) does not simply mean “selfless service.” It is a holy practice, as Hindu and Sikh people quickly pointed out to company leaders; it means giving generously to others out of love. Using seva as a name for a capitalist service was offensive and out-of-bounds.

ConvertKit stopped the rebrand and apologized; the CEO acknowledged that he didn’t do his homework, and thanked the people who helped him learn, even though they were under no obligation to educate him (http://bkaprt.com/ccd/01-28/). Moral of the story? Don’t appropriate elements of religious identity—or you’ll end up spending a half million dollars to offend 1.18 billion people.

Individual identity

Your own view of yourself is shared by no one else. Individual identity is complicated, nuanced, situational, and ever shifting. As designers, we can manage this fragmentation by designing in ways that celebrate individual complexity. Don’t attempt to railroad your audience into preset identities. For instance, my LinkedIn identity is very different from my Twitter identity, and may even change day to day. Luckily, LinkedIn respects that difference; they don’t insist that I add a Twitter handle to complete my profile, or bombard me with warning messages when I don’t. Treating individual identity as fluid and contextual seems like the most honest way to go about building a web for all.

Algorithmic identity

When individual identity moves online, it becomes filtered, categorized, and surveilled. John Cheney-Lippold calls this algorithmic identity. It refers to the “categories of identity covertly assigned to you by means of algorithmic analysis of the data that an organization such as a web analytics firm has amassed on you” (http://bkaprt.com/ccd/01-29/).

In Digital Dead End: Fighting for Social Justice in the Information Age, professor Virginia Eubanks talks about the experiences of women who got assistance via Electronic Benefits Transfer (EBT), a system meant to provide poor Americans with monthly financial assistance (http://bkaprt.com/ccd/01-30/). Because of the way the EBT system collects and tracks data about its recipients, it effectively creates shadow identities that are almost impossible for users to access, limit, or correct. This makes EBT recipients more vulnerable to the whims of police, caseworkers, employers, politicians, and any other powerful party with a stake in the EBT system.

As web professionals, we must be careful not to deliberately (or accidentally) enable this “hidden legislation.” Make sure users always have access to and control over their digital identities.

Cultural Dimensions

Just as individuals have identities, so do nations and cultures. Geert Hofstede is a Dutch cultural anthropologist who, in the early 1980s, interviewed hundreds of IBM employees in fifty-three countries about how their cultures were organized. Because all of the research participants were IBM workers, and therefore part of a single business culture, Hofstede felt he could put their differences down to something else—their national cultures.

Over the next thirty years, he developed his findings into a taxonomic view of cultural dimensions (http://bkaprt.com/ccd/01-31/). Hofstede’s work has been validating for me. As a biracial Nigerian who has lived on three continents so far, it’s comforting to see my own observations of different cultures backed up by a carefully researched framework. His research has helped me make better design decisions.

Let’s take a look at what Hofstede’s cultural dimensions are, how they relate to design work, and what we should watch out for. Later, we can ask ourselves if this kind of taxonomic framing is beneficial or not, but first, let’s lay all of the dimensions out:

  • Power Distance
  • Individualism versus Collectivism
  • Femininity versus Masculinity
  • Uncertainty Avoidance
  • Long- versus Short-term Orientation
  • Indulgence versus Restraint

Power Distance

The first dimension is Power Distance (PD), which refers to how less powerful members of a society both accept and expect that power is distributed unequally. Lower PD means that members of the society can openly question authority and the distribution of power. Higher degrees on the index mean that there is a clearly established hierarchy that is not openly questioned.

Societies with low PD see relationships between leaders and subordinates as much more equal. Businesses and organizations have less of a difference in salaries and worker status, and students are on a more friendly basis with teachers. Parents and children may not be equals, but the lines of respect go both ways. Ideas of equality are welcomed and expected.

In contrast, societies with high PD are much more likely to have extreme hierarchies in business and government, and with that, large discrepancies between salary and status. Parents and teachers demand respect, and children and students almost automatically put their elders on a pedestal. Inequality is expected and even promoted.

Let’s take a look at a real-world example. The University of Colombo in Sri Lanka displays high PD on their homepage by prominently displaying university leaders (Fig 1.12). A page titled People (under the About section) displays links to the chancellor, vice-chancellors, and other members of leadership. Almost half the news images on the homepage are of people receiving awards or commendations from senior staff members. In both imagery and architecture, Power Distance is highlighted and reinforced.

University of Colombo homepage with photograph of professor and headline “Newly Appointed Vice-Chancellor.”

Fig 1.12: The University of Colombo website illustrates high Power Distance with imagery and language that reinforce authority and status.

Questions to ask yourself as you design:

  • Who gets access to this information? We often say that information on the web wants to be free. However, cultures with high PD will restrict access to certain kinds of content, or will need to organize information by credentials, degree, or status.
  • What symbols of hierarchy or power will my audience accept and welcome? These can be moral, national, religious, or other widely accepted markers of authority, such as a Christian cross, a flag, a national animal, or even a political figure.
  • What visual and contextual markers of expertise and authority should I use? Do those in power have their degrees, certifications, or signs of authority prominently listed? In the United States, it is almost a given that when visiting a doctor’s office, their diplomas and certifications will be hung on the wall behind their desk; how would this translate to a digital experience?
  • How does the perception of authority affect the delivery of information? One of the trends you see in the West is AI-powered customer service. However, the medical advice of a chatbot on a healthcare site may not be trusted by members of a society that values high Power Distance, because the bot lacks credentials.
  • What mental models and taxonomies will my audience recognize and accept? For instance, for the faculty section of a university site, a shallow and wide taxonomy (Home > Lecturers > All) may work better for cultures with low PD. For a high-PD culture, however, a deeper page structure that prioritizes leadership or executive officers (Home > Authorities > Department Heads > All) is a stronger model of hierarchy and seniority.

Individualism vs. Collectivism

The second dimension is Individualism versus Collectivism (IC). In individualistic societies, people have loose social ties to one another. At work, they value personal opinions, challenges, and material rewards. Their relationships with others are centered around self-respect and honesty, and using guilt is the best way to affect personal change. On a governmental level, they believe in a strong right to privacy, limited use of state power, a strong free press, individual interests over group interests, and self-determination. Sound familiar?

Now over to collectivist societies. They are defined by close-knit webs of friends, extended families, and other social groups; everyone belongs, in some way, to a larger group. At work, people value training, and believe that work (and the mastery of skills) has intrinsic value. Avoiding shame, saving face, and maintaining harmony within the group are the best ways to affect personal change. Governments have tighter control of the press and the economy, and prioritize consensus and social harmony over personal freedoms.

In the IC dimension, Iran is a more collectivist culture. You can see those values expressed on the Iran Tourism Board website (Fig 1.13), through the headline “Guests are friends of God,” messaging that emphasizes hospitality, and a request to tourists to “spread the word back home.” The copy repeatedly uses plurals like “they” and the photos emphasize groups and relationships.

Footer for Iran Tourism Board website shows photographs of groups of people and language describing the hospitality of Iranians.

Fig 1.13: Iran ranks lower on the IC scale, meaning it is a more collectivist culture. In the footer of the Iran Tourism Board website, we see messages and images promoting social groups and community hospitality.

Questions to ask yourself as you design:

  • How do I show evidence of success in society? Collectivist societies will respond better to group harmony and the achievement of sociopolitical goals, while Individualistic societies will be drawn to displays of personal success and material wealth. This is true in imagery as well: collectivist societies may prefer seeing people in groups, while individualistic societies may prefer images of people working or living alone.
  • How do I handle personalization concerns? Are people comfortable providing personal information to websites and digital communities? For instance, while users from a more individualistic society may want to highlight personal achievements on a résumé or portfolio site (“I won silver in the 400m”), those from a collectivist society may instead want to highlight their group or team achievements (“My team medaled a number of races, including silver in the 400m”). Ensure that your UI and database don’t require people to enter information that over-personalizes their profiles.
  • What voice and tone are appropriate for my audience? Is it party-line slogans and official messages, or assertive, even argumentative language and imagery that demonstrate personal viewpoints?
  • How do my users make decisions? Are they motivated by external rewards, such as money or personal recognition, or by internal ones, such as the mastery of a skill? Do they want to avoid guilt, as in individualistic societies, or do they want to avoid social shame, as in collectivist societies? Consider how content elements like instructions, calls to action, and tutorials might change to reflect these values.

Masculinity vs. Femininity

Masculinity versus Femininity (MAS) is the third dimension in Hofstede’s system. Keep in mind that the terms “masculinity” and “femininity” are based on traditional gender normativity, and are not the best labels for the qualities Hofstede was trying to describe.

The Masculinity dimension defines a society that prefers assertiveness, achievement, heroism, and toughness. Gender roles are strictly maintained, and there is little sympathy for those who are deemed weak or overly caring. At work, people value financial and social rewards for achievement or career advancement. The political sphere is usually dominated by men, and there is little public support for people who don’t conform to traditional gender roles and expressions.

By contrast, Feminine societies prefer cooperation, modesty, and quality of life. The vulnerable are cared for, and there is less competition for resources and rewards. Gender roles are not rigidly enforced. At work, people value good working conditions, collaborative and balanced relationships with their coworkers, and a promising and secure career.

In the case of parenting website BabyCenter, this dimension shows up as an automated part of the user experience (http://bkaprt.com/ccd/01-32/). When a user posts a message with an acronym (“DD”), the system automatically adds the meaning in parentheses (“dear daughter”) (Fig 1.14). This functionality helps clarify in-group language for new users, demonstrating care and attention; the language itself reflects a culture that is comfortable with shorthand and publicly expressing terms of endearment.

Babycenter.com forum post with the headline “What do these abbreviations mean: DD, DS, LO…?” and showing the abbreviations automatically spelled out.

Fig 1.14: Babycenter.com uses an algorithm to provide helpful explanations of the empathetic shorthand its users write in, such as DD (Dear Daughter) and DH (Dear Husband). It is a good example of how an interface can reinforce feminine or masculine language.

Questions to ask yourself as you design:

  • How are opinions highlighted? For example, in a site that examines and explores a complex or controversial political or social issue, does the design portray politicians and advocates as strong and assertive—such as large blockquotes attributed to one person—or as modest and cooperative—like a series of nuanced Q&As, and avoidance of personal attacks?
  • What voice and tone are appropriate for my audience? In a feminine-oriented society, where caring for others is a priority, the language may be more helpful and cooperative. For instance, links to support might be labeled “How Can We Help?” instead of a more competitive phrase like “Find Answers.”
  • Does my imagery focus on cooperation and empathy, or achievement and toughness? For instance, a site for a new architectural development might feature photos of men and women in the act of playing with children, attending to a neighbor with special needs, or helping keep their public areas clean. Conversely, in masculine-oriented cultures, illustrations of residents surrounded by evidence of their wealth, having “won” at the game of life, may play better.
  • Are competition and comparison a core part of the user experience? Shefit, a custom sports-bra ecommerce site, cultivates a brand identity around physical fitness and healthy competition. These “masculine” qualities show up in their imagery as well as in the gamification of their loyalty program (“Earn crowns for spending”) (Fig 1.15).

Shefit.com Rewards page with the headline “Join the sisterhood. Get rewards. We want to thank you for being part of the sisterhood!”

Fig 1.15: The Rewards page for shefit.com explicitly offers rewards for becoming a member. Paired with photos of women in workout gear, the experience portrays competition as healthy.

Uncertainty Avoidance

The fourth dimension in Hofstede’s system is Uncertainty Avoidance (UA), which measures a society’s tolerance for ambiguity and the unexpected. A high degree of uncertainty avoidance means a preference for rules, formality, structure, and absolute truths. At work, managers prioritize tactics over strategy, and there are more rigid behavioral expectations. People expect clarity in communication, and so are more direct and active in getting their point across. Differences are seen as threats.

On the other hand, weak UA cultures are more accepting of differences, and show less anxiety around new or unexpected things. People don’t tend to use aggression or strong emotion as a way to communicate. At work, people are more easygoing, and the business focuses on strategy for the long term over daily operations and tactics.

Designer Jenny Shen encountered UA challenges in an interface for travel deals app TravelBird (http://bkaprt.com/ccd/01-33/). The search screen displayed trips within a certain number of hours from a given location, but Shen learned that German users were not comfortable with this metric (Fig 1.16). Because driving times in Germany can vary greatly depending on the road taken, German drivers preferred travel offers to specify a precise number of kilometers. Shen’s team updated the UI to reduce those users’ uncertainty.

Questions to ask yourself as you design:

  • How do I treat interface errors and navigational dead ends? While it is great practice to make your errors and microcopy as plain and clear as possible, blunt language may be seen as more reassuring in strong UA societies. Conversely, in weak UA societies, less explicit instructions may be acceptable in things like form validation.
  • Does my IA encourage browsing and wandering, or targeted search and drill-downs? Cultures that are comfortable with ambiguity may appreciate an information architecture that encourages exploration (such as deeper, meandering paths and frequent links to related information). Stronger UA cultures may prefer shorter navigation paths and clear context, such as additional microcopy on links, or hover functionality that previews the linked content.
  • What kind of control does my audience have over their browser and interactive experience? For example, do links open in new tabs so your audience can maintain their original position? For audiences that are comfortable with some uncertainty, this might be one way to give them more control over their browsing experience. On airbnb.com, navigating to an individual location or experience page means opening up a new link; for people uncertain about their next vacation, this can be a quick way to compare different locations without losing their original search parameters. However you approach it, make sure to user-test your assumptions, and weigh them against any accessibility or business concerns.
  • How visible should I make complex tasks and information? Being presented with complex information and incomprehensible explanations can cause anxiety for anyone. For example, when viewing a financial account dashboard, people from cultures that see uncertainty as a threat may be overwhelmed by an initial view that displays all their investments for the past year; they may be comfortable, instead, with less information upfront and an option to view more.
  • How are visual metaphors such as icons and color used? Users with low UA may not always need icons to be paired with text if they can keep navigating and exploring. On the opposite end, for high-UA audiences, visual metaphors should have redundancy and backup; pair icons with text to make the action extremely clear.

Comparison of two screens for a TravelBird search for camping near Leipzig, Germany, with one for options within six hours and the other for options within 700 kilometers.

Fig 1.16: TravelBird found that German drivers preferred travel offers to specify distance rather than estimated driving times.

Long-Term vs. Short-Term Orientation

The fifth dimension from Hofstede’s research is Long-Term Orientation versus Short-Term Orientation (LTO/STO). This dimension was added more recently after research and feedback by Michael Bond, one of Hofstede’s contemporaries.

LTO societies see more value in looking toward the future. Members of these societies are pragmatic; they appreciate adaptability and commonsense solutions. They look to family and friends as sources of information and credibility. At work, they focus on gaining useful skills over time, saving for the future, and patiently adapting to market and cultural changes.

STO cultures see more value in looking to the past and present. People in these societies prefer problem-solving for immediate results, and cultural norms remain largely fixed over time. They see rules and traditions as their primary sources of information. At work, they focus more on quarterly results and near-term gains.

Banking websites are a classic example of long-term versus short-term orientation. The very concept of banking seems focused on the long term, but in reality, different cultures treat money differently. Compare the Citibank and Cathay United Bank websites (Fig 1.17). Citibank’s homepage, from the short-term-oriented society of the US, has marketing language about living in the moment, using credit cards for everyday purchases, and enjoying immediate rewards. Taiwan’s Cathay United site, in contrast, promotes saving, long-term funds for the next generation, and favorable exchange rates.

(Top) Homepage for Citibank with headline “Turn Everyday Purchases into Something Bigger” and images of credit cards. (Bottom) Homepage for Cathay United Bank with high information density and imagery of families.

Fig. 1.17: Contrast these two examples of financial websites, from a short-term-oriented society (top), and a long-term-oriented society (bottom).

Questions to ask yourself as you design:

  • Does my content prioritize short- or long-term engagement? For users in an LTO culture, a strategy that rewards return visits, tracks progress, and builds on past activity will fit well in their cultural model. By contrast, users in an STO culture may respond better to pressure to complete tasks or unlock achievements.
  • How are cultural traditions and rules respected or adapted? STO cultures work to maintain tradition and “the way things were.” This trait can be clearly seen in the campaign logos from the 2018 election for United States Congress, collected by the Center for American Politics and Design (Fig 1.18). Note how many contain stars, stripes, or colors from the American flag; Americans have come to expect these traditional references in political branding. When introducing visual elements to a design system for an STO culture, you might begin to include these types of markers of tradition.
  • How does my content and visual identity treat family? In societies with a long-term orientation, family is important as a source of information and a way to maintain social status over time. The photos or illustrations you use to demo products may be more appealing when they show people consulting with their family members. On the flip side, photos showing family members enjoying leisure time together may work better for short-term-oriented societies.

Indulgence vs. Restraint

The final dimension is that of Indulgence versus Restraint (IND). This dimension refers to how much freedom people in a given society have to act on and fulfill their human desires. An indulgent society is one that allows its members relative freedom to enjoy life, participate in recreation and leisure, and pursue individual satisfaction. Work culture emphasizes employee comfort through perks and interpersonal relationships. On a societal level, people feel free to voice opinions, and free speech is protected as a core human right.

Grid showing twenty-four logos from 2018 American Congressional campaigns, many using the colors red, white, and blue.

Fig 1.18: This project from the Center for American Politics and Design shows all of the logos from the 2018 election for US Congress (http://bkaprt.com/ccd/01-34/).

Conversely, restrained cultures control how their members satisfy their needs and wants. There are strict social, sexual, and disciplinary rules. Money is saved, not spent. The right to speak freely is deprioritized, and the maintenance of social order takes precedence.

Finance, once again, provides a strong example of this dimension in action. Nigeria ranks as a highly indulgent society, and PiggyVest, a personal-savings startup, is there to capitalize on those values. Its marketing messages focus on personal happiness, control over one’s destiny, and the ease of savings. The site showcases personal stories of savings success through customer testimonials (Fig 1.19).

Testimonials about personal financial success on the PiggyVest website with client names and photographs.

Fig 1.19: PiggyVest’s use of personal success stories demonstrates Nigeria’s status as an indulgent culture.

Questions to ask yourself as you design:

  • Is happiness part of your digital experience? For all the talk of surprise and delight as a core design strategy over the past few years, this may be exactly the wrong idea for restraint-oriented societies. When developing a digital strategy, consider how elements such as animations, humorous microcopy, and appeals to joy may fall flat with some audiences.
  • Is it okay to smile? A persistent cliché in the West is companies choosing stock photos with lots of people smiling at nothing (women smiling at salads, elderly patients smiling at doctors, scientists smiling at their microscopes, and so on). That may be a default option when design teams have limited budgets and time, but consider how uncomfortable people in restraint-oriented societies might feel with images of smiling strangers on every page of your website.
  • Are vices hinted at, ignored, or commented on openly? In restrained societies, behaviors considered vices (such as drinking, drug use, or sex) may be acknowledged only through euphemism or metaphor. In indulgent societies, they may be treated as a normal aspect of social life, or an individual’s private business. Any language, imagery, or brand direction should explicitly (sorry, pun intended) account for that. The landing page for Muzzle—a Mac app that automatically silences notifications during screensharing—displays inappropriate and sexually explicit sample notifications to demonstrate the discomfort that would occur if they were to pop up while you were on a work call (Fig 1.20). While the notifications make me giggle with secondhand embarrassment, the language and marketing—even as examples!—would be totally out of place in a restraint-oriented society.
  • How are leisure activities marketed? A 2017 research paper showed that this dimension affects attitudes toward travel and vacation-planning: “Tourists from indulgence cultures may engage in more extensive information collection, analysis, be more astute in holiday and leisure related decision-making and have more expectations from the service business. This in turn may require a more intricate and careful design of tourism products and destinations targeting customers from cultures with high indulgence scores” (http://bkaprt.com/ccd/01-35/). Service-industry sites targeting indulgent societies therefore need to include high-quality images, testimonials, and video. Let’s be honest—it’s all about how good the vacation will look on Instagram.

    Muzzle homepage showing potentially embarrassing computer alerts such as “Public Intoxication Court Date” and “Your boss sounds like a tool.”

    Fig 1.20: The marketing site for Muzzle, an app that silences notifications while you are conducting a screenshare. The sample notifications have been deliberately written to be explicit.

Limitations of the framework

Hofstede is one of the most cited researchers in cross-cultural human-computer interaction literature. Much of his initial work was done with IBM, a large multinational corporation. At the time Hofstede first came up with his theory in the 1980s, the world was just starting to globalize, and businesses and governments were very interested in the social impact of cultural differences. However, the world has moved on, and I want to briefly note three criticisms that his work faces today.

First, Hofstede focused overwhelmingly on nations, not individuals. It can be extremely misleading to assume everyone from a certain country shares exactly the same outlook. There are multiple cultures and subcultures within every nation, and a wide variety of personal and social variance within every culture. Huatong Sun, the University of Washington Tacoma professor, explained that in order to prevent stereotyping in cross-cultural design, we need a design methodology that is more rigorous and human-centered (http://bkaprt.com/ccd/01-02/). Sun recommended that we get out and conduct fieldwork and ethnographic research, even if the findings are messy and don’t fit neatly into a system like Hofstede’s. Seeing our audience interact with our interfaces in a natural context is a clear way to understand their true needs (and to avoid perpetuating stereotypes).

Second, Hofstede’s dimensions make it easy to blame our bad design decisions on users’ cultural orientations. If an open mention of sex in a company’s branding is criticized by someone from a restraint-oriented culture, we might be tempted to blame that cultural outlook, instead of examining our decision to incorporate a subject that is taboo for them. We should think of culture as a lens through which our users see the world, rather than as a source of “faults” or user errors (http://bkaprt.com/ccd/01-36/, PDF).

Third, Hofstede’s dimensions struggle to offer practical guidance for modern digital experiences. Culture can be heavily fragmented by the digital medium, especially when interfaces must accommodate many different people from many different cultures. What happens when the experience breaks? For instance, in 2014, Facebook suspended the account of Shane Creepingbear, an assistant director of admission at Antioch College and a member of the Kiowa Tribe of Oklahoma, because his name “violates our name standards” (http://bkaprt.com/ccd/01-37/). My own cousin, whose given name is Senator, often deals with this same issue. When digital platforms enforce rigid cultural templates, they make it clear that not all users are welcome.

In a study comparing the geographic information systems of German and American users, Francis Harvey, a professor at the University of Minnesota, identified a similar flaw in Hofstede’s system: “Hofstede’s dimensions of national culture are a good basis for understanding the influence of national culture on organizations’ self-representation, but miss the actual practice of social activities” (http://bkaprt.com/ccd/01-38/). For instance, a culture’s views on children may be an important factor in how a daycare markets itself, but an overworked parent trying to sign up for emergency care is only worried about the website’s frustrating contact form and how much it’s going to cost them.

Hofstede’s work does have a purpose. If it didn’t, it would not be one of the most mentioned theories in cross-cultural research today. However, culture is a series of negotiations over influence, meaning, and language, and those happen when people actually get together and talk. No one sits down to compare their cultural dimension indexes—they’re trying to solve their technical, design, and content problems.

Digital design is the mediation of those interactions on the web. Cultural dimensions are great for comparisons, but they can lead us down too many blind alleys if we treat them as sacrosanct. Always test your work with real people!

Understanding the Global Web

Talking about people and culture means talking about complexity, about the ways that society affects, and is reflected in, the design choices we make. But it’s important to know who our global audiences are, and what motivates them. We’ve looked at who is online on the modern internet, how to understand their complex identities, and how a framework like Hofstede’s cultural dimensions, however flawed, allows us to gain a better understanding of motivations, worldviews, and potential preferences.

In the next chapter, we are going to look at how to conduct honest, culturally appropriate research with our cross-cultural audiences to get at how they understand and use the digital experiences we design.

Chapter 2. Principles of Cross-Cultural Design

The American razor company Gillette is a major player in the Indian market: in 2007, they owned almost thirty-eight percent of the market for men’s razors. To increase their share, they invested in designing a new razor for the 500 million Indian men who used double-edged razors, an older style of razor with no protective plastic between the blade and the skin. While this configuration makes cuts more likely, it was cheaper to manufacture and popular with many Indian men.

Gillette’s research found that most Indian men had thicker, denser hair than most American men, and would often shave longer beards, so their new design included a push-bar to clear the razor of cut hair. They decided to test it with Indian students at Massachusetts Institute of Technology (MIT). The students loved it.

But when Gillette launched the product in India, it was a flop. They couldn’t understand why—until they finally travelled to India. Their research hadn’t taken into account that many of their customers used communal bathrooms, and so would shave in their living rooms, using cups of water to clean their razors. It was a far different experience from MIT’s running water and private bathrooms (http://bkaprt.com/ccd/02-01/).

For Gillette, it was certainly a close shave with failure. This story shows what happens when you don’t do any research into the various cultural ways people interact with your product.

While your team may not have the time to do deep cultural dives, you can center the needs of your audience by considering cross-cultural design principles at the beginning of every engagement. These principles are not commands, exactly—more like specific actions that can help you think and act differently, leading to better choices in your content strategy, design strategy, and technical strategy.

Cross-cultural design asks you to:

  • embrace cultural immersion,
  • research creative communities,
  • work with experts,
  • question assumptions, and
  • prioritize flexibility.

These principles should form the basis of any cross-cultural design you do. By considering them first—almost even before you start your project—you can ground your future work.

Embrace Cultural Immersion

Find ways to surround yourself with the culture you are designing for. This does not need to be a long, expensive process—odds are, you are creating digital content, not on-location tours.

The key here is to be humble and introspective in your approach. Avoid hubris by remembering your role as an observer and a consumer, not an expert. Here are a few simple things you can do to get started:

  • Read the poetry and literature of your target culture, both old and new. For instance, looking through any list of national poets for West African countries will point you toward some of the most influential writers and leaders of postcolonial independence movements. To read them and know their history, even briefly, will give you insight into the modern cultures of that part of the world.
  • Check local colleges for events. Attend relevant lectures, performances, and events put on by international student associations. People there will be eager to talk!
  • Consume media from the culture you are researching. Look for newspapers, radio stations, podcasts, movies, and television programs. My neighborhood in Astoria, Queens, has a large Greek population, so if I wanted to understand more about Greek typography and typesetting, buying one the many newspapers at the corner store would be a great first step.
  • Visit cultural centers, if your city has them. If I were designing an interface focused on Japan, the Japan Society in New York has regular events and talks I could attend to get a better understanding of their history, language, aesthetics, and so on.
  • Visit ethnic enclaves and neighborhoods where your target audience lives and works. For instance, if I were building an app for South Asians in America to send money back to their extended families, I might visit Little India in Jackson Heights, Queens, to start getting a vibe for how people interact (http://bkaprt.com/ccd/02-02/).

These are low-cost, immediate methods for learning about a culture when budgets and timelines don’t enable you to travel internationally or conduct ethnographic field work. They are never a substitute for actual research—don’t make the same mistake Gillette did and confuse “close-to-home” observation with actual user experience research.

Research Creative Communities

There are digital design communities in every part of the world. Each one operates according to unique social rules. These communities are addressing complex, unique design problems, and the result is inspired, culturally relevant work. By tapping into and working with these networks, we can gain much deeper insight into our own work.

  • Look for culture-specific design publications on sites like ResearchGate, a professional network for scientists and researchers (http://bkaprt.com/ccd/02-03/). A search for “Thailand design,” for example, reveals ten pages of search results, with papers on everything from gamification to marketing and aesthetics to design innovation. A more targeted search would reveal even more research relevant to the work you are doing.
  • Sign up for regionally focused newsletters about creative and technology-related news from outside the US, UK, and EU, such as TechCabal’s daily updates about the expanding tech scene in Africa (http://bkaprt.com/ccd/02-04/) and Anjali Ramachandran’s Other Valleys (http://bkaprt.com/ccd/02-05/). Newsletters like these can give you a feel for the successes and challenges of different communities, and as the updates continue to hit your inbox, you can see trends form over time.
  • See what creative practitioners from your target culture are working on. Do filtered searches on portfolio sites such as Behance to see what designers are doing. This has the added benefit of giving you a list of potential expert contacts.

Work with Experts

Working with experts who have on-the-ground experience gives you a knowledgeable view on how your UI and content will be received. They can channel the voices of your audience and act as a buffer, so you don’t unintentionally send out design work that could potentially offend. That alone is worth paying for!

In 2018, my team was asked to create a Chinese-language version of an interactive map and database that showed the effect of poor air quality on life expectancy. Our first step was to look for one of these intermediaries, a designer who could speak the dual languages of user experience and Chinese.

The experience taught me a few key things about hiring experts:

  • Add clear language in your services agreement stating the type of engagement you would like to have with internal and external experts.
  • If you’re working for a client, they should be your first port of call for finding the right experts—they will likely know who holds expertise in their industry and in their local culture.
  • During your research phase, ask internal stakeholders to name two or three experts with cultural insight or on-the-ground experience for you to talk to, along with their contact information and a promise of an introduction.
  • With that initial list of potential experts, reach out to see if they are available for a paid consulting gig. I keep these emails short, with a clear, action-oriented subject line. I explain the project and my role, reiterate the expert’s relationship to the client, and end with clear instructions on how they can follow up if they are interested. Sending these cold emails might feel awkward at first, but remember: they are in service of your project.

You can also use your social networks as a recruiting tool, which is what we did for the air-quality map project—a small ad on a few channels netted us several names in just a day or two. Work on building a small but reliable network of designers around the world who can offer advice and support when necessary.

Question Assumptions

Biases and assumptions creep—constantly and unconsciously—into our work. Ignoring this truth is how we get content riddled with incorrect ideas and products that gloss over the needs of real users. A more effective path is to closely examine our assumptions about our audiences, technology, and ourselves.

It is critical to have a clear methodology for stating and pushing back against your biases. Throughout your whole design process, be as clear and as honest as possible about your assumptions—to yourself, to your team, and to your clients or stakeholders:

  • Document your assumptions about the client, the audience, and the project—individually and then as a team (if you are part of one!)—in a strategy document. As the design researcher Dorothy Deasy stated, anytime someone says “We know who/what/when/where/why/how…” at the start of a design project, you can write that sentence down as an assumption (http://bkaprt.com/ccd/01-11/). We’ve all heard “We know who our users are…” way too many times.
  • Share your assumptions with all stakeholders. This part can be uncomfortable. While you may think to yourself, “I know why users do X,” it can be humbling to state those same biases out loud for others to hear. Explain that you want to check some assumptions with subject-matter experts as part of the strategy phase. Be clear about what you need: Do you want confirmation? Discussion? A focus for your research? If you are confident that whatever you design will address the assumption, that’s fine—as long as everyone knows that!
  • Turn any assumptions into a list of questions to guide your upcoming research. For instance, one assumption might be: “We know that users only create a single account on our paywalled site.” Refashioned into a question, that might sound like, “Why do our users create accounts?” Put all of the questions up on a wall where every team member can see them, or in a Google doc (if you have a distributed team). This gives everyone a set of concepts to begin exploring, instead of assumptions to refute.

Remember to speak to people who disagree with your hypotheses and questions. Skeptical voices can tell us more about how a product will be received than those who are enthusiastic about it. Dissent provides a crucial check on our impulse to go along with a popular viewpoint.

Prioritize Flexibility

As you begin to craft design artifacts and components, I would hope they are designed with your team members and stakeholders in an open, collaborative way. But what does that really look like? Well, a flexible, shareable artifact will be something that can be iterated on, tested, and discussed. Here are some suggestions for getting there:

  • Document the thinking behind your design choices. Whatever work you do, whether quietly at your desk or in the field, document it! Describing what you are creating and why serves as a way to communicate your intent with members of your team, especially if they are distributed. Plus, you can eventually use this documentation in case studies and marketing as you build a client base that appreciates and seeks out your cross-cultural expertise.
  • Keep your work in formats that are easily shareable. Unfortunately, many of the current platforms designed for sharing and collaboration are walled gardens. There is no great way, for instance, to extract a prototype from InVision after you create it. PDFs and other images can be more sharable, but their large file sizes and storage present an issue as well. The best format of all? The lowly HTML page. Since we are making things for cross-cultural audiences on the web, a URL to a page with some content on it is the most shareable asset we can have.
  • Systematize your workflows. Different cultures have different methods of collaboration, so it’s important to articulate how you work together on design problems. If your team’s design methods are not understandable and easily replicated, any outputs from sprints or working sessions risk withering away in some forgotten folder. Standardizing your processes for working on code snippets, Sketch files, or pattern libraries is a good idea for any team, but especially cross-cultural ones.
  • Start rough so you can work through cultural blind spots. Any components we design, from the simplest paper prototypes to the most complex filtering mechanisms, are based on aesthetic rules and biases we’ve learned or absorbed—meaning they are culturally constructed. For instance, when doing rough sketches as part of a wireframing process, I tend to indicate blocks of text by drawing lines from left to right, in the same direction I read my native language of English. Flexibility means identifying and challenging these (often subconscious) habits. Just as we create UI sketches left to right for an English-speaking audience, we should also draw them right to left for an Arabic-speaking audience. Starting rough gives the team time to acknowledge biases and work toward more flexible artifacts.
  • Explain design variants and options. If your design system allows for slightly different color patterns for different markets, make sure you explain the correct usages and contexts. If you begin to use a non-Latin font after entering a new market, include notes on correct line-spacing, font-size, and readability cues. And if you’re using a hamburger menu (the now-common three-line icon that indicates additional links), document its meaning and usage too: in many Western designs, these links are labeled “More,” while in many Chinese designs, they appear in a tab labeled “发现” (fāxiàn, “discover”) with a compass as the icon (http://bkaprt.com/ccd/02-06/). While both meanings give access to additional information, this variant should be documented in a design system to be flexible enough to work for both audiences.

Whatever the artifact, by keeping the cultural needs of our audiences in mind throughout the design process and putting flexibility at the center of what we create, we can help ensure a more culturally responsive final product.

Always Seek to Understand the Problem

These principles won’t give you all the answers or tell you exactly how to design for a cross-cultural audience. But I do hope they alleviate some of your concerns about subjective decision-making, causing offense, or managing client expectations that may not match audience reality.

Think of these principles as a framework for working on culturally adaptable products and experiences. They are meant as a way to contextualize the challenges you are facing, to help you think through how culture and design intersect.

Defining how you want to address the design problems in front of you is a great step in the right direction, but it’s not the end. In Chapter 3, we’ll look at the skills you need to perform this work.

Chapter 3. Cross-Cultural Practitioners

Culturally responsive design is not only about modern global audiences; it’s also about the skill and insight of the people crafting experiences for them. Creating effective, adaptive experiences online, ones that feel natural to a wide variety of people, means our mindsets and practices must shift.

Cross-cultural practitioners must be able to listen, to ask questions, and to incorporate information that may feel wildly different from their own culture. We are asked to create digital experiences for people in far-flung parts of the world, as well as those right next door, all with overlapping (and sometimes competing) cultural constraints. That takes empathy and curiosity, skills that set us apart as stewards of our audience needs and the design process. Diogenes Brito, a product designer at Slack, described this as the fundamental role of the designer:

We assist people in seeing and assuming the perspective of others, to help create interfaces, products, and services that are responsive to human needs and considerate of human frailties. Designers are also stewards in the other sense of the word, because we protect the creative process (http://bkaprt.com/ccd/03-01/).

Let’s look at the actions, roles, and responsibilities that can help digital practitioners succeed in cross-cultural projects.

Cross-Cultural Competence

Interacting successfully with your team, your clients, and your users, many of whom may be from different cultures, requires the ability to communicate and empathize with them (http://bkaprt.com/ccd/03-02/). We might call this cross-cultural competence.

Cross-cultural competence is also known as cultural intelligence (CQ), which psychologist Daniel Goleman calls “a propensity to suspend judgment—to think before acting.” CQ was spearheaded by researcher P. Christopher Earley in the early 2000s (http://bkaprt.com/ccd/03-03/). His research established six CQ archetypes (much like personas or user stories), which we can apply to a design context:

  • The Provincial: You are effective and knowledgeable when it comes to your cultural background and familiar design problems, but may struggle in new contexts.
  • The Analyst: You systematically assess new situations and adopt repeatable, go-to strategies that help you navigate cross-cultural design problems.
  • The Natural: You rely on your intuition to quickly reach cross-cultural design solutions. Ambiguous situations may make it hard for you to trust your gut.
  • The Ambassador: You are confident and sure of yourself, even if you lack cultural knowledge. You are often able to correctly assess and adapt to cultural differences.
  • The Mimic: You mirror the cultural behavior you see in others, even if it is new or difficult to decipher, making you effective in small, interpersonal situations that require conversation and negotiation.
  • The Chameleon: No, you’re not a reptile—that would be a very different problem! You are able to assimilate and blend into cross-cultural situations. Your strength is in gathering design insights and adding cultural context to them.

Maybe you’re reading these archetypes, trying to figure out where you fit—which ones sound most like you and your team, and in what situations? Simply understanding CQ archetypes may improve your cross-cultural team’s interactions in the short-term, but that’s just the first step. The true goal is to look forward, “to think before acting,” so your team can more effectively complete design and project goals. Developing cross-cultural competence will help your team in a few key ways.

Innovative ideas

The first way is by encouraging innovation. To be truly innovative, you need diverse, inclusive teams. Differences of opinion, background, and perspective generate a wealth of potentially effective ideas, and an inclusive environment ensures that you can work through those ideas openly.

  • You create common ground: This means space to build trust, both with team-members and with audiences. Knowing that someone is trying to understand where you are coming from can make it easier to work with them on a project, collaborate on a prototype, or even do a round of testing together in the field.
  • You create higher-performing teams: Your team will have the ability to quickly adjust course as new information comes in. The more culturally competent your team members, the easier it is for them to pool their knowledge, change up their thinking, and adapt their methods.

Collaborative teams

With the complexity of digital experiences today, the ability to collaborate means more brains working together for greater effect. CQ means that regardless of the backgrounds or archetypal skills of your team, you act effectively together.

  • You handle conflict in a positive way: Cultural intelligence doesn’t eliminate conflict or miscommunication—it ensures you have the skills and mechanisms to work through those misunderstandings as a team. Friction between team members cannot be avoided, nor should it be: perfectly seamless human interactions mean we’re missing out on the chance to grow and learn from others.
  • You work together to rapidly prototype and iterate: That ability to “think before acting” means your team is more likely to explore, research, and test ideas rather than jump to conclusions. The more collaboratively you protype and iterate, the more effective your solutions will be.

User-friendly results

Cross-cultural competence makes it easier to uncover cultural needs and influences—which means your team can better meet the needs of your users.

  • You synthesize audience research more effectively: When you design with empathy and cultural awareness, you’ll be better about listening to and understanding your audience’s needs. Your research will be more informative and accurate, and you’ll be able to apply it more thoughtfully to solving real problems.
  • You design more intuitive products: A truly seamless digital experience—one that feels familiar to your audience, anticipates their needs, and builds critical goodwill—includes imagery, messaging, functionality, and touchpoints that can only be created with cultural insight.

Habits of the Cross-Cultural Designer

As a cross-cultural designer, your role is to define strategies that address real issues, to lead a participatory design process, and to produce thoughtful, inclusive results.

In “Designing for Cultural Diversity: Participatory Design, Immigrant Women and Shared Creativity,” Naureen Mumtaz of the University of Alberta wrote that this design work is a chance “to contribute to the social process concerning cultural diversity in a constructive and sustainable manner” (http://bkaprt.com/ccd/03-04/, PDF). For me, the key word here is contribute. Mumtaz is asking us to perform our work in a way that benefits, and collaborates with, society.

Of course, no one is born with the ability to design appropriately and effectively across cultures; it must be learned. Simply being a designer doesn’t presuppose knowledge and familiarity with cultural systems or ways of thinking. Specific actions, thoughtfully practiced, can become habits that strengthen your cross-cultural design abilities:

  • You tell stories.
  • You ask big questions.
  • You share ownership of creative projects.
  • You work across disciplines.
  • You create cultural spaces.

You tell stories

I love the act of telling stories. You can probably tell, from all the little cultural anecdotes in this book. The stories I like best are about the ways researchers and creative professionals react to and interpret culture. Storytelling is a cultural experience, one built on our negotiations over meaning.

Tom Erickson, a former interaction designer at Apple and IBM, uses storytelling to better understand design problems:

As I listen to the stories people tell, I begin to recognize common themes and events, and gradually formulate my own ‘design stories.’ Design stories are a little like scenarios, in that they attempt to capture some of the recurring characteristics in stories I’ve been told, but they are still quite story-like, in that they retain their level of detail, and are grounded in my personal experience. (http://bkaprt.com/ccd/03-05/)

Critically, Erickson’s design stories are based on user research, not assumptions or stereotypes. They help identify patterns, highlight users’ language, and distill rationale; creating a narrative around our problem-solving is a way of making sense of the real issues.

Highlighting cultural issues with this method of storytelling can be even more effective when the stories are told though images, not just words. Bonny Colville-Hyde, a user experience designer at Immediate Media, used storytelling to create a comic for a nonprofit client in the UK (Fig 3.1). Her visual story—about the challenges young people faced as they moved out of foster care and became independent—included UK-centric imagery and language: “TO LET,” the pound sign, and the names of the site respondents (Kimmy, Sarah, and Mark). This narrative gave stakeholders at the nonprofit real insight into their users’ needs. Storytelling can make problems feel immediate, memorable, and focused.

Comic page depicting the experience of using a website to find living and work arrangements.  Fig 3.1: Bonny Colville-Hyde’s comic showed a nonprofit how they can help young adults as they transition out of foster care. This story would be effective if told verbally during a client meeting, but is even more powerful as a focused, visual narrative.


Storytelling is a habit that can be learned and practiced. A few years ago, a UX designer on my team had begun leading client presentations, and she expressed concern that those meetings were not as engaging as they could be. I suggested that she speak less about the final design components (buttons, taxonomies, and templates), and focus more on short anecdotes about how she arrived at those components. Before her next meeting, we sat down, looked over her notes, and chose places to tell little stories about past clients who had encountered similar problems. Guess what—her next meeting was a success! The clients were more engaged with her rationales and solutions, and she came across as experienced with the subject matter.

Telling stories is the mark of a good cross-cultural designer. It’s also a skill that anyone can improve. Start small: plan out opportunities to share a few brief anecdotes in design sprints, presentations, or write-ups. When you feel more comfortable, try crafting longer narratives that illustrate your thought process or tie together themes. Keep at it!

You ask big questions

Asking questions helps you understand the intentions, opinions, and concerns of your core users, regardless of their cultural background. It shows your creative curiosity and can establish your credibility in front of clients or stakeholders.

Some of the questions you ask will be directed toward yourself and your team: Am I assuming something about how this language should be read on screen? Are my icons creating confusion by representing more than one idea?

Other questions will be directed toward your audience, investigating their challenges, decisions, and behaviors. By thinking like an anthropologist, you can begin to understand the varied needs of audiences in different locales across the world.

Sometimes the questions come to you, challenging your assumptions. Consider the example of Ignighter, a dating startup with a slightly different approach: it organized group outings rather than one-on-one dates, to reduce romantic pressure and help more people meet (http://bkaprt.com/ccd/03-06/). They grew a small user base in the US, but in April 2009, they saw a spike in web traffic from countries like Malaysia, Singapore, and—especially—India. By 2010, they had two million accounts in India, with hundreds of new users joining every day.

Considering Ignighter was founded by three Manhattanites with a focus on New York City, what was happening? They began to ask questions:

  • Why was their service so popular in India?
  • How had users heard about it?
  • What was different about the dating scene in India?
  • How were romantic interactions defined in Indian culture?

There were several cultural factors that began to answer their questions. In many areas of India, it was still considered taboo for unmarried men and women to go out in public together. Eighty-two percent of young adults still lived with their parents, who had a lot of influence over their children’s relationships. And online dating was relatively new to the Indian market. All of these forces made a service like Ignighter welcome—the group events made it easy for young people to socialize without overt romantic intention.

The Ignighter team moved their operations to India and became a successful Indian dating startup—eventually being sold to Twoo, which was in turn sold to online dating giant Match. Imagine if they had decided to ignore that spike in traffic from New Delhi!

I tell you this story to show that asking questions can further the goals of your clients, your audience, and your project as a whole. You can’t chase ideas down every rabbit hole, but when clear data presents itself, your role as a cross-cultural designer is to follow the information, just as the Ignighter team did.

You share ownership of creative projects

I often hear clients refer to design work as the designer’s work or the agency’s work. I take great pains to let them know that any website or interactive experience belongs to them—as a designer, I am simply bringing form to the strategies we have agreed on and developed together.

It’s an important point. You cannot give ownership of a design to your audience, whether clients or users. They will be the ones using the finished product on a daily basis; it’s theirs to begin with. However, you do need their insight and feedback. In leading this collaborative exploration, you can create work that is part of their culture and informed by their own views. When you share control of the design process with others, you also give them the ability to alter and adapt that work to fit their lived experience.

The Center for Urban Pedagogy (CUP) (http://bkaprt.com/ccd/03-07/) is a nonprofit organization in New York that collaborates with professionals, community-based advocates, and freelance designers. They work with underrepresented communities to increase local civic engagement with complex issues (like prison reform, urban planning, and sexual violence), using art—things made by the community, for the community. In 2017, CUP collaborated with Black Women’s Blueprint (http://bkaprt.com/ccd/03-08/), a national feminist organization focused on empowering women and girls of African descent, to design a foldout poster explaining Title IX and the Jeanne Clery Act, laws that require schools to protect and provide resources to survivors of sexual violence (Fig 3.2). Designers Flora Chan and Abby Chen led collaborative design sessions, working with students in Brooklyn to ensure the tone and aesthetic of the piece represented their lived experience.

By collaborating and cocreating, you explicitly make your work part of the culture you are designing for. Culture is a constant negotiation, and so is the act of making things with people. By centering them in your work, you contribute to the cultural landscape.

You work across disciplines

One of the foundations of cross-cultural design—besides the work with actual users from different cultures—is the ability to assimilate divergent concepts into a complete, unified result.

Let’s use the example of Grab, a transportation and logistics company used by millions of people across seven countries in southeast Asia (http://bkaprt.com/ccd/03-10/). Grab’s services include food delivery, ride-hailing, parcel delivery, and even mobile wallet services; prototyping and designing a mobile app to cover them all, across so many different cultural markets, presented a huge challenge.

Poster with headline “Sexual violence harms our communities” and colorful stylized drawings of people.

Fig 3.2: The collaboratively produced poster from CUP and Black Women’s Blueprint breaks down the federal rules requiring schools to protect and support survivors of sexual violence (http://bkaprt.com/ccd/03-09/).

Rice Tseng, a product design lead at Grab, wrote about the team’s cross-disciplinary approach to develop the app (http://bkaprt.com/ccd/03-11/):

  • Culture: They visited the Asian Civilisations Museum in Singapore to research the diversity of cultures in the region, over and above their existing knowledge.
  • Technology: Such a wide geographic area meant the team needed to account for a variety of devices, particularly older smartphones with smaller screen sizes, and optimize for limited screen space.
  • Psychology: They prototyped and tested simple animations to reduce the anxiety that some users experience when waiting for deliveries to arrive.
  • Business: To reduce drop-off and cancellation rates, they reorganized the interface to display discrete logical steps, rather than showing every piece of information at once.

This work resulted in a number of positive outcomes. First and foremost, the team consolidated, streamlined, and standardized the UI, making it easier for users to book rides and use other services. That also meant defining standards that the whole team could follow—for animation, code, and copy—even if they were spread across different countries. Finally, the work was presented to top management for feedback, meaning the people in charge of the various disciplines got a chance to see their teams’ work in action.

You (and your team) need to be anthropologists, technologists, writers, and strategists, all in one. An ability to aggregate knowledge from different fields of expertise and apply it to the design work at hand means an expanded palette for designers—and an added responsibility to get it right.

You create cultural spaces

Designers are change-makers. Our actions can impact thousands of people, whether or not we realize it. And that impact plays out not only on a screen, but in the “real” world, too.

The cross-cultural designer considers how online content can create and support offline interactions in our schools, homes, and communities. Culture isn’t static; it’s always in the process of being created, modified, and negotiated by society, and that gives designers a real opportunity to make artifacts and experiences that contribute to this process.

Digital Green, a development organization based in Asia, embraces that opportunity. Their goal is to use videos and other digital content to help farmers better manage their livelihoods, become more climate-resistant, and strengthen their communities. But how can Digital Green do this in communities that are less digitally connected, where the answers to questions about proper soil techniques are not at the other end of a search-engine query?

First, they maintain a free digital library of over six thousand videos in over fifty languages that teach things like healthcare, mulching, and livestock management (Fig 3.3). Then, they organize live, facilitated video screenings in local communities (Fig 3.4).

Digital Green page for a video about “Maternal, Child Health and Nutrition (Nimadi) in Madya Pradesh (India)”.

Fig 3.3: The Digital Green video library offers thousands of videos with culturally relevant content (http://bkaprt.com/ccd/03-12/).

Small brick room full of people watching a video being projected on the wall.

Fig 3.4: Digital Green organizes community viewings of the videos, expanding the digital experience into an offline context (http://bkaprt.com/ccd/03-13/).

This connection between digital content and offline interaction is crucial to the content’s effectiveness. Digital Green’s strategy has to consider the cultural affinities, contexts, and behaviors of the viewers:

[W]hen farmers assess the relevance and trustworthiness of a Digital Green video, they consider not just its language but also factors like the clothes the featured farmer is wearing and the type of dwelling she lives in to determine whether that person is someone they identify with. Indeed, viewers often ask the name of the individual featured in the video and the village she lives in. Seeing is often believing for members of rural communities, especially women who have a low level of literacy, for whom visual cues about a practice pertaining to a person or a crop can be crucial in their determining its applicability. (http://bkaprt.com/ccd/03-14/)

After watching, farmers feel comfortable talking through challenges and solutions—both on camera, and face to face—with other members of their own communities.

It would not have been enough to simply put the videos online—Digital Green also needed to create space, literally, for that content to be used offline. Cross-cultural designers make it possible for culture and knowledge to be reproduced, and enriched, with new tools and experiences.

Shifting Practices

Your role as a cross-cultural designer is a nuanced one. Interactive design won’t spontaneously happen in your browser, on an artboard, or in a document. It happens in bustling kitchens, at remote bus stops, in dusty conference rooms, places far away from where your computer sits. In order to address real issues, ones that span borders, we must first become the kind of designers, developers, and strategists who can do that work.

As our design practices change, we need to find new ways of listening to our users. In the next chapter, we will define some ways to conduct research with global, cross-cultural audiences.

Chapter 4. Cross-Cultural Research

In 2016, our agency partnered with a health tech company in need of a new digital home. Their business was unique: manufacturing anesthesia machines for use in hospitals in low-income countries, where repairing and maintaining medical technology can be challenging.

They managed this work through a network of technical specialists across seventeen countries. In our research and discovery phase, we identified this network as a key audience. The specialists needed access to repair documentation, updates, and other technical instructions from our client.

That insight got the creative juices flowing: “Let’s design a new portal for the technicians to log in to and access all their information. It’ll be great!” That is, until the client gently pointed out what the specialists really needed—the number to a WhatsApp group.

That was it. Their whole community already had a useful, intuitive system for sharing information and receiving updates. Rather than impose a new structure on these users, we designed a simple module for displaying contact info, including the WhatsApp group number (Fig 4.1).

Effective cross-cultural design means, in essence, creating experiences that flex and adapt with a global audience. To make clearheaded decisions about what audiences truly need, we have to conduct research. In this chapter, we’ll look at a number of ideas to help you do just that.

A contact module showing an email address, Whatsapp number, and phone number.
Fig 4.1: Instead of a complex community portal that would have required extensive product-design work and strategy, our client asked only for their WhatsApp community number to be displayed prominently.

Research Methods

One of the first questions you should ask in any cross-cultural design project is: “Who is my audience?” But how you ask (and answer) can be a bit tricky. I’m a huge fan of using creative research methods, ones that are flexible enough to account for cultural differences. I find the following tactics particularly interesting and useful. For each, I’ll describe the research technique, then offer suggestions for trying it yourself. Sound good? Let’s jump in.

Cultural probes

In 1999, researchers Bill Gaver, Tony Dunne, and Elena Pacenti began exploring “novel interaction techniques for increasing the presence of the elderly in their local communities” (http://bkaprt.com/ccd/04-01/). They gathered in Peccioli, a small Italian village outside Pisa, to meet with members of the community. After introductions, the researchers announced they had brought “a kind of gift” for the attendees.

They passed around blue plastic envelopes to each of the participants, who opened them up to find an assortment of booklets, maps, stickers, postcards, pictures, and even disposable cameras (yes, that used to be a thing). The mood of the room suddenly changed: tired, reluctant participants began to excitedly dig through their envelopes, chatting with their neighbors about the contents, and completing the prompted activities—like using stickers to mark visited countries on the included maps.

After finishing the activities at home, the participants were asked to fold up the packets and pop them in the mail, already stamped and addressed to go right back to the researchers. They called this technique a cultural probe—a way to engage audiences and provoke inspirational, open-ended, and multisensory feedback. Written, drawn, and photographed responses can shed light on users’ lives, thinking, and motivations, and reduce reliance on interviews, which can often fall short in cross-cultural situations.

There is something endearing about this low-tech, tactile method of learning from unfamiliar cultures and languages. As Gaver put it:

Understanding the local cultures was necessary so that our designs wouldn’t seem irrelevant or arrogant, but we didn’t want the groups to constrain our designs unduly by focusing on needs or desires they already understood. We wanted to lead a discussion with the groups toward unexpected ideas, but we didn’t want to dominate it.

Cultural probes can incorporate just about any task you can think of (Fig 4.2). Some researchers include individually wrapped activities with instructions to take photographs, fill out a diary, draw a picture, and so on. Others are more freeform or analog, like tear-off booklets and printed maps.

Examples of cultural probes with different papers, photographs, cards, and writing implements.

Fig 4.2: Cultural probes are an open-ended, multisensory method for gathering ethnographic feedback from your audiences (http://bkaprt.com/ccd/04-02/, http://bkaprt.com/ccd/04-03/).

To conduct a cultural probe:

  • Identify the goals of the probe. What questions do you want to answer? Your goals will inform the tasks in the probe and the materials people will need to complete them. As with any workshop or other designed activity, you will need to be clear about the information you’re looking for.
  • Design the tasks. Write out instructions in clear, accessible language. Use the first languages of your participants. Consider listing out the materials that go with each task, in case they become separated.
  • Assemble the kits. This is likely to be a really fun experience for any creative team. Make a list of the things you will need to include (disposable cameras, maps, postcards, etc.). The more you can rely on light, recyclable materials, the better. Then set aside a few hours, get your team together, provide some food, and assemble away!
  • Distribute them. Doing this in person, as in the Peccioli example, is the best method. However, if you can’t be there physically, and your country has a reliable postal service, then send them off in the mail. To make it easier for participants to get back to you, give each task its own self-addressed, stamped envelope. That way the whole packet doesn’t sit around forever, waiting for one final task to get completed.
  • Synthesize the information. Once you get a critical mass of probes back in the mail, you can analyze the results. Use a spreadsheet or other UX research analysis tool like Dovetail (http://bkaprt.com/ccd/04-04/) to translate the responses into something quantitative, so you have numbers to inform your next phases of work.

Local facilitators

Traditional usability-testing advice tells us that facilitators must remain neutral at all times, speaking and interacting with participants as little as possible, to avoid skewing the test results. But this advice is based on a Western European model of dispassionate rationalism that does not take cultural issues into account.

What happens if we set that thinking aside, and instead use culture as the critical factor in how we conduct usability tests? I recommend using a local facilitator, someone with lived experience in the culture you are researching, in any kind of observational methodology.

Consider the results of a Danish study exploring this very premise (http://bkaprt.com/ccd/04-05/). Researchers recruited both Danish and Indian facilitators and participants in Denmark, ostensibly to test the usability of a clip art application. Participants were asked to use the application to create a Danish-themed birthday party invitation, while the facilitator encouraged them to think aloud about their image selection. The image set contained deliberately misleading images, such as reindeer (which definitely do not live in Denmark) and a Norwegian flag, to set up potential misunderstandings (Fig 4.3).

The results may surprise you! The researchers found that when the facilitator and participant shared a cultural background—both Indian or both Danish—they spoke aloud more, and were more likely to vocalize issues they found with the interface. They focused less on cultural differences in the imagery, and more on the task itself. In other words, local facilitators from the same culture as the participants ran more effective tests.

Microsoft Clip Organizer showing a folder with images related to holidays, cultural practices, and locations.

Fig 4.3: To test the effectiveness of local facilitators, researchers asked participants and facilitators to work with culturally specific images in a clip art application.

Not all cross-cultural research needs to be conducted by a local facilitator, but usability testing that requires speaking and interaction can particularly benefit from that shared cultural mindset. I also strongly recommend it in markets where participants use a lot of slang or speak in patois (such as Singlish, an English-based creole spoken colloquially in Singapore); having someone on hand who can understand and communicate in these linguistic forms will make your insights deeper and more culturally relevant.

To try this yourself:

  • Recruit locally. There are a number of places where independent UX consultants can be recruited, like LinkedIn. If you are planning to work with an agency or firm, get information on their international network before you begin the project.
  • Record the usability sessions. Keep note of when slang, euphemisms, or culturally specific knowledge is shared between the facilitator and participant. This may not be necessary to understand the results of the specific test, but you will start to build a bank of keywords and ideas to be used in site features, such as search optimization and microcopy.
  • Rework your time budgets to account for faster completion of the tests—you might be able to include more activities in each test, rather than signing off early.
  • Take note of the network. By setting up research systems with local facilitators at the start, you’re also laying the groundwork for future opportunities to collaborate with them. Keep contact information for everyone you talk to, even if you don’t end up working with them; you never know when they might be able to help out again.

The Bollywood technique

Sometimes you need to create a little drama to get results. When usability researcher Apala Chavan was testing a travel-booking website in India, she found it difficult to get honest feedback about the tool from her collectivism-minded participants (http://bkaprt.com/ccd/04-06/). Recall that this cultural dimension means that people tend to want to maintain harmony (not openly criticize a stranger) and defer to the group (not voice dissenting opinions). With a cultural framework like that, it’s no wonder Chavan couldn’t elicit feedback.

So she tried something different: she asked participants to imagine they were in a dramatic situation reminiscent of a Bollywood film:

The participant’s beautiful, young, and innocent niece is about to be married. But suddenly he gets news that the prospective groom is a member of the underground. He is a hit man! His whole life story is a sham, AND HE IS ALREADY MARRIED! The participant has the evidence and must book an airline ticket for himself and the groom’s current wife to Bangalore. Time is of the essence!!!
The participants willingly entered this fantasy and with great excitement began the ticket booking process. Even minor difficulties they encountered resulted in immediate and incisive commentary. The participants complained about the button naming and placement. They pointed out the number of extra steps in booking.

Because they were given permission to participate in the fantasy, they were also given permission to think outside their usual, collectivist social norms. Chavan called this the Bollywood technique.

To try this yourself:

  • Create a base narrative with broadly defined characters, roles, and resolutions. Many story lines are fairly universal, and mainstream movies use archetypal narratives that are easily recognized across the world (at least in places that watch TV and movies regularly). A Western analog to that dramatic Bollywood plot might be a heist movie or even a game show, where the participant needs to think and act quickly under pressure.
  • Create variations that match cultural dimensions. Using the cultural dimensions we looked at in Chapter 1, add variation to that base narrative. For instance, in a feminine-oriented culture, where people have more casual attitudes about sexuality, a narrative that highlights dating may be more resonant than one about a religious marriage ceremony.
  • Write out your testing scenarios and variations. Keeping documentation that details the stories you are creating, rather than winging it on the spot when the session starts going badly, will keep you cool and the project on track.
  • Use local facilitators. If you’ve never seen films from your chosen genre or market before or don’t know any of their famous actors, you’ll come across as insincere and untrustworthy, regardless of how compelling your narrative is. This is a good time to recruit expert help—as we saw earlier, participants who need this sort of scenario-driven prompt may feel more comfortable sharing their thoughts with a member of their own culture.

The Walking Havana method

In 2014, researchers Daniel G. Cabrero, Heike Winschiers-­Theophilus, and Hedvig Mendonca from the School of Computing and Informatics at the Polytechnic of Namibia (PoN) began researching unemployment in Havana, an informal settlement in Windhoek, Namibia (http://bkaprt.com/ccd/04-07/, PDF). One of numerous Black communities that were forcefully segregated by apartheid during the 1950s and ’60s, Havana is home to many marginalized young people and high rates of unemployment, as well as ongoing PoN projects to introduce technology and community centers that can support residents in employment, job training, and entrepreneurship.

Before anything could be designed, or even defined, the research team wanted to get a better understanding of the neighborhood of Havana and the challenges and opportunities for tech introduction. A common step for WEIRD designers would be to gather insights and quantitative data, head back to the office, and craft personas. Instead, these researchers took a different path—one they called the Walking Havana method.

User-created collage made of images of people from newspapers and magazines.

Fig 4.4: Participants created sketches and collages showing proposed TV characters based on their own daily experiences.

The researchers gathered a small group of residents and asked them for help creating characters for an upcoming TV series based in Havana. Together, they walked through the neighborhood—ostensibly to scout locations for the show—while residents pointed out different issues and features of the community. This helped the researchers immerse themselves in the environment and the residents’ struggles with finding employment and economic opportunities.

Afterward, the participants proposed characters for the TV show. One group wrote a narrative called “Living Like Slaves—Havana Location” that featured nineteen-year-old Eddy, who had no access to electricity and cooked with firewood in his shanty. Another group created a collage called “Unemployed Youth,” made of newspaper clippings, drawings, and handwritten descriptions (Fig 4.4). It featured a woman named Tselestina, who struggled to find consistent work, and included references to her upbringing (the hero’s backstory), parents and other adults who counseled her (the supporting characters), and young people rioting because of a lack of jobs in the city (the extras). These characters were, in effect, personas created not by the researchers, but by the residents of Havana themselves, and they clearly embodied the experiences and economic challenges of living there.

A similar example comes from researcher Manako Tamura’s thesis project on cultural assimilation, code-switching, and race:

I hosted a co-creation workshop, where I invited users to share their pain points related to assimilation. The participants responded to my questions around cultural identity and race through creating collages of magazine cutouts. Using this tangible process enabled the participants (most of whom had never met each other) to open up about deeply personal experiences. (http://bkaprt.com/ccd/04-08/)

To try this yourself:

  • Ask participants to name their work. In the Walking Havana example, participants gave their collages names that also functioned as TV show titles, in keeping with the researchers’ original framing of the exercise. Encouraging participants to “brand” their collages with descriptive names helps them build a narrative beyond some cutout pictures on a board.
  • Use appropriate images. If you ask participants to create personalized collages, they need usable source material. That may mean ordering magazines or picture books; don’t just grab a few issues of Vogue and expect the collages to feel authentic. (Unless, of course, your users are avid Vogue readers!)
  • Create space for sharing. If possible, gather your participants in a physical space. A community center, classroom, or even a large living room could all be places to conduct this kind of culturally relevant research. Make sure the ways you’re asking people to create and share are accessible for people with a range of physical needs.
  • Define what will happen to the work. Inevitably, someone will want to take their collage home. Define what the next steps are in the process, specifically which design artifacts or outputs participants can take with them. If logistics allow for it, take high-res photos of the collages for your records, then leave them in the community or with the participants.

Possession personas

In the northwestern part of Namibia, the ovaHimba are a group of people who lead a pastoral and seminomadic lifestyle that is increasingly under threat from urbanization and westernization. In 2015, they began working with a research group to create a system that would “collect, store, classify, and curate their Indigenous Knowledge (IK)” (http://bkaprt.com/ccd/04-09/).

Their design partners wanted to create a database on tablets, so that the ovaHimba could record their lives and environments in a rich and engaging way. The responsibility for gathering data on the tablet fell to the community elder, who began to offer suggestions about a bag to carry it and keep it safe. Other participants jumped in to help, describing other decoration and ornamentation for the tablet bag.

While this may sound to some like a distraction from the task at hand, it wasn’t. By crafting physical fashion around the device he was responsible for, the man was embodying the user experience—beyond the direct usability of the tablet, he was demonstrating how it could be incorporated into his life.

Not every design project will call for this level of fashion detail, but there is a crucial lesson here. The things we surround ourselves with, our belongings and possessions, form a huge part of our lives. Just have a look around your room when you are at home—each one of the things on your desk, in your closet, in your bag, make up a part of who you are. Focusing on possessions in personas is a great way for cross-cultural design projects to incorporate a larger view of the user experience.

To try this yourself:

  • Ask questions about possessions. During research and inquiry, ask your participants about adaptations and ornamentation for their devices, possessions related to the project topic, and physical manifestations of their identities.
  • Discuss devices in personas. Make a clear connection between your users and the tools they use to access your content. Show devices—including screen dimensions, resolution, and representations of bandwidth—in your persona, so your team doesn’t forget what their view of the site will be like.
  • Show people with their things. The photographer and designer Jason Travis has a photo set called Persona, where he shows human beings with a neatly organized assortment of their things (Fig 4.5). Consider a similar approach that highlights the possessions you feel define the person.

    A man in glasses and a pink shirt juxtaposed with his belongings, and a woman with long hair and a yellow sweater juxtaposed with her belongings.

    Fig 4.5: Jason Travis’s persona project shows how belongings can be paired with a portrait to give designers deep insight into the type of people they are designing for. Image courtesy of Jason Travis (http://bkaprt.com/ccd/04-10/).

Bias, Brains, and Artifacts

Imagine your site user is a forty-two-year-old digital marketing manager with two kids. Even without additional details, your mind has already formed an image of what that user looks like, hasn’t it? You can’t really turn that off—it’s implicit bias, unconscious attitudes and stereotypes that affect your actions, perceptions, and decision-making. And it will trip you up every single time you conduct research or design work.

Implicit biases don’t have to be negative, but they are involuntary. They differ from explicit biases and stereotypes, things you know and act on consciously. Implicit bias creates ideas and feelings in your subconscious mind about people’s identities, like their sexual orientation, race, ethnicity, language, physical appearance, or age. The Kirwan Institute at the Ohio State University offers these definitions (http://bkaprt.com/ccd/04-11/):

  • Implicit biases are pervasive. Everyone possesses them, even people with avowed commitments to impartiality such as judges.
  • Implicit and explicit biases are related but distinct mental constructs. They are not mutually exclusive and may even reinforce each other.
  • The implicit associations we hold do not necessarily align with our declared beliefs or even reflect stances we would explicitly endorse.
  • We generally tend to hold implicit biases that favor our own ingroup, though research has shown that we can still hold implicit biases against our ingroup.
  • Implicit biases are malleable. Our brains are incredibly complex, and the implicit associations that we have formed can be gradually unlearned through a variety of debiasing techniques.

Whatever design artifact you are working on, implicit biases about audience behaviors and motivations will creep in. It’s inevitable (see that first bullet). Any time you need to make decisions—about the language used in brand guidelines, the types of workshops that will engage your clients, or even the best code framework to recommend for an external developer—your mind will use those biases as a mental shortcut.

Clients, stakeholders, and team members bring their own biases to the project, too. Even as they’re working toward a shared vision of audience, the people tasked with using and referencing your design artifacts may interpret the same content differently, thanks to implicit bias.

Lene Nielsen, a human-computer interaction and business informatics researcher at the IT University of Copenhagen, investigated the ways different cultures interpret the exact same information in a user persona (http://bkaprt.com/ccd/04-12/, PDF). Nielsen wrote an ungendered persona description—all text, no image—about an online marketing manager, listing details about their job, personal life, education, media consumption habits, and proficiency with technology. Then she asked sixteen participants from India, China, and Denmark to:

  1. read the persona description,
  2. find a photo on the internet that resembled the description, and
  3. write a short explanation of why they had chosen that particular photo.

The participants all read and interpreted the same text and selected representative photos based on their own biases of what a “marketing manager” might look like (Fig 4.6). Many participants selected images of men; all the photos fit with a stereotypically Western concept of a businessperson.

Participant-selected images, mostly showing white men in business suits.
Fig 4.6: A sample of the images that participants chose to embody the persona description (http://bkaprt.com/ccd/04-13/).

When you make design artifacts like personas for your clients and teammates, be aware of your visual choices and how they are manipulated by your implicit biases. They show up in unexpected and unspoken ways, affecting the design work you are doing, and you’ll need to be diligent about sidestepping them. Let’s take a look at a way to do just that.

Avoid the lazy brain

The human brain is incredibly effective at forming stories, especially about the things happening right in front of our eyes. Most of our mental processing happens before we are even aware of our thoughts—and then the narrative is set, regardless of whether it’s true or not!

The world is a complex place; paying attention to so many details takes a lot of energy, so your brain finds ways to conserve that energy whenever possible. That means that when presented with a tiny bit of information, your brain will attach a narrative to help it keep things simple and understandable.

Let’s try a small thought experiment. Imagine you have just signed a contract with a client to create a tech solution for farmers in Bangladesh. Your client wants to explore ways of using data to manage farmers’ crops and market pricing options. Immediately, without much more prompting than that, I’m guessing an image has sprung into your mind, composed of bits and pieces of stories you have heard about Bangladesh. Already, that lazy brain of yours is forming a picture to help it with your project!

Based on that shortcut image, and with the addition of some perfunctory research (like looking at online stats about mobile tech adoption in Bangladesh), you could easily generate a persona of a “Fearful Farmer,” a woman uncomfortable with technology (Uncertainty Avoidance) and upset at what she sees as its time-wasting properties (Long-term Orientation). Think of all of the ways this mischaracterization will cause problems in developing technology to fit her needs!

Now let’s look at a real-world example that avoids this trap effectively. Paddy to Plate is a detailed report by Lauren Serota, a service designer and founder of Appropriate, about the rice ecosystem in Myanmar (Fig 4.7). The report is organized around archetypes like “The Common Smallholder.” Details about their economic situation, worldview, traditions, personal and professional relationships, and business practices help frame them as complex individuals operating in a complex cultural situation. Each archetype also includes a case study from a specific research participant, so you see real language and problems from a person on the ground, not just a synthesized persona (http://bkaprt.com/ccd/04-14/, PDF).

A report page spread showing a woman on a bench next to paragraphs of text, pull quotes, and other callout details.

Fig 4.7: The archetypes in Paddy to Plate are authentic portraits of real people in rice farming and production in Myanmar. Each one is also paired with a detailed profile, complete with names, family descriptions, and quotes.

Culture lives and dies by the stories its members tell each other, whether or not they are true. Your lazy brain will happily ignore facts that don’t fit the narrative it’s already set up, so your challenge is to give it a new narrative, one that is not reliant on stereotypes and guesswork.

Deficit-framing vs. asset-framing

Regardless of the narrative the human brain spins up, it has a tendency to “other” people, focusing on their differences instead of similarities. Your brain subconsciously dismisses people you don’t identify as part of your in-group, seeing them as “not one of us.”

In digital projects, one result of this othering is deficit-framing, where we define an audience by a shortcoming. For example, a strategy statement like “We help poor farmers in climate-stressed countries use technology to grow what they need to survive” says nothing about the audience except that they have problems. That is their main reason for existing in reference to the design strategy you are laying out.

What can a designer do to redirect these conversations? Try asset-framing: defining the audience or strategy by a positive feature. It helps us short-circuit the brain’s tendency toward negative narratives, stay centered on our audience, and prioritize their success. A rewritten version of that strategy statement might look like this: “We help small landowners boost crop yields and build their communities’ climate resilience.”

Asset-framing is a term coined by Trabian Shorters, author and CEO of BMe Community, a US-based network of investors and fellowships for Black men and women (http://bkaprt.com/ccd/04-15/, video). Shorters explained that asset-framing is a powerful way for mission-driven organizations to tell forward-thinking, aspirational narratives about their work and the people they help. Asset-framing builds more multifaceted portraits of real people.

For cross-cultural design projects, try approaching your persona strategies like this:

  1. Identify positive truths of your audience. Asset-framing starts with descriptions and statements about your audience that don’t focus on negative things. You will, of course, need to explain specific challenges and issues your archetypes face, but start by framing them with positive qualities.
  2. Focus on your audience’s agency. Explain how they can overcome challenges by using their own ingenuity, community organizing, and power. Your service or digital platform then becomes another one of their tools, not their savior.

I have found this way of thinking extremely effective in my design work. By focusing my design strategy on aspirational stories about my users, I can craft artifacts, content, and interfaces that do not stigmatize or stereotype.

Culturally flexible artifacts

Because personas were originally developed to describe WEIRD audiences, they are sometimes too Western-focused to be usable in other parts of the world. We often don’t consider the political and social agendas that come with the traditional user persona, and in doing so, we make them much less effective.

Consider this sample persona for Spotify from the Interaction Design Foundation (Fig 4.8). Which of Hofstede’s cultural dimensions are visible here? The persona is named Rebecca, a popular given name in the West, and she has ready access to expensive technology. She is influenced most strongly by her own tastes, has only individual motivations, and uses “I” liberally. Not only is the character a clear example of the Individualism dimension, but the thinking that guided the creation of this artifact is deeply individualistic as well.

However, what about those households in other cultures where people are comfortable sharing smartphones or account logins with their family? If we were designing software and content for these family units, a persona structured like Rebecca would clearly miss the mark.

Personas don’t need to fall into that trap. With some cross-cultural forethought, we can use personas to creatively challenge narrow assumptions about our audiences. During the start of a client engagement for a legal nonprofit in New York, our agency put together a set of eight personas to guide our UX and visual design work. The artifacts were definitely on the traditional end—an image, text descriptions of the archetype, and some key challenges (not so different from the example in Fig 4.8). However, I saw them as a chance to challenge a few biases. I created personas for a wealthy donor couple, a husband and wife team who could contribute tens of thousands of dollars a year to the nonprofit—they were young, biracial, and had a Japanese last name (Fig 4.9). I didn’t need to justify these choices—the persona simply represented modern, global audiences. And if those choices help introduce more cross-cultural thinking into our business and design decisions? All the better.

Persona page showing a young woman with hoop earrings and headphones, next to text details like “Music is essential to Rebecca’s life. She is listening to tunes almost every second of her life, particularly while working.”

Fig 4.8: In this sample persona from the Interaction Design Foundation, Western-focused cultural variables, especially Individualism, are in full evidence (http://bkaprt.com/ccd/04-16/). Would this be effective for a company serving a global consumer audience?

Persona page showing a young professional couple named Emily and James Shirazaki.

Fig 4.9: This couple would hardly be unusual in New York City, but they were a subtle opportunity to challenge traditional persona expectations.

Put People First

Defining our global audiences is not an easy task. We must examine our biases, understand our users’ cultures, and illuminate their lives and motivations. It takes some extra creativity to conduct cross-cultural research and build effective artifacts, but what are designers if not creative in approaching new challenges?

Enriched by our research, we can now make flexible, culturally responsive decisions about typography, color, imagery, and other elements of the digital experience. In the next chapter, we’ll look at how we can make design choices that put global audiences first, and keep them visiting.

Chapter 5. Culturally Responsive Experiences

When I first traveled to Japan as an exchange student in 2001, I lived in northern Kyoto, a block from the Kitayama subway station.

My first time using the train to get to my university was almost a disaster, even though it was only two subway stops away. I thought I had everything I needed to successfully make the trip. I double- and triple-checked that I had the correct change in one pocket and a computer printout of where I was supposed to go in the other. I was able to make it down into the station, but then I just stood at a ticket machine, dumbfounded, looking at all the flashing lights, buttons, and maps above my head (Fig 5.1). Everything was so impenetrable. I was overwhelmed by the architecture, the sounds, the signs, and the language.

Ticket machines in the Kitayama subway station, with bright lights, maps, and Japanese writing.

Fig 5.1: Kyoto subway ticket machines—with many line maps and bilingual station names—can seem complicated, especially to newcomers.

My eyes craved something familiar—and there it was. The ticket machine had a small button that said English! I pushed it but became even more lost: the instructions were poorly translated, and anyway, they explained a system that I couldn’t use in the first place.

Guess what saved me? Two little old Japanese ladies. As they bought tickets, I casually looked over their shoulders to see how they were using the machines. First, they looked up at the map to find their desired destination. Then, they noted the fare written next to the station. Finally, they put some money into the machine, pushed the button that lit up with their correct fare, and out popped the tickets! Wow! I tried it myself after they left. And after a few tense moments, I got my ticket and headed through the gates to the train platform.

I pride myself on being a third-culture kid, meaning I was raised in a culture other than the country named on my passport. But even with a cultural upbringing in both Nigeria and the US, it was one of the first times I ever had to guess my way through a task with no previous reference points. And I did it!

Unfortunately, the same guesswork happens online a million times a day. People visit sites that offer them no cultural mental models or visual framework to fall back on, and they end up stumbling through links and pages. Effective visual systems can help eliminate that guesswork and uncertainty by creating layered sets of cues in the design and interface. Let’s look at a few core parts of these design systems and tease out how we can make them more culturally responsive and multifaceted.

Typography

If you work on the web, you deal with typography all the time. This isn’t a book about typography—others have written far more eloquently and technically on the subject. What I would like to do, however, is examine some of the ways culture and identity influence our perception of type and what typographic choices designers can make to help create rich cross-cultural experiences.

Stereotypography

I came across the word stereotypography a few years ago. Being African, I’m well aware of the way my continent is portrayed in Western media—a dirt-poor, rural monoculture with little in the way of technology, education, or urbanization. In the West, one of the most recognizable graphic markers for things African, tribal, or uncivilized (and no, they are not the same thing) is the typeface Neuland. Rob Giampietro calls it “the New Black Face,” a clever play on words. In an essay, he asks an important question:

How did [Neuland and Lithos] come to signify Africans and African-Americans, regardless of how a designer uses them, and regardless of the purpose for which their creators originally intended them? (http://bkaprt.com/ccd/05-01/)

From its release in 1923 and continued use through the 1940s in African-American-focused advertising, Neuland has carried heavy connotations and stereotypes of cheapness, ugliness, tribalism, and roughness. You see this even today. Neuland is used in posters for movies like Tarzan, Jurassic Park, and Jumanji—movies that are about jungles, wildness, and scary beasts lurking in the bush, all Western symbolism for the continent of Africa. Even MyFonts’ download page for Neuland (Fig 5.2) includes tags for “Africa,” “jungle fever,” and “primitive”—tags unconnected to anything else in the product besides that racist history.

The MyFonts page for Neuland, showing the letters of the alphabet and “Related Tags”.

Fig 5.2: On MyFonts, the Neuland typeface is tagged with “Africa,” “jungle fever,” and “primitive,” perpetuating an old and irrelevant typographic stereotype (http://bkaprt.com/ccd/05-02/).

Don’t make, use, or sell fonts this way. Here are some tips on how to avoid stereotypography when defining your digital experiences:

  • Be immediately suspicious of any typeface that “looks like” a culture or country. For example, so-called “wonton” or “chop-suey” fonts, whose visual style is thought to express “Asianness” or to suggest Chinese calligraphy, have long appeared on food cartons, signs, campaign websites, and even Abercrombie & Fitch T-shirts with racist caricatures of Asians (http://bkaprt.com/ccd/05-03/). Monotype’s website, where you can buy a version called Mandarin Regular (US$35), cringingly describes the typeface’s story as “an interpretation of artistically drawn Asian brush calligraphy” (Fig 5.3). Whether or not you immediately know its history, run away from any typeface that purports to represent an entire culture.
  • Support type designers who are from the culture you are designing for. This might seem like it’s a difficult task, but the internet is a big place. I have found that, for clients who are sensitive to cultural issues, the inclusion of type designers’ names and backgrounds can be a powerful differentiator, even making its way into their branding packages as a point of pride.

The Fonts.com page for Mandarin, showing its use in the sentence “The quick brown fox”.

Fig 5.3: Fonts.com sells a typeface called Mandarin Regular with the following description: “The stylized Asian atmosphere is not created only by the forms of the figures but also by the very name of the typeface. A mandarin was a high official of the ancient Chinese empire” (http://bkaprt.com/ccd/05-04/).

The world wide webfont

Another common design tool you should consider is webfonts—fonts specifically designed for use on websites and apps. One of the main selling points of webfonts is that instead of putting text in images, clients can use live text on their sites, which is better for SEO and accessibility. They are simple to implement these days, a matter of adding a line of code or checking a box on a templating engine. The easiest way to get them on your site is by using a service like Google Fonts, Fontstand, or Adobe Fonts.

Or is it? That assumes those services are actually available to your users.

Google Fonts (and every other service using Google’s Developer API) is blocked in mainland China, which means that any of those nice free fonts you chose would simply not load (http://bkaprt.com/ccd/05-05/). You can work around this, but it also helps to have a fallback font—that’s what they’re for.

When you’re building your design system, why not take a few extra steps to define some webfonts that are visible in places with content blocks? Justfont is one of the first services focused on offering a wide range of Chinese webfonts (http://bkaprt.com/ccd/05-06/). They have both free and paid tiers of service, similar to Western font services. After setting up an account, you can grab whatever CSS and font-family information you need.

Multiple script systems

When your design work requires more than one script—for instance, a Korean typeface and a Latin typeface—your choices get much more difficult. Designs that incorporate more than one are called multiple script systems (multiscript systems for short). Combining them is an interesting design challenge, one that requires extra typographic sensitivity. Luckily, your multiscript choices will rarely appear on the same page together; you will usually be choosing fonts that work across the brand, not that work well next to one another visually.

Let’s take a look at an example of effective multiscript use. SurveyMonkey, an online survey and questionnaire tool, has their site localized into a variety of different languages (Fig 5.4). Take note of the headers, the structure of the text in the menu and buttons, and how both fonts feel like part of the same brand.

Some tips as you attempt to choose multiscript fonts for your project:

  • Inspect the overall weight and contrast level of the scripts. Take the time to examine how weight and contrast are used in the scripts you’re using. Find weights and sizes that give you a similar feel and give the page the right balance, regardless of the script.
  • Keep an eye on awkward script features. Character x-heights, descenders, ascenders, and spacing can throw off the overall brand effect. For instance, Japanese characters are always positioned within a grid with all characters designed to fit in squares of equal height and width. Standard Japanese typefaces also contain Latin characters, called romaji. Those Latin characters will, by default, be kerned according to that same grid pattern, often leaving their spacing awkward and ill-formed. Take the extra time to find a typeface that doesn’t have features that are awkward to work with.
  • Don’t automatically choose scripts based on superficial similarity. Initial impressions don’t always mean a typeface is the right one for your project. In an interview in the book Bi-Scriptual, Jeongmin Kwon, a typeface designer based in France, offers an example (http://bkaprt.com/ccd/05-07/). Nanum Myeongjo, a contemporary Hangul typeface, might at first glance look really similar to a seventeenth-century Latin old-style typeface—for instance, they both have angled serifs. However, Nanum Myeongjo was designed in 2008 with refined, modern strokes, whereas old-style typefaces were originally created centuries ago and echo handwritten letterforms (http://bkaprt.com/ccd/05-08/). Looking at the Google Fonts page for Nanum Myeongjo, though, none of that is clear (Fig 5.5). The page automatically generates a Latin Nn glyph in the top left of the page, instead of a more representative Hangul character sample. If I based my multiscript font choices on my initial reactions to that page, my pairings wouldn’t accurately capture the history and design of each typeface.

    (left) SurveyMonkey’s Take a Tour page in Korean, with type and spacing that differs from, but produces the same look and feel as, the English version. (Right) SurveyMonkey’s Take a Tour page in English, with type and spacing that differs from, but produces the same look and feel as, the Korean version.

    Fig 5.4: Compare the typographic choices in the Korean and US English versions of SurveyMonkey’s Take a Tour page. Do the header type and spacing retain the spirit of the brand while still accounting for typographic needs?

The Google Fonts page for Nanum Myeongjo showing a large Latin Nn glyph while the Hangul characters are very small.

Fig 5.5: The Google Fonts page for Nanum Myeongjo shows a Latin character sample in the top left, rather than a more representative character sample.

Visual density

CSS can help you control visual density—how much text, image, and other content there is relative to the negative space on your page. As you read on, keep cultural variables in mind: different cultures value different levels of visual density.

Let’s compare what are commonly called CJK (Chinese, Japanese, Korean) alphabets and Latin (English, French, Italian, etc.) alphabets. CJK alphabets have more complex characters, with shapes that are generally squarer than Latin letterforms. The glyphs also tend to be more detailed than Latin ones, resulting in a higher visual density.

Your instinct might be to create custom type sizes and line heights for each of your localized pages. That is a perfectly acceptable option, and if you are a typophile, it may frustrate you not to do it. But I’m here to tell you that when adding CJK languages to a design system, you can update it to account for their visual density without ripping out a lot of your original CSS:

  1. Choose a font size that is slightly larger for CJK characters, because of their density.
  2. Choose a line height that gives you ample vertical space between each line of text (referred to as line-height in CSS).
  3. Look at your Latin text in the same sizes and see if it still works.
  4. Tweak them together to find a size that works well with both scripts.

The 2017 site for Typojanchi, the Korean Typography Biennale, follows this methodology (Fig 5.6). Both the English and Korean texts have a font-size of 1.25em, and a line-height of 1.5. The result? The English text takes up more space vertically, and the block of Korean text is visually denser, but both are readable and sit comfortably within the overall page design. It is useful to compare translated websites like this to see how CSS styling can be standardized across Latin and CJK pages.

Comparison of the density of English text and Korean text in two versions of “A Chronicle of Writing: The Present and Beyond.”

Fig 5.6: The 2017 site for Typojanchi, the Korean Typography Biennale, shows differing visual density in action. It is useful to compare translated websites like this to see how CSS styling can be standardized across Latin and CJK pages (http://bkaprt.com/ccd/05-09/).

Text expansion factors

Expansion factors calculate how long strings of text will be in different languages. They use either a decimal (1.8) or a percentage (180%) to calculate the length of a text string in English versus a different language. Of course, letter-spacing depends on the actual word or phrase, but think of them as a very rough way to anticipate space for text when it gets translated.

Using expansion factors is best when planning for microcopy, calls to action, and menus, rather than long-form content like articles or blog posts that can freely expand down the page. The Salesforce Lightning Design System offers a detailed expansion-factor table to help designers roughly calculate space requirements for other languages in a UI (Fig 5.7).

But wait! Like everything in cross-cultural design, nothing is ever that simple. Japanese, for example, has three scripts: kanji, for characters of Chinese origin, hiragana, for words and sounds that are not represented in kanji, and katakana, for words borrowed from other languages.

Expansion-factor table showing the length of the word “Share” in eight languages.

Fig 5.7: This expansion-factor table from Salesforce lets designers and developers estimate the amount of text that will exist in different languages. Though dependent on the actual words, such calculations can give you a benchmark to design with content in mind (http://bkaprt.com/ccd/05-10/).

The follow button is a core part of the Twitter experience. It has six characters in English (“Follow”) and four in Japanese (フォロー), but the Japanese version is twenty percent longer because it is in katakana, and those characters take up more space than kanji (Fig 5.8). Expansion tables can struggle to accommodate the complex diversity of human scripts and languages, so don’t look to them as a one-stop or infallible solution.

Comparison of Twitter’s “Follow” button size in Japanese and English.

Fig 5.8: On Twitter, expansion is clearly visible: the English “Follow” button text comes in at about 47 pixels wide, while the Japanese text comes in at 60 pixels wide.

Here are a few things you can do keep expansion factors in mind as you design:

  • Generate dummy text in different languages for your design comps. Of course, you should make sure your text doesn’t contain any unintentional swearwords or improper language, but tools like Foreign Ipsum are a good place to start getting your head around expansion factors (http://bkaprt.com/ccd/05-11/).
  • Leave extra space around buttons, menu items, and other microcopy. As well as being general good practice in responsive design, this allows you to account for how text in your target languages expands.
  • Make sure your components are expandable. Stay away from assigning a fixed width to your UI elements unless it’s unavoidable.
  • Let longer text strings wrap to a second line. Just ensure that text is aligned correctly and is easy to scan.

Icons and Symbols

Driving tells us a lot about iconography and attention span. Drivers are constantly bombarded with signs, lights, navigational directions, and other road conditions. They are (we hope) always measuring the speed of other cars, themselves, and the quality of the road ahead. But even though they need to quickly process all of that information while behind the wheel, many drivers find the process so mind-numbingly routine that they play music, force their companions to talk to them, or even sing to themselves to prevent boredom.

We use the web in the same way, becoming inured to all of the icons and signs flashing at us, demanding that we look at them. As we consider some icons in use, take note of how the information flows. There is a sender: the writer, strategist, or designer who is using iconography to convey information. There is the receiver: the audience member or viewer who needs or wants to get information. Their needs are not always in alignment, as we will see in some following examples. When the needs of the sender and receiver are misaligned, the result is poorly formulated iconography that produces a high cognitive cost.

The role of icons

In this era of constant information flow, icons and symbols can take on additional importance in communicating meaning and suggesting action. The problem is that they can often be just as abstract as the language they seek to augment or replace.

So what work should symbols and icons actually perform in our sites and apps? In “Graphic Symbols—Design and Meaning” (http://bkaprt.com/ccd/05-12/), information designer Rune Pettersson suggests that symbols serve many key functions:

  • They represent an organization, a service, or a product. Logos, marks, colors, and other unique identifiers all fall under this use case.
  • They identify key information. Different metadata, such as a calendar event or an important task, can get a paired icon to help make the type of information clear.
  • They illustrate relationships. Icons can compare and contrast information, show ranking, rating, and other information driven by relationships.
  • They show how to navigate content. Icons can show where you are in an information structure.
  • They supply warnings. Icons can make people aware of critical information. The design and pairing of these with language needs to be accessible in crisis situations.
  • They give instructions. Icons show users where to click, where to navigate, and how to perform actions on the screen.
  • They provide context. Icons and symbols can augment words for additional context. In texts and social media, emojis often fill this role, giving the recipient necessary emotional context.

The website for Tōji Temple (Fig 5.9), a famous Buddhist temple in Kyoto, Japan, is an excellent example of how to use icons with text. It prominently features a World Heritage seal in English to help non-Japanese speakers understand the importance of this place at a glance, even if they can’t read any of the Japanese text.

Website for Toji Temple shows Japanese writing but “World Heritage” in English.

Fig 5.9: Tōji Temple, a famous Buddhist temple in Kyoto, Japan, prominently features The World Heritage seal next to the temple’s name (東寺). Paired with the English text beneath it, the seal provides key symbolic context for Western visitors who may not be able to read the Japanese interface, telling them that this destination is a worthy one.

In interfaces that span cultures, the intentions behind icons become trickier. Intent is often different than the actual meaning conveyed. There is a lot of research around how symbols are interpreted, or misinterpreted, across cultures. The long and short of it is that there are strong cultural differences in how people understand icons, and that has a huge impact on their purpose and usage in our sites and apps.

The icon setup

The creation and use of large numbers of icons across interfaces is one area where we see a commoditization of design work, like in wayfinding applications or ecommerce sites. Icon design is certainly a specialized skill, but usually, our limited project budgets and time lines often don’t allow us to create custom iconography. Doing so would mean we’d go live with a set of beautiful icons and no website.

Since that is not an option, we fall back on icon sets. They are so easy to use: all you need to do is search for a set that has the right aesthetic for your project, download it, and start hunting around in the files for the icons you want to use.

But for projects with a cross-cultural bent (which is a lot of projects these days), those icon sets can be difficult to use out of the box. For example, the most recent version of the Streamline icon library, which has around thirty thousand icons, contains money-related icons for credit-card payments (including logos of the big three US credit card companies); Yen, Dollar, Bitcoin, and Euro icons; and a “Modern Payments” category that includes mobile money and point-of-sale tech (Fig 5.10).

Dozens of simple line icons in the Streamline library for currencies, credit cards, and other financial symbols.

Fig 5.10: Many of the icon systems we find online, whether free or paid, are not representative of global cultures, so designers end up putting in extra work to adapt them.

Note what is left out. There are over forty icons dedicated to cryptocurrency but not one single ₹ (rupee) mark—the currency of the sixth-largest economy in the world.

You might argue that this is what designers are for—to augment and extend these icon sets as needed for our cross-cultural projects. If your project budget and timeline can accommodate that, great! My advice is to be hyperaware of what you are buying and downloading with icon sets. Don’t get caught with one that looks great but does not have the symbols your audience will recognize and accept as culturally relevant.

Intent vs. interpretation

When I first started using the Streamline icon set some years ago, I found a strange icon of two hijabs (a type of head covering for Muslim women), one turned upside down beside the other (Fig 5.11). Growing up in Jos, Nigeria, I saw women and children wearing hijabs and headscarves every day, but could not for the life of me figure out why this icon existed or what it represented.

Well, it turns out that it had nothing to do with clothing at all. It was…a pair of scuba-diving flippers. Wow.

Sometimes our cultural filters prevent us from understanding the meaning of icons no matter the intention of the icon designers. In 2018, the United Nations office for the Coordination of Humanitarian Affairs rereleased a set of 295 humanitarian icons on the Noun Project (Fig 5.12) (http://bkaprt.com/ccd/05-14/) in many other smaller design projects since the rerelease.

The icon set is described as a globally acceptable visual language that encompasses a wide variety of humanitarian concepts and challenges depicted in high-quality detail. However, when I looked at the icons, I was confused by many of the symbols. For instance, understanding the child combatant icon is contingent on having that specific cultural knowledge. Otherwise, it just looks like a man next to a huge gun (Fig 5.13).

Earlier, I explained how icons can also provide context, augmenting the words on the screen. However, icon sets that attempt to be globally acceptable run the risk of miscommunication, and the overall impact can sometimes fall short. It’s tough to be all things to all people.

An icons of scuba flippers easily mistaken for two women wearing hijabs.

Fig 5.11: My upbringing in northern Nigeria, where I saw women and children wearing hijabs and headscarves every day, meant that this icon more closely resembled hijabs to my eye than their intended meaning: scuba-diving flippers. Video image from Center for Girls Education (http://bkaprt.com/ccd/05-13/).

Fig 5.12: The UN Humanitarian icon set is pitched as a globally acceptable visual language, but some of the icons are difficult to understand without very specific cultural knowledge.

Icon showing a person beside a same-size machine gun.

Fig 5.13: Without the lens of a specific cultural awareness, the child combatant icon loses its meaning and becomes a man with an oversized gun.

Making icons work

Even when we desperately want to get our icons and symbols right, best intentions may not be enough to communicate our message effectively. The icons we use have to be meaningful, legible, learnable, memorable, and consistent. Remember that the sender/designer must always supply an explanation for a symbol they use. It’s not the receiver/user’s job to do that.

To make icons work in as many cultural contexts as possible, ensure that they:

  • Are paired with text. Help your audience understand icon context by pairing it with specific text describing the content or action. Doing so will help convey meaning that is accessible for people of all backgrounds. A study by Yee-Yin Choong and Gavriel Salvendy, then at the University of Purdue School of Engineering, compared the comprehension levels of Chinese and American university students when interfaces presented icons alone, text alone, or icons and text together. Unsurprisingly, they found that the pairing of icon and text meant a much more effective experience for users, regardless of their cultural background (http://bkaprt.com/ccd/05-15/, PDF).
  • Are visually consistent. You want these icons to be recognizable for what they are—wayfinding and representation of information. To do that, your audience needs to be able to find them on the page! If your icon set includes different styles, random line weights and colors, or non-uniform shapes, it’s hard for users to understand that they are a core part of your visual language. Icons and symbols with unified line weights, consistent shapes, and standardized dimensions are an essential part of your brand experience.
  • Have high contrast. Make those icons pop! You want them to communicate information and support the text on the screen instead of receding into the background, forcing users to squint at them. That means they need to have a clear separation between foreground and background with little to no shading. Silhouettes are a great way to make your icons stand out.
  • Use color consistently. Use a dominant color for your icon system. If there are meanings associated with the colors, use those consistently across your interface. For example, the Vienna Convention on Road Signs and Signals, an international legal framework, stipulates certain colors for traffic lights and many other signs. If you are designing for a culture that uses these conventions, those colors could be a good place to start for interface warnings, errors, and progress messages. Don’t forget to run your color choices through a color-blindness simulator, too!
  • Keep the meaning the same across your design system. Don’t reuse icons in different contexts, if possible. Keep a close connection to your intended meaning, even if you need to slightly change supporting text or instructions. For instance, in an education app, a circular arrow can be used in conjunction with the words “reload” or “start again,” but if it is used with the phrase “return to homepage,” the meaning is clouded and diminished.
  • Are culturally sensitive. Use good ethnographic research and eliminate references that are culturally confusing or dangerous. In Chapter 1, we looked at how different cultures understand the same topic in different ways through the lens of Hofstede’s cultural dimensions theory. If you are choosing or creating an icon that represents a family, you need to do your homework to comprehend what that means across cultures. Does family translate to a small nuclear family with two parents and one child, or a large extended family spanning three generations?
  • Are customizable. For larger projects with icon systems in play, it is almost inevitable that you will need to customize some of them to work better culturally or visually. Check to see how the icon set is put together. Do they use editable shapes or strokes? Are the shapes separated or on different layers? Are dimensions standardized and easily transferrable to the browser? A yes to all of these questions will make it easier for you to edit, combine, and remake icons as needed for your project.

Color

It’s pretty easy to find listicles online telling you what colors mean in different cultures. For instance, in Indonesia, the color green is associated with Islam and courtrooms; the verb memejahijaukan means to take someone to the “green table,” a reference to taking someone to court (http://bkaprt.com/ccd/05-16/). Yet in the United States, the same color is associated with money, greed, jealousy, and resentment. “Green with envy” is an English saying describing someone who is extremely envious or jealous.

There’s a deeper message here—color choices are often arbitrarily tied directly to cultural and social lore. Understanding these stories and sayings is where local collaborator feedback will come in handy. The picture you have on your breakfast-cereal startup homepage of a couple sitting at a breakfast table with a green tablecloth will work in some cultures, but not others.

But the meaning and usage of color are defined by society and culture, not some master list of dos and don’ts in a blog post. Using listicles to finalize color choices hides the real issue you are facing—lack of local knowledge.

Color me bad

Color can be associated with sacred rituals, political parties or civic movements (sometimes the same thing), or other cultural touchpoints, such as national flags. You will probably not know these things offhand, but even a cursory web search will get you started. Your cross-cultural research should also give you more relevant information, if you take the time to ask questions.

Here is a list of a few specific colors and what they symbolize in certain cultures. Think about brands that use them prominently or about the times you’ve used them in your own work.

  • Green: In Saudi Arabia, Indonesia, and some other Muslim nations, green is associated with Islam and the Quran, and appears in a number of flags of majority Islamic nations. However, in Western nations, the Green Party is usually the environmental party, and green often indicates recycling, environmentalism, and nature.
  • Yellow: In Thailand, the color yellow represents the King, and when worn by regular people, it shows respect and deference to him. In France, however, the color yellow can symbolize jealousy.
  • Blue: In India, blue traditionally represents the color of Lord Krishna (a Hindu deity representing virtue and wealth). Recently, though, blue has been associated with the India National Cricket Team, also known as “the men in blue” for their distinctive blue uniforms. Contrast that with the United States, where “the men in blue” refers to the police.
  • Red: In Chinese culture, brides traditionally wear red at weddings. It’s an auspicious color that is supposed to bring success, fertility, happiness, and love to the newlyweds. However, in the US, red is associated with energy, danger, anger, and sex—not exactly wedding-appropriate sentiments!

Color palettes and preferences

Preferences exist in every human culture for color, layout, textures, and patterns. None of this is set in stone. I bring this up so that you don’t get carried away with trying to match a single color to a single cultural theme. The process of digital design is complex, so it’s important to think about color choices as part of a palette. Even the iconic Coca-Cola brand uses two colors—red and white—as its dominant brand palette worldwide. And other digital brands have a full suite of primary and secondary colors to aid in highlighting content, interactions, and messaging.

Here are some ideas to help you build culturally appropriate color palettes:

  • Look to art and popular culture for cues. I like to use apps like Coolors, a color palette generator, to upload culturally relevant images and autogenerate color palettes from them (http://bkaprt.com/ccd/05-17/). When I uploaded an image of illustrated calligraphy by the fifteenth-century Persian poet Jami, the app gave me a lovely starting palette (Fig 5.14). I suspect I could create a full color system for a digital experience about classic Persian art if I uploaded a number of other classical Persian images to the app.
  • Look at movie-color analyzers. Some of the most interesting data visualization tools I see on the web today are movie-color analyzers, which process all frames of a film to produce a color palette. The Colors of Motion explores how movies use color (http://bkaprt.com/ccd/05-18/). Each line of data visualization represents the average color of one frame (Fig 5.15). I love finding out that the color palette of a movie I enjoyed matches my memory spot-on. Similar to Coolors, you can use these visualizations as a reference point for the kinds of combinations and general palettes used by various cultures.
  • Use color services. Pantone, an American company that produces a standardized color reproduction system, releases its Color of the Year annually in December—often to commentary and mockery online. And that’s okay! It’s a marketing exercise. The whole point is for brands and businesses to be able to forecast consumer mood and design seasonal products around it.

Color preferences will shift, sometimes rapidly, within popular culture, so remember that these services can only give you a small snapshot of what was (and will hopefully become) popular, but that can be enough to understand what visual themes and palettes a culture is into for a particular time.

Color palette of grays, ochres, and pinks underneath an image of Persian calligraphy.

Fig 5.14: One feature of Coolors allows you to upload images, which are then analyzed and processed into a palette for you. Because the site is sensitive to current color meanings, this is a great way to quickly get a bank of updated color ideas for your design system.

Color palette of greens and grays with one bold stripe of yellow.

Fig 5.15: A palette analysis on the Colors of Motion for Children of Men, the 2006 movie by Alfonso Cuarón, gives you a single color for each frame of the movie. This being an especially tragic sci-fi movie, there’s a lot of gray, deep green, and very little warm color. As you scroll down the web page, the lines animate out, which adds a nice interactive touch to the site.

Images and Illustrations

How you use image as textures, brand elements, or contextual information is a common decision you’ll need to make as you build a cross-cultural design system. Clearly communicating the intent and context of images in a layout will make your digital experience feel more impactful for diverse audiences. I don’t believe the perfect image for a website exists (excluding animal memes, of course), but it is possible to make good, solid choices across your site.

There are a few steps that we can take while embarking on cross-cultural projects.

Avoid stock photos

Stock photos can be a particular hell. Finding the right one for a project is often an endless cycle of searching for slightly different keywords and scrolling through pages of creepily smiling people. They are difficult to get right, especially when we are designing for a cross-cultural project. Finding images of non-WEIRD people in natural situations is almost impossible with current stock photo libraries.

If you must use them, however, use libraries like Tonl (http://bkaprt.com/ccd/05-19/), which I mentioned in Chapter 1. They are on a mission to challenge the stale, homogeneous look and feel of stock photos by telling engaging narratives about their models (Fig 5.16)—a stark contrast to the anonymous faces found on many other stock photo sites.

Page from Tonl.co showing a woman in glasses and a pink shirt with the headline “More Than Transgender: Met Gulshan”.

Fig 5.16: Tonl is a startup that is challenging traditional stock photo libraries. Their content highlights narratives about their models, giving them a name, a personality, and agency, something buyers and creators can reference as they use the photos.

Notice cultural markers

Earlier, we looked at cultural dimensions and the role they play in defining audiences. Based on your audience research, you should be able to look at those dimensions and pick images that work for, and not against, your audience’s cultural norms. For instance, in a more Indulgent (IND) culture, images of people smiling and enjoying each other’s company will play better than images featuring formal human interactions.

Organizations need to speak with an appropriate visual voice for the markets they are in, and that means checking (and rechecking) photography for signifiers that miss the mark. Start by going through your existing photo repository and finding five to ten images you feel are appropriate for each of your markets. Look for the cultural markers we discussed earlier, such as clothing, color palettes, ethnicity or race, and even written content on posters or computer screens. Details matter. A simple colored T-shirt can be seen as a political symbol. Trust me: doing this can be the difference between waking up in a cold sweat at three in the morning with the realization that you’re about to launch an international project with inappropriate cultural signifiers or sleeping soundly because you did all of this work well before the deadline.

Offer relevant versions

Another straightforward way to make localized and translated sites more relevant to different populations is by switching images. Changing visual design for different markets is a commonplace exercise when doing global branding and marketing. Even when the text is in a language you understand, it is good to see faces, images, and other content that visually reflects your identity.

The DocPlanner website asks users to select their country to access localized search and services. On each localized site, the header image shows a pair of medical professionals who are meant to represent the people of the selected country (Fig 5.17). In order to make this happen, DocPlanner used a style switcher to swap out header images in their CSS, a technique you can also use for some simple localization.

However, something stuck out to me: all of the people are light-skinned, even in countries where there are huge variations in skin color and ethnicity.

When switching images of people, take great care to present skin tones and ethnicities that match your user’s culture. As a general rule, if you are going to use images of people, make sure that you broadly represent people from that culture, even if it means using more photos or illustrations instead.

Two versions of the docplanner.com homepage where only the language and image have been changed.

Fig 5.17: DocPlanner.com uses localized header images and content to appeal to audiences in different countries. The left image is the Brazil page in Portuguese, while the right image is the Chile page in Spanish. Note that all of the UI structures are the same, with only the text and header images changing.

Beware of historical cues

There is a strain in every culture of glorifying the way it was and wanting images and content that reference the past. In my adopted home of the United States, this often takes the form of post-WWII images of traditional nuclear families in quiet neighborhoods with manicured front lawns—imagery associated with the so-called “Golden Years” of America. For white, heterosexual, middle- and upper-class members of the Baby Boomer generation (people born between 1946 and 1964), the popular culture, photography, and technology of the mid-twentieth century are remembered fondly.

But that era has a different, often negative connotation for marginalized groups. For example, Black people who lived in the US during that era were subject to Jim Crow laws, which enforced racial segregation and violently suppressed their constitutional rights. Internationally, the US actively participated in civil wars and international conflicts in the Americas and Asia by offering financial, political, and military support. So for many people at home and abroad, images that reference these so-called Golden Years in the US are either meaningless or carry negative connotations.

How do you avoid this? Simple Google image searches are a good first step. As I advised earlier, immersing yourself, however briefly, in the culture you are designing for will require that you research its history, pivotal events, and cultural movements. As you begin your visual design work, prioritizing collaboration and communication with the local design community or onsite researchers will also help ensure you are not sending the wrong message with your image choices. If you don’t have time or budget for longer collaborative sessions, build a moodboard of different visual themes and have others look them over, choosing the one that is the best cultural fit.

Build over Time

Brands, design systems, and websites are living things. They evolve with technology, design trends, and even politics. Only using the tips I outline in this chapter won’t be enough to make your content and digital experiences culturally responsive. However, if you take initial steps to create effective cross-cultural design systems, then people will keep visiting, cheering you on with their attention and clicks. And I’m cheering you on, too. Keep updating, adapting, and testing, focusing on the greater goal of building experiences that prioritize the needs of your audience.

Chapter 6. Internationalization and Localization

The bigger the design system, the more chances it will have to move across cultures—to go global. With globalization comes the need to adjust content, branding, and design strategy to accommodate new languages, nationalities, and cultures.

This process is called internationalization—designing or updating your websites and products so they don’t contain any cultural-specific attributes. Internationalization (which is sometimes referred to as i18n) does not mean your digital experiences have to become hollow and boring; it means making them as flexible as possible so they can function well across various cultures. Mozilla explains that the process of internationalization

involves identifying the locales that must be supported, designing features which support those locales, and writing code that functions equally well in any of the supported locales. (http://bkaprt.com/ccd/06-01/)

Want to see a glimpse of the scope of work? Go to the Internationalization checker from the W3c and plug in the URL to one of your sites (http://bkaprt.com/ccd/06-02/). It will test your character encoding, language declarations, and Unicode to gauge your level of internationalization-friendliness.

Internationalization should not be confused with localization, which is the next step. Localization is the process of

[m]odifying or adapting a software product to fit the requirements of a particular locale. This process includes (but may not be limited to) translating the user interface, documentation and packaging, changing dialog box geometries, customizing features (if necessary), and testing the translated product to ensure that it still works (at least as well as the original). (http://bkaprt.com/ccd/06-01/)

In other words, internationalization is about making sure your product can go anywhere; localization is about preparing it to go somewhere. Localization means changing interface structures, altering stylesheets and layouts, revising copy and language, and adapting and augmenting your site for your specific cross-cultural audience.

Internationalization and localization processes are a lot of work; don’t take them lightly! I have worked on all sorts of localization projects, and it never ceases to amaze me how complicated they get, and how quickly. You need a team with project management experience, designers and content strategists who know what they are doing, structures in place to work with the demands of multilanguage content development, and close coordination with business stakeholders. Oh, and a budget. You’ll definitely need a budget.

Okay. I hope I have scared you a little bit. This chapter goes over just a few of the things you will need to consider when localizing your design systems and digital experiences, such as:

  • Formatting
  • Directionality
  • Translation
  • Designing for second-language speakers

Formatting

I find it fascinating how so much language has similar, but not quite identical, patterns. All humans, for instance, have names, but their order, complexity, and rules for use can change in every culture. Dates always reference a single point in our annual journey around the sun but may be presented in a different order, called by different names, or measured by different calendars.

When I talk about formatting, I’m highlighting the parts of localization that require you to take that information and change the order, organization, or view of it to make it accessible to different cultures.

Names

  • Name order: Which name comes first—the family name or the given name? When I lived in Japan, my given name, Senongo, was often assumed to be my family name, because it is customary for family names to come first; I had to remember to use Akpem first on official documents and in formal situations. Make sure your form fields reflect the name order your audience uses when designing for the web.
  • Name letters and lengths: Does your system account for the different characters and lengths of people’s names? My oldest friend in the world, someone I have known since I was eight, is the son of a Yoruba-speaking Nigerian father and an American mother; he has four names with a total of twenty letters. Meanwhile, one of my coworkers has a last name with just two letters. Names may also include letters with accents, tildes, cedillas, and other diacritical marks. As you plan your interface, keep these international variables in mind, and make sure your system accepts them. Check out the Multicultural Names plugin for Sketch, for a cue to how we can automate a bit of that in our design comps (http://bkaprt.com/ccd/06-03).

Locales

  • Postal codes: Does your UI support the postal codes your target audience uses? For example, postal codes in Bangladesh are four-digit numbers (like 1305), while Canadian codes are a combination of letters and numbers (like N8N 4Y0). Any form or address input should account for these variations.
  • Formatting addresses: Do the order and labels on address fields conform to how your audience writes? Both Canadian and Japanese address forms require the same information (like a street address, a postal code, and an addressee name), but the information is requested and displayed in a different order (Fig 6.1).
  • State/Region/Provinces: Are things like states and provinces correctly accessible in form fields or in content? Etsy’s shipping form prefills the thirteen Canadian provinces and territories, making the form both more personalized and easier to complete (Fig 6.1).

Dates

What comes first in a date? The day, the month, or the year? In “13 tips for making responsive web design multi-lingual,” Tom Maslen, then a developer at the BBC, wrote extensively on localization formatting (http://bkaprt.com/ccd/06-04/). He noted that, for many languages, it’s not just a matter of swapping months and days (Fig 6.2):

  • The Chinese date format labels each part of the date [such as] “Day 5 Month 10 Year 2014”. Numerals are used in the Chinese date format because they require fewer characters than the Chinese alternatives. It’s convention to use numerals when displaying Chinese horizontally. When displayed vertically it is convention to use the Chinese characters.
  • Though Persian and Pashto use different characters, they display both the Western calendar and the Iranian calendar together.
  • Arabic shows two versions of the month name using a forward slash as a divider.

When you have to show multiple date formats on your site, you can start by storing the date in UTC (Coordinated Universal Time), since that can be converted to something readable and localized. UTC will look something like this: 2018-11-04T10:15:06+00:00. You can then take that and reformat it in your page templates, so that it conforms to whatever way your audience reads dates.

(Left) Etsy form for entering a shipping address in Canada, with a dropdown for provinces and territories. (Right) Etsy form for entering a shipping address in Japan, with different fields in a different order than the Canadian version.

Fig 6.1: In the Etsy ecommerce checkout, the same UI can support two different address formats. The introductory information of name and email address is the same, but on the Japanese form, the full name is followed by postal code (郵便番号), prefecture (都道府県), city (市), ward/neighborhood (住所), and finally street address (建物名・部屋番).

Date formatting differences in Burmese, Sinhala, Chinese, Persian, Pashto, and Arabic.

Fig 6.2: Different languages require different date formatting. This chart from the BBC shows how diverse date formatting can be on the web.

Currency

  • Inauspicious numbers: Certain numbers are unlucky in almost every society. While I lived in Japan, I quickly learned that the number four was inauspicious. One of its pronunciations, shi (四), is the same sound as the word for death, shi (死). In Christian societies, 666 is considered to be the mark of the Devil, so a hotel room with that number or a product with a price of $6.66 tends to be frowned upon.
  • Currency presentation: How do you give people the ability to shop or browse using a currency they are familiar with? I really like the way Etsy handles its currency layer—customers have the option to select the country, language, and currency, since those three things can be different (Fig 6.3).
  • Multicurrency: How do you show currency? Seeing currency exchange rates is extremely important for people who frequently send money back to their native country to support their family (also known as the global remittance market). For reference, almost three percent of India’s annual GDP is remittances (http://bkaprt.com/ccd/06-05/)! List the exchange rates when designing interfaces that need to show more than one currency, making note of whether the rate displayed is official or calculated by the business. Western Union, the global money-transfer company, clearly lists its exchange rates next to the currency amounts and codes (Fig 6.4). Presented with this information, senders see exactly how much money their family members will receive. (And for people interested in economics, it also acts as a rough measure of the financial health of their home country!)
  • Tax/Value-Added Tax (VAT): How are taxes displayed? There are numerous legal and social requirements around taxes, so be intentional with their presentation. For instance, Bahrain charges five percent VAT for digital products. Suddenly getting hit with a new tax after going through the whole checkout process increases the chance that customers will abandon their carts. Clearly displaying that information before checkout will result in a smoother user experience and, therefore, more sales.

    Fig 6.3: Etsy provides a number of different and overlapping options for localized ecommerce. They allow customers to set Region, Language, and Currency independently. 


    Western Union module for a payment transfer, showing the exchange rate along with the payment itself.

    Fig 6.4: Western Union, a global money-transfer company, displays its currency exchange rate when customers transfer money, along with the currency codes (USD, NGN, etc.) instead of currency signs like $ or ₦.

Directionality

One of the biggest layout challenges you will face when localizing your sites and apps is what to do when dealing with right-to-left (RTL) languages such as Arabic and Hebrew. Mustafa Kurtuldu, a senior UX designer at Google, told me that Material Design, Google’s design language and interaction framework, recommends “mirroring” certain UI elements in RTL layouts (Fig 6.5) (http://bkaprt.com/ccd/06-06/). For instance:

  • Headers, labels, and text should read from right to left.
  • Navigation buttons should be reversed, but icons that don’t indicate direction should not be.
  • Checkboxes should appear to the right of their label.
  • Progress bars should fill from right to left.

But let’s take a closer look at managing icons and text in RTL layouts.

Comparison of a Material Design module in a left-to-right layout and right-to-left layout.

Fig 6.5: In this example from Material Design, we can see how the text and progress bar in the LTR layout (left) are mirrored in the RTL layout (right). The Storage and Data Usage icons, which don’t imply direction, stay the same.

Icon direction

While the decision to mirror your icons will depend on what you uncover in your research and usability testing, there are a few general rules of thumb:

  • Mirror icons that indicate time, motion, or direction. Icons for ideas like calendars (time), email replies (motion), and text justification (direction) all make sense to mirror. Microsoft’s UI Fabric system shows directional icons that will automatically be mirrored in their RTL stylesheet (Fig 6.6) (http://bkaprt.com/ccd/06-07/).

    Grid of thirty icons showing how to correctly mirror them for right-to-left layouts.

    Fig 6.6: Microsoft’s developer guidelines list icons that must be flipped to properly communicate in a right-to-left layout.
  • Don’t mirror video UI. Yes, this is an exception to the last rule, but there is a good reason for it. The LTR video UI has been used for a long time, since the days of portable Walkmans and VCRs, so it’s a known convention in cultures that read RTL. Also, unless you are planning to design and develop your own media player, you will likely be embedding from YouTube or Vimeo, so you have no choice anyway! The BBC’s media player, for example, shows the play/pause, volume, scrubber, and other icons in an LTR configuration, even on an Arabic-language page (Fig 6.7).
  • Leave icons that don’t communicate direction as is. It is a waste of your time to flip the orientation on everything, especially if it does not increase comprehension. Icons for a coffee cup or keyboard will not become any clearer to an RTL audience by being reversed. Spend your precious time and attention on other, larger directionality issues.

Text direction

It’s important to note that your browser knows if a sequence of characters is supposed to be LTR or RTL out of the box. It uses something called the bidi (as in, bidirectional) algorithm (http://bkaprt.com/ccd/06-08/). Luckily, each character in Unicode has an assigned directional property:

  • The majority of Unicode characters for a language are defined as strong, meaning they have explicit directionality. They are very opinionated and will always appear LTR or RTL, based on their language’s direction.
  • Unicode characters and symbols that can appear in both LTR and RTL scripts, such as punctuation, are defined as weak, meaning they inherit the directionality of the character just before them. They follow the leader.
  • Neutral characters, like tabs and new line characters, are happy to go with the crowd and inherit the direction of the characters surrounding them.

    Video on the BBC website, showing a right-to-left text layout but left-to-right video interface.

    Fig 6.7: The BBC’s media player does not reverse its LTR interface, even though the page and its content are in Arabic.

dir is a global HTML attribute that sets the base display direction for text. The attribute accepts one of three values: ltr, rtl, and auto. If you don’t specify a direction for your document or element, it will default to ltr. If you want your text to respect the strong/weak directionality mentioned above, you should make sure dir is set to auto.

You can put it on the body or html element of a document to control the whole thing, but it’s not strictly a global element. You should add the attribute to specific elements when you need to—for example, when a page is in one language, but a name or phrase is in a different one.

Sometimes, the bidi algorithm makes funny things happen with text, as Spotify discovered when they were localizing for an Arabic audience. The base direction of the page was set as <html dir=”rtl”>, which takes care of the Arabic, but the directional properties of the Latin text and punctuation were not defined. As a result, some song titles came out a bit funky (Fig 6.8). Tryggvi Gylfason, a software engineer at Spotify, outlined why this happened (http://bkaprt.com/ccd/06-09/).

The browser saw the base direction for the Arabic language page was RTL, and so took “Let It Be (Remastered),” the original text string, and began parsing it from right to left. However, in that reversed song title, the weakly typed “)” came first, so it got flipped to the other side. “Let It Be (Remastered)” became “(Let It Be (Remastered.” In this case, it’s not the end of the world, but it illustrates how picky the bidi algorithm can get when we need text to come together.

In order to prevent things like this in mixed-text situations, try to set the direction on the specific text element in question, such as <h2 dir=”auto” class=”song-title”>Let It Be (Remastered)</h2>, so that the browser does not have to infer directionality from the page level or the bidi algorithm. You can check out this fork of a CodePen provided by Mat Marquis to see more of how this functions (http://bkaprt.com/ccd/06-10/).

Translation

Spotify page in Arabic for the song “Let It Be (Remastered),” showing the parentheses misplaced.

Fig 6.8: Conflicts in the bidi algorithm caused incorrect text formatting and misplaced punctuation on Spotify’s Arabic page.

Rwanda is a small but increasingly important country in central Africa, about the same size as Massachusetts or Lebanon. Since a devastating civil war in the early 1990s, where almost one million people were killed in a genocide, the country has worked hard to recover from those atrocities by changing its social dynamics and attracting foreign investment (not aid) (http://bkaprt.com/ccd/06-11/). Almost the entire country speaks Kinyarwanda, and until 1994, the other official languages were French (a holdover from the colonial era) and Swahili. English was added as an official language in 2008.

This means there is a whole generation of Rwandans who have grown up speaking English as a national language; designing digital experiences for young professionals would mean crafting them in English, the language of business. But experiences for earlier generations would likely need to include Kinyarwanda, French, and Swahili. Every language decision for the Rwandan market requires understanding its historical context.

Translation is thoughtful and difficult work. Without knowing a culture’s linguistic history, you run the risk of your project being, at best, ineffective—and, at worst, insulting. There are different levels of complexity in any translation work. As you read on, think about the costs and benefits of each level and what they will mean for your upcoming project.

The costs of translation

Effective translation works across technology, staff, and strategy. The cost of translation multiplies fast.

The technology you use (and its ease of development) is the first cost you will need to consider. Ask yourself if you have the technical skill within your team or if you will need to hire a developer to set up your CMS and backend systems to handle translated content. Then there may be costs to buy plugins, domains, or other licensed software, such as webfonts with special Latin characters or in CJK languages, needed to create the digital experiences.

The second cost is paying for the translated material. Using a professional translator is one option. For context, using the Gengo professional translation platform, translating a single blog post of 7000 words from English to Danish would cost about US$700, and English to Dutch would cost around US$600 (http://bkaprt.com/ccd/06-12/).

The third cost is your team’s time—in coordination, project management, design, quality assurance (QA), and a myriad of other small tasks. As I said, things can add up fast. Let’s take a look at three alternative options, then, for localizing content—from simpler to more complex.

Machine translation

Using the browser’s ability to translate text is one option for translation. I often use the Google Translate feature when I want to quickly understand what a website is about. Machine translation can be useful for giving users an overall understanding of your page content. It doesn’t need to be exact, especially if you’re designing on a budget.

The downside of machine translation is that the computer will inevitably get it wrong, sometimes in embarrassing ways. In 2017, writer Alex Shams posted examples of how Google’s translation algorithm returned gendered results when translating gender-neutral language (http://bkaprt.com/ccd/06-13/). The team behind Google Translate originally decided to provide only one translation for each search query, even if there was a masculine and feminine form of the word. As they designed it, their algorithm was biased toward making words like “doctor” masculine and words like “nurse” feminine. An innocent mistake, of course, which no one ever in the history of language or tech could have foreseen. Ever.

They started fixing this “mistake” in 2018; some languages (French, Italian, Portuguese, and Spanish) began showing both feminine and masculine translations for single words (http://bkaprt.com/ccd/06-14/). Now, typing “o bir doktor” in Turkish will show both “She is a doctor” and “He is a doctor.” (Fig 6.9).

Google Translate page showing “o bir doktor” in Turkish translated to “She is a doctor” and “he is a doctor” in English.

Fig 6.9: Until around 2018, the Google Translate algorithm was programmed to ignore feminine words in several languages and return all translations as masculine, disregarding actual meaning and causing unnecessary offense.

Even if this quick route is acceptable to you, be aware that machine translations will not—by virtue of their simplicity and lack of empathy—be able to replicate the nuance of your brand language or designed experience. There’s also no guarantee that your audience will have the latest version of Chrome installed or that they know to use the browser’s translation tools. If you plan to rely on the browser to translate your content, be aware that there are a number of technical considerations you will need to account for. I won’t get into it here, but there is a wealth of information online to help you get started (http://bkaprt.com/ccd/06-15/).

I recommend doing it the right way—using human translation services.

Simplified translated content

As you can probably tell, I’m a huge fan of culture, history, and art. I got the chance to visit Paris for the first time in 2015, and the only place on my bucket list was the musée du quai Branly–Jacques Chirac. The museum holds 300,000 works from Africa, Asia, Oceania, and the Americas; the place is full of photos, sculpture, textiles, masks, and art spanning the history of the world from the Neolithic age to the twentieth century.

The Branly site takes it a step further when it comes to access for different languages (http://bkaprt.com/ccd/06-16/). They fully translate the site for three major visitor languages: English, French, and Spanish. If you’re not fluent in those languages, you can also access a series of downloadable PDFs in 中国, 日本語, Deutsch, Italiano, Portuguese, and العَرَبِية‎ that include museum information and exhibit descriptions (Fig 6.10).

For a national institution of this size, with shifting exhibits and marketing campaigns, getting accurate information in nine different languages is a real challenge. The simplified content translations are a reasonable stopgap, providing critical content like museum hours in more languages than they would otherwise be able to. That said, I’m not sure that the production process of designing, creating, and uploading forty-one individual PDFs is more efficient than publishing HTML pages.

If you aren’t able to pay for full translation services but want to control translation more than with browser translation, the Branly model could be a good option. Fully translate what is most critical for your audience, if possible; at the very least, localize a simplified version of the content. My strong recommendation would be to do this with a web page instead of a PDF. HTML is inherently more flexible, searchable, and accessible, making it a good solution for a global audience. These simplified page templates need little else besides a header, footer, and a WYSIWYG text editor area to add in text and image. That frees your team up to not worry about using any complex layouts or HTML structures in other parts of your site, and instead just have the bare bones of what you are trying to communicate.

Dropdown on the musée du quai Branly–Jacques Chirac website showing options to download basic translations in nine languages.

Fig 6.10: The Branly accommodates different languages via a simple dropdown that lets visitors download PDFs containing museum information.

Original localized content

Your third option for translation is to hire professional translators. On the extreme end, that would mean completely translating your entire website, word for word. In other cases, just translating the words on your site won’t be enough. It may be linguistically correct but won’t necessarily take into account cultural or marketing needs. To create a truly localized experience, you may need to write and design new content developed in the target language. This doesn’t need to break the bank. In fact, it can even result in more effective, culturally relevant content for your audience.

In 2018, at ComNet, the annual conference of the Communications Network, I attended a workshop by Danielle M. Reyes and Dr. Selma Caal, executive director and director of research and program development at the Crimsonbridge Foundation (http://bkaprt.com/ccd/06-17/). One of their mission strategies is to give grants to nonprofit organizations to create content explaining their services to Spanish-speaking Americans. They do not pay for quick translation work—they fund the development of original content in Spanish.

For example, Girls on the Run Montgomery County, a nonprofit that sponsors an annual 5K run for girls, wanted to increase participation of girls in the Spanish-speaking community. Instead of funding a full translation of their main site, they created a Spanish-language microsite, targeted at parents (Fig 6.11) (http://bkaprt.com/ccd/06-18/). Not only was the resulting content written in the target language, but it also answered questions about the event that were specific to the concerns of the local Hispanic community, which may not have happened through a full-site translation.

A Spanish microsite for Girls on the Run Montgomery County, with imagery of running children and the headline “lo que hacemos.”

Fig 6.11: Girls on the Run Montgomery County used a Spanish-language microsite to advertise their yearly 5K run to Hispanic parents in the community.

Localization toolkits

Whatever path you choose, a localization toolkit can help make any translation project more successful. Because localization is such a time-consuming and expensive process, we need some structure to help us plan and deliver content effectively for our audiences. Localization toolkits are the documentation that translators need to be effective and ensure they are focusing on what is most important. They contain:

  • A list of languages to be translated. This should include regional specifications as well—the Portuguese spoken in Brazil is different than that in São Tomé and Príncipe.
  • Descriptions of your audience, their particular needs, and how to write for them. For example, USA.gov, the official portal for all things American government, offers guidance on the appropriate voice and tone for government websites (Fig 6.12). This kind of style guide would be great to provide as part of your translation toolkit.
  • A sitemap listing all pages and content that need to be translated.
  • Any existing translation memory, a database that allows translation teams to store and reuse phrases and words that have been previously translated.
  • A detailed description of your timeline. Translators will be able to turn around anywhere from 1,500 to 2,500 words a day, so plan accordingly.
  • Information on your tech stack, including what your site is built on, and login details for the content management system.

Bilingual style guide on USA.gov, with advice on imagery and voice.

Fig 6.12: The USA.gov style guidelines include some basic instructions about appropriate Spanish language voice and translations.

I hope I haven’t scared you away from translation. As you can see, it is a complex task with quite a few pitfalls but also some amazing benefits when you get it right. Whether it’s scoping fully localized and translated sites as part of a site redesign, getting automated translation tools like Google Translate to help you out, or just picking a few key pages to focus on, you’ll have plenty of work.

Sometimes, despite your best efforts, none of these are appropriate options. If that’s the case, you can use other design techniques to assist users in understanding your site, regardless of their native language.

Design for Second-Language Speakers

There’s a mismatch between what we perceive as the lingua franca of the web (English) and what languages internet users actually speak. Here are a few surprising stats that begin to illustrate what I mean. Of the top million sites on the web, 54 percent are in English (as of this writing), but native English speakers make up only 25.2 percent of the people online. Over 19 percent of people online are native Chinese speakers, but only 1.6 percent of the top million sites are in Chinese. Almost 8 percent of the people on the web are native Spanish speakers, but only 4.9 percent of the content is (Fig 6.13) (http://bkaprt.com/ccd/06-19/).

Chart showing most common languages used on the web, with English, Chinese, Spanish, and Arabic being the most common.

Fig 6.13: About twenty-five percent of internet users speak English, while fifty-four percent of the top million websites are written in English (http://bkaprt.com/ccd/06-20/, http://bkaprt.com/ccd/06-21/).

It would be easy to assume, based on the percentage of English sites on the web, that the majority of our audience will also be native English speakers. That would be a huge mistake. The reality is much more nuanced. Billions of non-native English speakers use those sites, reading, watching, and communicating in their second (or third or fourth) language. In the spirit of this book, I’ll note once more that language does not equate to nationality—millions of Spanish speakers live throughout the Americas, West Africa, and Europe, for example.

As we saw in the last section, fully translating and localizing our sites and apps is an expensive, mammoth task. If translation is not in the cards or if your project is too far along to do anything about it, there are other steps you can take to make sites accessible for non-native speakers. Simply put, the key is to focus on providing clear language, structured content, and prompts to help users as they navigate the largely English-speaking web.

A lot of what follows will look like basic, good accessibility advice. And it is! I hope you are already doing some accessibility work and building it into your design systems and process, in which case these ideas will feel very familiar. However, I want you to see that work through the lens of what is needed for those billions who are English as a Second Language (ESL) speakers.

Let’s look at a few important steps.

Expose navigation and content structure

Reading on screen can often be disorienting—where am I in this document? How much more content is there, and do I have the stamina to make it through? These are all split-second decisions we make when picking up a print book, but that doesn’t work so well online. As a designer, you need to expose content structure and navigation, allowing second-language learners (and everyone else, frankly) to see what they are getting into with your content.

Some things you can add to your pages to help:

  • Tell people how long it will take to go through your page. On Medium, the “~ min read” label can provide context for the amount of content on the page (Fig 6.14). However, be careful to take your audience’s linguistic skills and reading ability into account rather than going strictly by word count to estimate reading time.

    Headline and summary for an article on Medium.com, including text alerting readers that it is a “3 min read.”

    Fig 6.14: Medium defines the amount of time needed to read an article in their teaser copy, next to the published date.
  • Give people a breakdown of the contents of the page upfront before they begin reading. On GOV.UK, the government portal for the United Kingdom, interior pages include an anchor-linked “Contents” list just below the title (http://bkaprt.com/ccd/06-22/). Each item acts as a jumplink to navigate the content (Fig 6.15). Your readers can scan this list for context and quickly get to the content they are looking for on the page. For longer reports or academic content, these could be one-sentence key takeaways or summaries linked to different sections.
    Page on “Recruitment and disabled people” on GOV.UK, showing use of anchor links to help users navigate the content.

    Fig 6.15: GOV.UK uses a list at the start of each page, much like a table of contents, to give readers insight into what will appear farther down the page. 


  • Offer clear onboarding before people begin using your site in earnest. As non-native speakers download and enter your app or site for the first time, offer a transparent view of functionality or the interface’s organizing principles. This hand-holding at the beginning of the experience shows people exactly what they are getting into, even if your audience doesn’t have a perfect grasp of the language you are using. Duolingo, the language-learning app, provides a great example of how to make onboarding clear. The screens show how much progress you’ve made, while also using large illustrations and plain-language instructions (Fig 6.16).
    Page in the onboarding flow for Duolingo, showing a list of languages and a progress bar for the flow.
    Fig 6.16: The Duolingo language app uses a series of simple English questions and a progress bar to onboard users to their learning platform.

Make print stylesheets as effective as possible

Yeah, people print stuff out. Count on it. Especially people, like second-language speakers, who want to focus on and review things they don’t immediately understand. So as with many of the other accessibility tips on the web—make your print.css stylesheets actually work!

One technique I find helpful is to add a prominent “Download” button on each page. Then, as part of your design and content strategy process, spend time creating a standardized, nicely organized print.css file. That way, when your ESL audience taps that Download button, they get a nicely formatted PDF.

Only use hyperlinks when necessary

Too many links in a block of text can make collating and synthesizing information difficult. When second-language speakers view digital content, they often feel the need to check the included links for additional context or relevant information. (Native speakers do this too!) There’s a downside: each click takes them farther away from the primary text and content. Freedom to explore also means freedom to get lost, as anyone who’s ever walked around a new city can tell you.

Offer clear access to contextual information

At the same time, however, you do need to offer context, especially when it comes to new or unfamiliar language. When ESL learners encounter new words or phrases online, they almost always choose ways to define the word that takes a minimum of fuss and time. That means searching the web for dictionary definitions where possible or just making an educated guess. In “A Study of ESL Students’ Perceptions of Their Digital Reading,” Dr. John Gilbert, a researcher and language instructor, noted:

[I]t is faster and easier for the language learner to engage in online split-second definitions than thumbing through page upon page of listed words and their meanings in a paper-bound dictionary. (http://bkaprt.com/ccd/06-23/, PDF)

Tooltips next to key content is one way to support these split-second decisions. The Los Angeles Times used this approach in an article about a new California law seeking to decriminalize the sale of home-cooked food (http://bkaprt.com/ccd/06-24/). Because some of the terms in the article, like bánh bột lọc (soup dumplings), may be unfamiliar to their readers, they added a contextual information popup on the article with a photo and a description (Fig 6.17). Small, unobtrusive explanations next to key content can provide that continued layer of help your users need.

A popup on an article on the Los Angeles Times showing an image and definition for a type of Vietnamese dumpling.

Fig 6.17: The Los Angeles Times uses popups to subtly convey contextual information to those who need it, “so the people who already understand these terms feel like our target audience” (http://bkaprt.com/ccd/06-25/).

Keep your content readable

It is often the case that people charged with content creation and design overestimate how well their ESL audiences can read. Even if that doesn’t seem like a problem you will face, it is good practice to get an objective idea of how complex your copy is. To test this, you can run it through a Flesch-Kincaid Readability Test (http://bkaprt.com/ccd/06-26/). The test measures how difficult it is to understand a passage in English and assigns a score or US-based reading level. You can do this with the “Show readability statistics” tool in Word or by copy-and-pasting your content into one of the many online readability tools.

After you get your score, you can take a few basic steps. First, create a content map—a spreadsheet with all of your content, its location in the site, its current reading level, and perhaps related SEO information. Then, based on your brand and audience needs, decide what reading level you want your content to target. For context, the average American adult reads at a ninth-grade level; American newspapers are written around an eleventh-grade level (http://bkaprt.com/ccd/06-27/). Go through and edit your content on pages with a score that’s too high; then run it through the test again until you are satisfied.

Standardize microcopy

Good interface content is close to a fine art, and one that is tied closely to your brand personality and identity. It’s also content that can trip up your ESL site visitors.

While there are some well-known commands (like “Search”) that I always recommend placing in common spots with recognizable icons, other microcopy, like “Upload image from computer,” might be confusing for non-native speakers. Regardless of their goals online, our responsibility is to provide ESL visitors with simple, standardized commands that are contextual, easily understood, and memorable.

Aligning your microcopy’s readability level with second-language speakers’ reading comprehension level is something you can do now—you don’t need to wait until the future when you have the time and money for a complete overhaul of your digital experience. The benefit, of course, is that these steps will almost certainly help all of your users, whether they are native speakers or not.

A Solid Foundation

We have looked at the many different ways you can create effective, localized digital experiences for a cross-cultural audience. It’s good to dig into those details. Don’t let it overwhelm you or start to feel like a chore. Talking through these particulars now is a great way for you to get a better handle on how people negotiate different cultural environments online.

With careful planning and research, we can make elements like type, code, and icons all work effectively together, giving your audience a unique and authentic view of the web they inhabit.

Conclusion

We’ve reached the end—amazing! I know this book was full of anecdotes—about research, images, stories, and methodology. My aim as I wrote this was to empower you, to give you the information you need to tackle cross-cultural design projects, and ultimately to tell your own stories.

The web is broad and strange, and it allows for more flexibility than we give it credit for. It’s in our power to use that inherent flexibility to illuminate and highlight the cultural diversity of our planet through our user research, our personas, and our design systems.

I hope that within these pages, you have gained a clear and accessible methodology for how to design across our myriad human cultures. Making the web a richer experience for us all, regardless of language, location, or identity, should be our operating principle. Designers, developers, and strategists of all stripes have a great opportunity to lead this charge.

This book is a call to action, a plea to continue the hard work of making the web a more culturally diverse and inclusive place. The stakes could not be higher. The computational linguist András Kornai, in his paper “Digital Language Death,” figured that only about five percent of languages will ever achieve active use on the internet (http://bkaprt.com/ccd/07-01/). Mark Davis, the president of Unicode, estimated that ninety-eight percent of languages are digitally disadvantaged, meaning they are not supported by operating systems, devices, browsers, or apps (http://bkaprt.com/ccd/07-02/).

The role of our interfaces is to mediate culture, to help us negotiate the intricacies of human communication. But how can we do that, honestly, when only a small percentage of the languages and cultures on our small blue marble will ever make it online? Unless web practitioners build flexible, culturally responsive systems for all of us to use, many humans will never be able to participate fully in the promise and astonishing complexity of the web.

Our goal should be to make cross-cultural digital experiences fulfilling, adapting our design choices to our audiences, however big or small their needs are. It’s not an easy task, but it is necessary.

As you put this book down and move on to your work, remember this: when it comes to culturally responsive design, understanding the choices in front of you means nothing if they aren’t applied in a holistic way. Have empathy and understanding for how complicated things are today online. Give people a bit of extra help where you can. Create ways for all of us to participate, to let our cultural uniqueness shine through. Our duty is to craft experiences for the web that empower our audiences to navigate and negotiate meaning within their societies. That’s power we can wield.

Acknowledgments

Writing a book is never a solo affair. First off, a huge thank you to the ABA team. A huge thanks to Katel LeDû for believing in this book, even when it was just a messy pile of ideas. To Lisa Maria Marquis, for her editorial guidance and honesty (“This is a great start!”), and for staying positive under the weight of all the terrible puns. You took that messy pile of ideas, helped me glue them together, and this is the result. I’m forever grateful.

A number of people who care about this topic kindly offered their advice, and they deserve a huge thank you. Shoutout to Mustafa Kurtuldu and Chappell Ellison for reading my manuscript and offering valuable feedback. Shoutout to Bijan Aryana, Manako Tamura, Tom Illmensee, Daniel G. Cabrero, and Seiko Itakura, for speaking with me during the early research for the book. Shoutout to Ethan Marcotte, for making the introductions that kicked everything off.

Shoutout to all of the people who have supported my design work, my impossible ideas, and occasional flashes of competence: Brian LaRossa, Tim Moore, Pam Green, Derrick Schultz, Amber Butler-Hayes, Rodrigo Sanchez, Raafi Rivero, Maurice Cherry, Able Parris, Lexie Phipps. Shoutout to Denise Jacobs—you helped me get that first speaking gig in New York back in 2012, which, funnily enough, was about cross-cultural design! Big ups to all the fam at the NSS, who constantly push each other to be better writers and to dream. I owe you all. Shoutout to the Constructive crew, for creating things that matter.

My parents deserve a book of their own—for now, this will have to do. They were a force of nature. Mom grew up the child of migrants/immigrants on an orange farm in Central California, became an anesthesiologist, moved to Nigeria, learned Tiv, circumnavigated the globe, married a cute Nigerian pastor, started a hospital with him, raised three creative bookworms, worked at the Benue Leprosy Settlement, started the first occupational rehabilitation practice in Nigeria, beat cancer, and became an artist in Michigan. Dad grew up in a village in central Nigeria, ran away from home to go to the white missionary school, learned English, became a pastor, married a cute American nurse, started a hospital with her, raised three inquisitive kids, became a doctor, ran a seminary, ran a hospital, started an orange farm, wrote a few books, mentored a few generations of pastors, moved around the world a few times…should I go on? I can never live up to their legacy, but I can surely honor that love of travel, discovery, and culture.

To my big sisters—Denenge and Tindi—thank you for encouraging and sustaining my creativity, and for your constant love and support. Shoutout to Dele, my brother and oldest friend. We’ve come a long way. Holla!

Kaori—you are my heart and soul, the center of my world. You have always believed in me, even when there was no evidence that I could actually complete this (or any of my million other projects). I finally did it! Yuma—you fill my world with magic and wonderment. It is a joy to be there as you grow. Daddy loves you so much.

Finally, a huge shoutout to everyone who suffers through my terrible puns. In your honor, here is one of my favorites: A group of termites marches into a saloon. One of them asks: “Is the bar tender here?”

Resources

Research

  • Politics of Design, Ruben Pater. A detailed little book examining the politics and culture in our design choices (http://bkaprt.com/ccd/08-01/).
  • Design Research, Methods and Perspectives, edited by Brenda Laurel. An invaluable collection of essays about design research, methods, and theories (http://bkaprt.com/ccd/01-11/).
  • Just Enough Research, Erika Hall. Classic ABA book on conducting research, suitable for the modern web professional (http://bkaprt.com/ccd/08-02/).
  • Innovative Solutions: What Designers Need to Know for Today’s Emerging Markets, Apala Lahiri Chavan and Girish V. Prabhu. Book examining the opportunities and challenges for creative practitioners in emerging markets (http://bkaprt.com/ccd/08-03/).
  • “UX Design Across Different Cultures,” Jenny Shen. Some tips and tricks the author learned from designing for various cultures, through the lens of Hofstede’s dimensions (http://bkaprt.com/ccd/01-33/).
  • “When Africa Meets Design,” Cécile Johanet and Jérémie Fesson. An exploration of design and typography native to the continent of Africa (http://bkaprt.com/ccd/08-04/).
  • ResearchGate. A huge online community of researchers and academics, where you can find studies and analyses on a wide variety of topics and from a wide variety of countries (http://bkaprt.com/ccd/02-03/).
  • International Users, NN Group. Articles and user experience research on designing for the “international” (a.k.a. not WEIRD) user (http://bkaprt.com/ccd/08-05/).

Design systems

  • Bi-Scriptual, Ben Wittner, Sascha Thoma, and Timm Hartmann. A detailed and comprehensive book that discusses “sociocultural premises, technical requirements as well as practical considerations” of multiscript systems (http://bkaprt.com/ccd/05-09/).
  • “More Chinese Mobile UI Trends,” Dan Grover. A series of posts on Chinese mobile app interfaces, written from a Westerner’s perspective (http://bkaprt.com/ccd/08-06/).
  • “Optimizing UI Icons for Faster Recognition,” Alla Kholmatova. A primer on ensuring icons are recognizable and differentiated (http://bkaprt.com/ccd/08-07/).
  • “Connecting Scripts: Building Bridges between Latin and Hangul,” Minjoo Ham. A talk about multiscript typographic systems (http://bkaprt.com/ccd/08-08/).
  • “Tencent: Bringing Helsinki Closer for Chinese Visitors with a WeChat Mini Program,” Idean. Using WeChat to make make life easier for Chinese visitors in Helsinki (http://bkaprt.com/ccd/08-09/).
  • “Going Global,” Dara Oke. A talk about making technology accessible to new internet users from developing nations (http://bkaprt.com/ccd/08-10/, video).
  • AIGA Eye on Design. Blog with digestible articles covering the world’s most exciting designers and design issues (http://bkaprt.com/ccd/08-11/).

Language and culture

  • “The Emerging Global Web,” Stephanie Reuter. I thoroughly enjoyed this presentation at FOWD London in 2014, about what the web is becoming (http://bkaprt.com/ccd/08-12/).
  • “World Wide Web, Not Wealthy Western Web,” Bruce Lawson. Data on the global web, and what it means for the design industry (http://bkaprt.com/ccd/08-13/).
  • “Cross-Cultural Survey Guidelines.” Best practices for conducting multinational, multicultural, or multiregional surveys (http://bkaprt.com/ccd/08-14/).
  • “Diversity Style Guide.” A style guide from CalState, addressing common questions that come up when people create or modify content that is about and/or speaks to particular groups of people (http://bkaprt.com/ccd/08-15/).
  • “How Your Language Reflects the Senses You Use,” Sophie Hardach, BBC. Cultural factors in senses, perception, and language (http://bkaprt.com/ccd/08-16/).

Localization and internationalization

  • “Designing for the Arab User,” Anna Rubkiewicz. A writeup of UX considerations for Arabic-language interfaces (http://bkaprt.com/ccd/08-17/).
  • “Design for Internationalization,” John Saito. A writeup of how to avoid localization pitfalls, based on what the Dropbox team found as they rolled out their tools globally (http://bkaprt.com/ccd/08-18/).
  • “Tips for Multilingual Website Accessibility,” Emily Coward. Seven tips and techniques on handling accessibility in localized websites (http://bkaprt.com/ccd/08-19/).
  • “Building a Better Checkout,” Opemipo Aikomo. A case study examining the tweaks Paystack made to localize their point-of-sale checkout UI for the Nigerian market (http://bkaprt.com/ccd/08-20/).
  • “lang Attribute Reference.” Mozilla Developer network’s reference of the lang attribute and how it is used (http://bkaprt.com/ccd/08-21/).

Tools

  • Product Reaction Cards. A technique for assessing user satisfaction, using cards printed with adjectives, such as simplistic, essential, intimidating, dull, and so on (http://bkaprt.com/ccd/08-22/).
  • Probe Tools. A place to get premade and DIY tools for your culture probes (http://bkaprt.com/ccd/04-02/).
  • D-place: Database of Places, Language, Culture and Environment (http://bkaprt.com/ccd/08-23/).
  • Dovetail. A wonderful tool for gathering, storing, and analyzing user research data (http://bkaprt.com/ccd/04-04/).
  • POEdit. Interface translation software (http://bkaprt.com/ccd/08-24/).
  • Automatic Persona Generation. A system for automatic creation of personas from online analytics data. Caveat emptor (http://bkaprt.com/ccd/08-25/).
  • Diverse UI. A set of diverse user avatars for use in personal and commercial projects (http://bkaprt.com/ccd/08-26/).

References

Shortened URLs are numbered sequentially; the related long URLs are listed below for reference.

Introduction

00-01 https://www.reuters.com/article/us-health-professions-us-noncitizens/u-s-relies-heavily-on-foreign-born-healthcare-workers-idUSKBN1O32FR

Chapter 1

01-01 https://www.raponline.org/where-we-work/

01-02 https://www.researchgate.net/publication/260272721_Cross-Cultural_Technology_Design_Creating_Culture-Sensitive_Technology_for_Local_Users

01-03 https://www.pewinternet.org/2019/03/07/mobile-connectivity-in-emerging-economies/

01-04 https://datareportal.com/reports/digital-2019-q3-global-digital-statshot

01-05 http://documents.worldbank.org/curated/en/961621467994698644/pdf/102724-WDR-WDR2016Overview-ENGLISH-WebResBox-394840B-OUO-9.pdf

01-06 http://www.worldbank.org/en/publication/wdr2016

01-07 https://www.speedtest.net/insights/blog/global-index-2019-internet-report/

01-08 https://www.slideshare.net/yiibu/the-emerging-global-web/57-This_is_creating_a_new

01-09 https://www.economist.com/business/2013/02/16/the-next-frontier

01-10 http://nautil.us/issue/73/play/wechat-is-watching

01-11 https://mitpress.mit.edu/books/design-research

01-12 https://technology.blog.gov.uk/2019/08/12/what-hm-land-registry-learned-building-its-first-register-in-90-years/

01-13 http://www.paper.edu.cn/scholar/showpdf/MUj2EN2IMTj0AxeQh

01-14 https://www.researchgate.net/publication/273820007_Users’_participation_in_requirements_gathering_for_smart_phones_applications_in_emerging_markets

01-15 https://www.hofstede-insights.com/country/turkey/

01-16 https://www.nytimes.com/2019/02/04/t-magazine/bauhaus-school-architecture-history.html

01-17 https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4168683/

01-18 https://www.researchgate.net/publication/4358650_Identifying_Cultural_Markers_for_Web_Application_Design_Targeted_to_a_Multi-cultural_Audience

01-19 https://www.degruyter.com/downloadpdf/j/joim.2014.6.issue-1/joim-2014-0001/joim-2014-0001.pdf

01-20 https://www.pbs.org/race/000_About/002_04-experts-03-02.htm

01-21 https://www.vox.com/2015/4/24/8483561/transgender-gender-identity-expression

01-22 https://alistapart.com/article/trans-inclusive-design/

01-23 http://www.bbc.com/capital/story/20170614-the-new-subtle-ways-the-rich-signal-their-wealth

01-24 https://research.collegeboard.org/pdf/trends-college-pricing-2018-full-report.pdf

01-25 https://books.google.com/books?id=4tC7FKi6nsIC&lpg=PP1&pg=PP5#v=onepage&q=%22digital%20bedroom%22&f=false

01-26 https://www.jstor.org/stable/j.ctt24h9xd.10

01-27 https://growthlab.com/convertkit-founder-nathan-barry-on-undoing-a-rebrand/

01-28 https://convertkit.com/staying-convertkit/

01-29 https://medium.com/@ajls/on-you-networks-subjectivity-and-algorithmic-identity-e1cef8af8e31

01-30 https://mitpress.mit.edu/books/digital-dead-end

01-31 https://www.hofstede-insights.com/models/national-culture/

01-32 https://community.babycenter.com/post/a32606103/what_do_these_abbreviations_mean_dd_ds_lo...

01-33 https://blog.prototypr.io/ux-design-across-different-cultures-part-1-1caa12a504c0

01-34 https://www.politicsanddesign.com/

01-35 https://www.researchgate.net/publication/319416545

01-36 https://www.researchgate.net/publication/260272721_Cross-Cultural_Technology_Design_Creating_Culture-Sensitive_Technology_for_Local_Users

01-37 https://researchonline.jcu.edu.au/11682/2/02whole.pdf

01-38 https://twitter.com/Creepingbear/status/521853766803673088

01-39 https://www.immi.se/intercultural/nr43/jensen.html

Chapter 2

02-01 https://www.bostonglobe.com/business/2013/10/03/cheap-razor-made-after-watches-indians-shave/NSQpOGAotpEfarkNmxIfcK/story.html

02-02 https://untappedcities.com/2014/03/04/nycs-micro-neighborhoods-little-india-in-jackson-heights-queens/

02-03 https://www.researchgate.net

02-04 https://techcabal.com/category/tc-daily/

02-05 http://tinyletter.com/othervalleys

02-06 https://mitpress.mit.edu/books/design-research

02-07 http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html

Chapter 3

03-01 http://uxdiogenes.com/blog/the-digital-designer-of-the-future

03-02 https://commons.lib.jmu.edu/master201019/123/

03-03 https://hbr.org/2004/10/cultural-intelligence

03-04 https://pdfs.semanticscholar.org/f3b5/dd75dc6c909029e7266607d9b2fdc9ef3f83.pdf

03-05 http://www.pliant.org/personal/Tom_Erickson/Stories.html

03-06 https://www.nytimes.com/2011/02/20/business/20ignite.html

03-07 http://welcometocup.org/

03-08 http://www.blackwomensblueprint.org/

03-09 http://welcometocup.org/Projects/MakingPolicyPublic/ItsNotJustPersonal

03-10 https://www.grab.com

03-11 https://www.ricetseng.com/grabredesign

03-12 https://solutions.digitalgreen.org/videos/library

03-13 https://www.alliancemagazine.org/feature/digital-green-video-based-learning-within-rural-networks/

03-14 https://www.mitpressjournals.org/doi/pdf/10.1162/inov_a_00216

Chapter 4

04-01 http://interactions.acm.org/archive/view/jan.-feb.-1999/design-cultural-probes1

04-02 https://probetools.net/probes

04-03 https://medium.com/@catherinelegros/designing-cultural-probes-31f2c62b9dcf

04-04 https://dovetailapp.com

04-05 https://www.academia.edu/2449273/Cross_cultural_usability_testing

04-06 http://www.humanfactors.com/newsletters/readability_formulas.asp

04-07 https://hal.inria.fr/hal-01371786/document

04-08 http://www.manakotamura.com/awkward-middle-place

04-09 https://www.researchgate.net/publication/298204882_A_UX_and_Usability_expression_of_Pastoral_OvaHimba_Personas_in_the_Making_and_Doing

04-10 http://www.jasontravisphoto.com/persona

04-11 http://kirwaninstitute.osu.edu/research/understanding-implicit-bias/

04-12 https://link.springer.com/content/pdf/10.1007%2F978-3-642-11762-6_7.pdf

04-13 https://web.archive.org/web/20170412120233/http://personas.dk//wp-content/TBD_NielsenL_Howdoesculturalknowledgeimpactpersonasperception.pdf

04-14 https://drive.google.com/file/d/1oMOyOjWSKiPJGCULqCcqm9G3PHZsuLpI/view

04-15 https://www.youtube.com/watch?v=eE80x0ses3w

04-16 https://www.interaction-design.org/literature/topics/personas

Chapter 5

05-01 https://www.linedandunlined.com/archive/new-black-face

05-02 https://www.myfonts.com/fonts/adobe/neuland/

05-03 https://www.good.is/articles/how-chop-suey-fonts-sell-a-fictional-china

05-04 https://www.fonts.com/font/linotype/mandarin/story

05-05 https://en.wikipedia.org/wiki/Websites_blocked_in_mainland_China

05-06 http://en.justfont.com

05-07 https://ko.surveymonkey.com/mp/take-a-tour/

05-08 https://www.surveymonkey.com/mp/take-a-tour/

05-09 http://www.niggli.ch/en/bi-scriptual.html

05-10 https://typesoftype.com/type-categories

05-11 http://typojanchi.org/2017/#!/theme/a_chronicle_of_writing_the_present_and_beyond

05-12 https://www.lightningdesignsystem.com/guidelines/localization/

05-13 https://sketchpacks.com/3raxton/ForeignIpsum

05-14 https://www.researchgate.net/publication/281841669_Graphic_Symbols-Design_And_Meaning

05-15 https://centreforgirlseducation.org/safe-space-videos

05-16 https://www.npr.org/sections/goatsandsoda/2019/02/18/685710243/can-you-guess-the-meaning-of-these-humanitarian-icons

05-17 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.1003.5148&rep=rep1&type=pdf

05-18 https://blogs.transparent.com/indonesian/colors-in-indonesian-culture/

05-19 https://coolors.co/

05-20 https://thecolorsofmotion.com/

05-21 https://tonl.co/

05-22 https://www.docplanner.com/about-us

Chapter 6

06-01 https://www-archive.mozilla.org/docs/reflist/i18n/

06-02 https://validator.w3.org/i18n-checker/

06-03 https://www-archive.mozilla.org/docs/reflist/i18n/

06-04 http://rizwanjavaid.com/blog/2016/2/4/multicultural-names-for-invisions-craft-plugin-sketch-photoshop

06-05 https://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design

06-06 https://en.wikipedia.org/wiki/Remittance

06-07 https://material.io/design/usability/bidirectionality.html#mirroring-layout

06-08 https://developer.microsoft.com/en-us/fabric#/styles/web/localization

06-09 http://moriel.smarterthanthat.com/tips/the-language-double-take-dealing-with-bidirectional-text-or-wait-tahw/

06-10 https://labs.spotify.com/2019/04/15/right-to-left-the-mirror-world/

06-11 https://codepen.io/Senongo/pen/xxxJOby

06-12 https://www.theguardian.com/education/2009/jan/16/rwanda-english-genocide

06-13 https://gengo.com/

06-14 https://mashable.com/2017/11/30/google-translate-sexism/

06-15 https://www.blog.google/products/translate/reducing-gender-bias-google-translate/

06-16 https://support.google.com/webmasters/answer/189077?hl=en

06-17 http://www.quaibranly.fr/en/

06-18 https://crimsonbridge.org/our-work/

06-19 https://www.girlsontherunofmoco.org/es/Inicio

06-20 https://en.wikipedia.org/wiki/Languages_used_on_the_Internet

06-21 https://www.statista.com/statistics/262946/share-of-the-most-common-languages-on-the-internet/

06-22 https://w3techs.com/technologies/overview/content_language/all

06-23 https://www.gov.uk/recruitment-disabled-people

06-24 http://www.readingmatrix.com/files/17-z2d49xa9.pdf

06-25 https://www.latimes.com/local/lanow/la-me-ab626-immigrants-reality-20190218-htmlstory.html

06-26 https://twitter.com/frankshyong/status/1097986781503516672?lang=en

06-27 https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests

06-28 https://www.researchgate.net/publication/308207526_Preaching_to_the_choir_An_analysis_of_newspaper_readability_vis-a-vis_public_literacy

Conclusion

07-01 https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0077056

07-02 http://blog.unicode.org/2015/12/unicode-launches-adopt-character.html

Resources

08-01 http://thepoliticsofdesign.com/about-the-book

08-02 https://mitpress.mit.edu/books/design-research

08-03 https://abookapart.com/products/just-enough-research

08-04 https://www.crcpress.com/Innovative-Solutions-What-Designers-Need-to-Know-for-Todays-Emerging-Markets/Chavan-Prabhu/p/book/9781138111776

08-05 https://blog.prototypr.io/ux-design-across-different-cultures-part-1-1caa12a504c0

08-06 https://www.grapheine.com/en/graphic-design-en/africa-design

08-07 https://www.researchgate.net/

08-08 https://www.nngroup.com/topic/international-users/

08-09 http://www.niggli.ch/en/bi-scriptual.html

08-10 http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html

08-11 http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition

08-12 https://www.typotalks.com/videos/connecting-scripts-building-bridges-between-latin-and-hangul/

08-13 https://www.idean.com/work/tencent-bringing-helsinki-closer-for-chinese-visitors-with-wechat

08-14 https://www.youtube.com/watch?time_continue=3&v=18liNRp86Jc&feature=emb_title

08-15 https://eyeondesign.aiga.org/

08-16 https://www.slideshare.net/yiibu/the-emerging-global-web

08-17 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/

08-18 http://ccsg.isr.umich.edu/

08-19 https://www2.calstate.edu/csu-system/csu-branding-standards/editorial-style-guide/Pages/diversity-style-guide.aspx

08-20 http://www.bbc.com/future/story/20190226-how-your-language-reflects-the-senses-you-use

08-21 https://medium.freecodecamp.org/designing-for-the-arab-user-basic-arabic-ux-for-business-6ff29d4c7c60

08-22 https://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f

08-23 https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility

08-24 https://increment.com/internationalization/paystack-building-a-better-checkout

08-25 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

08-26 http://www.uxforthemasses.com/product-reaction-cards/

08-27 https://probetools.net/home

08-28 https://d-place.org/

08-29 https://dovetailapp.com

08-30 https://poedit.net/

08-31 https://persona.qcri.org/

08-32 https://diverseui.com/

Index

A

age 23–25

algorithmic identity 26–27

Antetokounmpo, Giannis 20

Aryana, Bijan 13–14

B

Bauhaus 16

bias 81–88

Black Women’s Blueprint 63

Bond, Michael 37

Bram,Barclay 10

Brito, Diogenes 55

C

Caal, Dr. Selma 135

Cabrero, Daniel G. 77

Chan, Flora 63

Chavan, Apala 75

Chen, Abby 63

Cheney-Lippold, John 26

Choon, Yee-Yin 108

color 109–113

Colville-Hyde, Bonny 60

creative communities 48–49

Creepingbear, Shane 44

cross-cultural competence 56–58

cultural dimensions 26–43

cultural immersion 47–48

culturally flexible artifacts 87–89

cultural probes 70–73

culture

and aesthetics 16–18

and communication 11–12

and perception 13–16

D

Davis, Mark 146

Deasy, Dorothy 51

deficit-framing vs. asset-framing 86–87

design habits 58–67

directionality 125–129

Dunne, Tony 70

E

Earley, P. Christopher 56

Erickson, Tom 59

ethnicity 20

Eubanks, Virginia 26

expert input 49–50

F

Flesch-Kincaid Readability Test 143

formatting 120–125

G

Gaver, Bill 70

gender and roles 21–22

Giampietro, Rob 92

Gilbert, Dr. John 143

Goleman, Daniel 56

Gylfason, Tryggvi 129

H

Harvey, Francis 44

Hofstede, Geert 26–36, 43, 87

I

icons and symbols 101–109

intent vs. interpretation 105–107

making them work 107–109

roles and setup 102–105

identity factors 19–26

images and illustrations 113–117

individual identity 25

Individualism vs. Collectivism 29–31

Indulgence vs. Restraint 39–41

internationalization 118–119

J

Jeanne Clery Act 63

K

Kornai, András 146

Kurtuldu, Mustafa 125

Kwon, Jeongmin 96

L

localization 119, 135–137

Long-Term vs. Short-Term Orientation 37–40

M

Marquis, Mat 129

Masculinity vs. Femininity 31–33

Maslen, Tom 121

Mendonca, Hedvig 77

modern global audiences 7–10

multiple script systems 95–97

Mumtaz, Naureen 58

N

Nielsen, Lene 82

P

Pacenti, Elena 70

Pettersson, Rune 102

Power Distance 27–29

prioritizing flexibility 52–53

Q

questioning assumptions 50–51

R

race 19

Ramachandran, Anjali 49

religion 24–25

research methods 70–82

Bollywood technique 75–76

cultural probes 70–73

local facilitation 73–75

Walking Havana method 77–79

Reyes, Danielle M. 135

Rieger, Stephanie 10

S

Salvendy, Gavriel 108

Saval, Nikil 16

second-language speakers (design for) 138–145

Sefton-Green, Julia 24

Serota, Lauren 84

Shams, Alex 131

Shedroff, Nathan 11

Shen, Jenny 35

Shorters, Trabian 86

social class 21

stereotypography 92–94

Sun, Huatong 5, 43

T

Tamura, Manako 79

text expansion factors 99–101

the lazy brain 83–84

Title IX 63

translation 130–137

Travis, Jason 81

Tseng, Rice 64

typography 92–101

U

Uncertainty Avoidance 34–37

V

visual density 97–98

W

webfonts 94–95

WEIRD (Westernized, Educated, Industrialized, Rich, Developed) 1, 16, 24, 77, 87

White, Erin 21

Winschiers-Theophilus, Heike 77

About A Book Apart

We cover the emerging and essential topics in web design and development with style, clarity, and above all, brevity—because working designer-developers can’t afford to waste time.

Colophon

The text is set in FF Yoga and its companion, FF Yoga Sans, both by Xavier Dupré. Headlines and cover are set in Titling Gothic by David Berlow.

About the Author

Senongo Akpem is a designer, illustrator, and the founder of Pixel Fable, a collection of interactive Afrofuturist stories. For the past fifteen years, he has specialized in collaborating with clients across the world on flexible, impactful digital experiences. He is currently the Design Director at Constructive, a social impact design agency. Previously, he was art director at Cambridge University Press, where he led a global design team. 

The child of a Nigerian father and a Dutch-American mother, Senongo grew up in Nigeria, lived in Japan for almost a decade, and now calls New York City home. Living in constantly shifting cultural and physical spaces has given him unique insight into the influence of culture on communication and creativity.

Senongo speaks at conferences around the world about cross-cultural design, digital storytelling, and transmedia. He loves any and all science fiction.