Clearly Cultural

[Slide Deck] Making Sense of Cross-Cultural Design for the US and East Asian Websites/Apps

Photo by Juliana Kozoski on Unsplash

Working as a designer in one of the largest tech companies in China, you’ll often find me say,
“Oh, western users are different.”
“In US they prefer clean and simple UI.”

But, let’s pause for a moment and ask ourselves, “What do we actually mean by these claims?”.

One of the major reasons why products fail is due to our misunderstandings of the end users’ culture and behavior. Being in China, and designing for users who live primarily outside of China is a challenging task. To overcome this, we as designers must acknowledge the nuances of cultural differences, users’ mental models, and their environment.

In this 1-hour semi-workshop style presentation we’ll discuss and rationalize how culture impacts the web/mobile designs for the US and East Asian websites/apps. Some findings are correlations and do not mean causality.

I won’t add a lot of information, however, if you need more insights on any of the slides, just comment & ask.

Also on Slideshare: https://www.slideshare.net/pratyushpandab1/culture-and-design

1. We as designers already know that Culture affects Design. But to what extent? And, how does culture affect design? We do not have any systematic understanding of this domain. Hence, today, we’ll embark on this journey to discover and make sense of the role culture plays in design.

2. But first, let’s play a game — Spot the Difference!

3. Take a few minutes and write down as many (design) differences you can find from the screens on the left vs the ones on the right. e.g. Colorfulness, Information Density, etc.

4. As designers, we already know about design! So let’s understand the meaning of ‘Culture’.

5. What is culture?

6. Now you have the basic understanding of both Culture and Design.

7. But how shall we systematically understand the role of Culture in Design? We’ll use a Grounded Theory approach. https://en.wikipedia.org/wiki/Grounded_theory. To understand Culture and Design, we’ll have their respective dimensions. We also collect a lot of screenshots from the US and East Asian websites/apps.

8. Cultural Dimensions

9. Cultural Dimensions and Website Dimensions. Please note that it is by no means an exhaustive list of various dimensions — just a subset that I considered.

10. And as I had mentioned, I collected a lot of screenshots from various sources. Please note that most of the screenshots were e-commerce related, as my current domain of expertise at Alibaba.com is e-commerce UX.

11. First cultural dimension.

12. Analytical Thinkers (primarily in the US) vs Holistic Thinkers (East Asian).

13. The bar graph represents the average number of information chunks (or Areas of Interest — AOIs) consumed by people in the first 25 seconds of visiting a website — from 3 different countries, viz. China, US, and S. Korea. Can you guess which bar corresponds to which country?

14. Here’s the answer. On average, US users consume ~28% less information compared to their Eastern counterparts. Let’s try another test.

15. The spider-graph shows the reading pattern on websites for users from China, US, and S. Korea. Could you identify which lines represent which country?

16. Here’s the answer. Users from the US prefer Sequential reading pattern with more focus on Navigation and Title. What can you learn from these 2 graphs? Do you have any similar experiences that you want to share?

17. Coming back to our screenshots from earlier in the presentation. Do you notice any similarities between the results (Information Consumption, Reading Pattern, Analytical vs Holistic Thinking) and the screenshots?

18. Let’s use the website dimensions ‘Information Density’ and ‘Background’ and plot it against Analytical (US) — Holistic (East). You can find a pattern. When designing for users from the West, try to limit yourself to the bottom-left quadrant. Let’s summarise the guidelines.

19. The guidelines are mostly rule of thumb. Analytical thinkers would prefer information with (i) No Background, (ii) Clear and Simple with logical categorization, etc.

20. One of the best examples is from Yahoo homepage. The left screenshot targets US users while the one on the right is from Yahoo Taiwan. The design takes into account the cultural aspects of the target users.

21. A nice quote!

22. Let’s play another game. We’ll try to make word pairs.

23. You have to make words pairs by choosing 2 words and the reason why you grouped them.

24–26. Word pairs, e.g. could be Carrot + Tomato (vegetables) or Carror + Rabbit (eats). Go ahead and try it out.

27. US users tend to group the words as shown on the left vs. East Asian (Chinese) users end up grouping as shown in the right. Did you find any similarities?

28. Now that you know how the US and Chinese users group information, how would you group the above if you were designing for US and East Asian users?

29. I hope you got it correct! (Slides 30–31 include confidential data, hence not shared.)

32. Next cultural dimension: Time-Limited (most western cultures) vs Time-Plentiful (eastern culture, typical to India). Time plentiful culture views time as a flowing river, if one part passes by, there is always more to replace it. Contrary to this belief, US or western culture sees time as water in a tumbler with a hole. They are always losing water (time). Once lost it’s lost forever.

33. Time perception in a given culture results in 2 interesting behaviors: (i) Intent vs Discovery and (ii) Cognitive vs Affective Trust.

34. Some screenshots: Google and Baidu Translate, Google and Baidu Search, Flight booking, etc.

35. A clear distinction between the websites approaches based on the users they target. Some outliers, such as Youtube which prioritizes Discovery over search intent.

36. Some guidelines. When designing for US users, try to prioritize ‘intention’ over ‘discovery’.

37. Next, let’s look at Cognitive and Affective Trust. Cognitive trust is the one that comes from the ‘head’, while Affective trust comes from the ‘heart’ — by knowing people in person and building a relationship.

38. If you were to place the US, China, UK, and Spain on this cognitive/affective trust-scale, where would you place them?

39. Here’s the answer. It takes time to build Affective trust. Hence cultures that are Time-Plentiful prefer to rely more on Affective trust. While, countries like US, UK, and other western countries, prefer facts and figures due to their time-limited cultural disposition.

40. An interesting finding: Have you noticed that on the US (and most western) beauty/skincare product websites the ingredients are mentioned and given visual priority. Facts! — Cognitive Trust.

41. Similar beauty products sites in China use celebrity promotion, images, and emotional information to build trust with their user base. Emotional! — Affective Trust.

42. You will also find Eastern websites and app using their owner/CEO as a way to promote products. The above photo shows the CEO of the company recommending products on the site. When was the last time you saw Bezos promoting deals on Amazon? (food for thought)

43. We also noticed some correlation between individualistic/collectivistic cultures and website colorfulness.

44. I needn’t explain the 2 cultures here. Kind of self-explanatory. Western culture tends towards individualism while Eastern culture is more collectivistic.

45.

46.

47.

48.

49. We find that more collectivistic cultures prefer more background color and vivid color-tones. While the individualistic cultures tend towards more muted websites and monotonously colored sites. (a correlation and not causation)

50. US users prefer a good balance of Image-to-Text ratio. While East Asian sites prefer a high Image-to-Text ratio. (a correlation and not causation)

51. Guidelines include using less intense colors when designing for western users and using large images with a nice balance with text information.

52.

53.

54.

55.

57. Hofstede Cultural Dimensions. https://www.hofstede-insights.com/product/compare-countries/

58. Hofstede Cultural Dimension scores and guidelines for Web/App designs. By using the Hofstede dimensions you can determine the score for a country. Using that you may following the guidelines mentioned above.

59. e.g. US and China

60. Typical web/app guidelines when designing for the US users.

61. Thanks.

Behind the scenes.

Before you go

Clap 👏 , if you enjoyed it, so others can find it
Comment 💬, if you have a question you’d like to ask or know more about
Follow me, to know the inside stories from Alibaba.com International Design Team

Design NDA Disclaimer
*To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information. All information presented is my own and does not necessarily reflect the views of the company.*