Unlearn Our Design Behaviours

at UXDX Community: Nordics. Video: https://youtu.be/_R_IRtglle0

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

Introduction

[00:00:00] Hi, my name is Paya[?] and I am currently a product designer at H&M Group here in Stockholm, Sweden. I want to thank the friends of UXDX for giving me this opportunity to share this talk today. My talk will be about designing for different cultures, Japanese in particular, and unlearning our design behaviors to make a better product.

[00:00:26] A little bit about myself. I am half Vietnamese, half American. My family is based in both Saigon, Vietnam, and San Francisco, US. I have also lived in Singapore and Japan, and I just moved to Stockholm, Sweden, last year in October, hence the hello world in four different languages. I was always a very confused kid when I was younger because of my identity.

[00:00:57] I did not study design. I was actually a political science student, supposed to go to law school, but I started as a graphic designer ten years ago in Tokyo, and since then I have worked with several companies including Raven[?], Diesel, Migrant Course[?], Amazon Japan, and the biggest e-commerce C2C peer-to-peer marketplace in Japan. So most of my experiences are around e-commerce and payment.

[00:01:28] On a more personal note, I am an ambivert, I'm 60% introvert I would say. I love music, I love collecting vinyl, and I love nature, mountains, I love hiking, and also I love impulsive adventure, like the skydiving photo you see here. And I'm really into Buddhist teaching and meditation.

Tokyo and Stockholm

[00:01:54] Let's just start. Here is a photo of Tokyo, Japan. Sorry, 37 million residents, super populated, very dense, a lot of visual noise here as you can see in the photo. But this is where I worked in Tokyo, from the office. And not much green I would say, not much white space.

[00:02:17] And here is Stockholm. Different but also beautiful. This looks like we can actually navigate in Stockholm a little better. You see the road and you know where to go. And this is going to bring us to the first insight that I want to share with you: the cultural and social aspects of Japan and Sweden.

Muji, wabi-sabi and lagom

[00:02:44] This is Muji, one of their promotional images. Muji in Japanese means no brand, unbranded. Muji's design philosophy is always about minimalism, and they're trying to reduce their production waste. I read a book about Muji back in the days, and their products try to embrace the emptiness concept instead of minimalism.

[00:03:20] This is connected to a popular Japanese concept called wabi-sabi. It means imperfection in Japanese. A lot of these kinds of design principles and some of the Japanese design inventions in the 60s, such as the Japanese bento box or the Japanese soy sauce bottle, the bullet train, they all value functionality and the belief in tangible things that can shape a better design.

[00:03:53] Let's get back to Stockholm for a minute. I want to share with you this experiment from Volkswagen. They installed some fun activities in Odenplan station.

[00:04:51] The purpose of this experiment is to motivate the citizens to use the staircase more instead of using the escalator. And I want to talk about the concept of lagom, which in Swedish means not too much, not too little, just right, and also the concept of constructivism and functionalism. Here you can see from the experiment that Volkswagen wants to tell us that fun can obviously change behavior for the better.

[00:05:28] In the 1930s, I believe, a lot of famous Swedish or Scandinavian design inventions, it's called the golden age of Scandinavian design actually, their work is inspired by the concept of constructivism and functionalism. This has shaped even the current design trends or concepts in a lot of these digital products, and Scandinavian design.

Visual noise and progressive disclosure in Japan

[00:06:02] And then we're back in Tokyo again. Not much white space. Here's the busy street of Shibuya. A lot of visual noise, high contrast and bold color schemes all over the street. If you have been to Tokyo or Japan, we often come across these kinds of infrastructure details that have a lot of typography that takes up negative space.

[00:06:34] But actually Japanese people, or travelers, reading these signs still can know where to go and which direction to follow. The more you walk, the more relevant information is going to be presented to you. In major transportation hubs or airports the information is usually very clear, color-coded and simplified, without overloading a user with too much information. I know the typography can be painful for non-Japanese people to read.

[00:07:12] However, I would love to introduce to you the concept of progressive disclosure. According to the Interaction Design Foundation, progressive disclosure is an interaction design pattern that sequences information and actions across several screens. For example, we have an onboarding screen showing the users step-by-step guidance on how to sign up, how to use the app. The purpose of this interaction is to lower the chances that users will feel overwhelmed by what they encounter. It took me a while to understand this concept.

[00:07:54] And also Japan is a heavily instructed society. This is actually very fun for me to read all the time. It tells me a lot about the area that I'm at. So many big design companies in Tokyo or Japan, they usually take on a lot of big public design projects.

[00:08:24] One important takeaway from these kinds of observations for me is that Japanese people are used to consuming a lot of information without negative space, and they are tolerant of a heavy amount of information and visuality as well.

[00:08:43] Here's an example of a Stockholm train station. Empty, very appropriate in this climate. I haven't used the train a lot since I moved here, actually. And this is Tokyo: a lot of navigational aids. I can translate this to you. Oh, it has some English text, sorry. This is where to board for the women-only car, and different kinds of manners that you should follow inside the train. And even the floor, the yellow tiles here are a different material than the rest of the floor. I believe this is useful for Japanese, or anyone, with visual impairments or blindness.

Layout and typography in Asian markets

[00:09:34] Let's talk about layout and typography. This took me years to learn. Here is a Japanese poster for the biggest Japanese department store in Tokyo, Picariere[?]. I think it's beautiful, but some people can say that, oh, not much white space, what is it all about, I don't know where or what to read.

[00:09:58] The typography in a lot of Asian markets, Japan, China, Korea, is tricky, because with these characters we don't have a lot of lowercase and uppercase, italic fonts are not recommended, and there's no space between different characters. And also Japanese websites, which I'm going to show you later, use obnoxious amounts of text. So it's really important for me to know how to make a good layout, and how to use both colors and images in order to group things into one element, to differentiate and prioritize content. I still think this is a beautiful poster.

[00:10:46] Here is another example of the typical layouts that we use in the Japanese market. Here is a poster about how, or how not, to behave inside a Japanese train. The problematic guy here has blonde hair, which I'm not a fan of. I don't know who designed this poster, but it's not appropriate in the situation that we're living in today.

[00:11:20] However, if you want to look for information, or how to search on the web, usually people don't know how to if we're not Japanese, but Japanese people are going to look for this box here. There's a search bar with the exact keyword that you need to input in order to search for the relevant information. I believe this practice is dated way back into the 2000s, where a lot of Asian consumers, when we used the flip phone, the Samsung, Motorola flip phone, this is very similar to the browsers back in the days. Yahoo Japan is actually still a popular search engine even now in Japan, so this is some fun fact.

Localizing the visual language: Spotify in Japan

[00:12:13] And now we're back in Sweden. This is Spotify. I believe Spotify has a beautiful design language, and their design system I believe is very well taken care of. So last year, 2020, in June, they introduced their improved design principles, and one of the principles is unified. From the website: everything we design looks and feels Spotify, and we aim for coherence across products. We start by reusing rather than reinventing. Reusing is a tricky keyword here. We want our experiences to reuse and adapt for consistency. Nobody should be reinventing the wheel.

[00:13:05] In 2016, 2017, when Spotify first arrived in Japan, this was one of the first posters that I saw from Spotify in Tokyo: konnichiwa Japan. I think it's beautiful. Sometimes you don't need to use Japanese text to communicate with Japanese users. I love this design.

[00:13:31] However, the website started to have some weird communication designs. For example, the text here, if it stands alone, it doesn't have any meaning, and there's some incorrect way of spacing between special characters here. And there are different kinds of fonts all over the place here, bold fonts and really thin fonts, and the text here, I believe in several browsers like Internet Explorer or Safari, this text is going to be almost unreadable.

[00:14:12] This is a lot for me to talk about, but I believe when you localize your product into different markets, it is important to localize the visual language as well, together with the language itself. In the eyes of customers in Europe, or in this Nordic region, some of the Asian designs, like Chinese, Korean, Japanese design, can be seen as bad and cluttered and not pleasing on the eyes.

[00:14:50] I see this as not a bad design, it's just a design that we are not used to and we have the least context of. And I cannot deny, no one can deny, that we're still living in a world of heavily Eurocentric design. So I think when working with a design system, if you're working with a global product, it's important to have localization guidelines for your design as well. And I know it takes a lot of effort, but I assure you it's going to be so worth it in the end. Context is everything is another takeaway here.

Scandinavian design and negative space

[00:15:34] However, I still have a great love for Scandinavian design, and one of my favorite principles is functionality over form. Here's the example of Teenage Engineering, very famous beat makers or music products. Their website is really, really beautiful. There's no line to divide between different content, they just use white space or negative space, and the white space here is to accommodate the functionalities of different components. I still think this is the perfect example of how to use negative space and a good representation of Scandinavian design.

Case study: Uniqlo and H&M e-commerce journeys

[00:16:23] We're getting more onto the case studies here. Let's start with some of the e-commerce customer journeys. First we have the Japanese Uniqlo e-commerce website. I worked with them for some time, for six months, when I was a freelance consultant. They have many other brands in Japan, but this is very typical for a Japanese e-commerce website. The top half of the website is usually all navigation. Quite strange, but let me walk you through the navigation here.

[00:17:02] We have the top bar, the header, universal navigation, whatever you can call it. We have women, men, kids, baby, very straightforward. We have the search bar with some examples of the keywords that you should use. This is actually, when you work with Japanese customers, a good example. And under this navigation we have another navigation. This has more context to it: we have new items, this week's special, limited edition items and discounted items. And we have the campaign information and promotional information here.

[00:17:46] The customer journey here, again this is for a Japanese customer, is that they're going to take time to read relevant information, understand the context of how to look for your wanted item, navigate to that category, go to the item detail and finally add to cart. The customer journey here makes more sense for the Japanese consumer, because again they are more tolerant of a heavy amount of information, and this has a more holistic approach and it can give the users more context: we have the latest information, latest items, limited edition items.

[00:18:28] In contrast, well, not in contrast but a little different, here is the H&M e-commerce website. Very straightforward navigation. The customer journey here is more simple: look for relevant information, navigate, go to the item detail and then decide to purchase. It has a more analytical design approach and it's focusing on the specific needs of different users, because there are all the categories here for you to choose, you don't have to look for it, you don't have to take time to look for it. In general, European or American customers want to use a little amount of time to find what they want, and therefore the navigation here is a perfect example of how to work with this behavior and this demand.

Case study: redesigning a marketplace support hub

[00:19:24] And a little bit more specific case study here. When I worked with that e-commerce marketplace product in Tokyo, I was assigned this task to redesign the FAQ, or the support hub, for the customers. The old design is, I don't know how, it's not bad again, it's just very simple, and there's little navigation. There's only one navigation. You go to the page and you try to scroll, as long as you have time, to look for the information, and there's no search experience whatsoever.

[00:20:13] So I started the task with laying out all of the relevant pages and I tried to divide them into different tiers here. And after understanding the concept of progressive disclosure and heavy instruction for Japanese society, I tried not to change the structure here at all. I think the biggest improvement, this is the redesign, is to add the search bar here. And I worked with the machine learning engineers in order to give a faster search experience, by adding the automatic keywords or the articles that might be relevant to what you want to search.

[00:21:06] This got a lot of good feedback, and we also reduced the amount of customer service workload, which was one of the pain points for this particular project. And also we took time to take care of the web design as well, which we didn't have, this web version, before, because in, let's say, the countryside of Japan, or a lot of stay-at-home moms in the Japanese market, some people still use the web, about 10% in this particular product. So yeah, taking care of the web is also very important I think. These are the customer journeys that I've learned in my years working in Tokyo.

Accessibility and inclusive design

[00:22:03] The last part is nothing crazy, there's no contrast whatsoever. I believe inclusive design, my effort in taking care of accessibility and inclusive design, hasn't changed whichever country I've moved to. This is close to my heart because my grandpa actually has some disabilities that prevent him from using his finger to navigate the smartphone.

[00:22:37] Some examples of Scandinavian web design are to have some functions to accommodate some of the disabilities or some of the visual impairments that our customers might have. This is from the H&M e-commerce web: we have this activate high contrast mode.

[00:23:02] And also back in the days, actually just a year ago, I was involved in a big project of user research and focus group study in suburban Tokyo and countryside Japan. We ran some interviews and we did some group study with senior Japanese users, and this was eye-opening for me in a lot of ways.

[00:23:34] I feel like both Japan and Sweden have seen a prominent focus in improving apps and websites for users of all ages and economies. Japan is an aging population, a lot of people. By 2020 internet users in Japan above the age of 60 had increased by 10 percent. And also in Sweden and many western countries we all share a major social challenge: increasing aging population and how to deal with healthy aging.

[00:24:07] So I think my effort in this area has strengthened more after moving to Stockholm. At H&M I was given a lot of opportunities to work with accessibility, and also to communicate more with our developers in order to improve accessibility and to include as many customers as we can.

Takeaways

[00:24:36] Again, I'm going to talk about a few takeaways from this talk. The ultimate design is a little different from a natural word: this is from my favorite Japanese industrial designer, Kenji Ekuan. Context is everything. The design, it can't be bad, it just can be of a culture that you are not used to. And empathy here is the tool that will help you understand who is right for your product and who is wrong for it.

[00:25:09] Customers are different, but most of our strategy, either design or product development, is always singular. I have worked in Tokyo in the past eight years and I often heard people talking about Japanese or Asian designs as bad, or mentioning too much text, too much images, no white space. The truth is we're still living in the world where we have gotten used to Eurocentric design, and also the workflow. And no personas can interpret the real customer in the real world.

[00:25:50] So we are designers and we love to use principles and make principles or guidelines and reuse them in different contexts and markets. To be honest, I feel like principles always create more work for us, and smart designers should study how these principles actually always make it hard to do good design and inclusive design, and we should make better ones. So in short, please promise me to unlearn our existing design behaviors and patterns and to listen more to our diverse users.

[00:26:32] Thank you for your time. There are many different and controversial ideas in my talk and I would love to hear your thoughts too, either agree or disagree, or to teach me more about things I haven't known. So please connect with me here or just give me an email, and I hope everyone stays safe and positive.