Conde Nast
Design Localisation in Asia market
My Role
I led the product design of this project, including research, user interview, interface design, and validation
During this project, I joined as a solo product designer in a small multidisciplinary agile team. I collaborated closely with developers, the design system team, and the research team.
Context
In the past, every market developed its websites on its own. They use different fonts and layouts. You might find Vogue France look very different from Vogue Italia back then.
For consistency and many benefits, Conde Nast launched the design system on Vogue and GQ in 2017 across most Western European markets. The business intended to expand it to Asian markets including Japan, Taiwan, and China.
The Challenge
The existing design system did not work for Chinese and Japanese languages.
The existing design system was developed for the Western European languages and markets. We received critical feedback from the markets, especially on the typography and the typesetting.
​
Due to limited tech structures and the lack of maintenance resources, we could not commit custom design or type settings for every market. The project aimed to find one solution for all three markets.
Understand and discover
What is the problem ?
In order to localize the design to Asian markets, the first step was to find out what is the best type and typesetting for Japanese, Traditional Chinese (Taiwan), and Simplified Chinese (China).
Huge font file
A Western European font file usually is between 20 to 50KB which is small and the user won't even notice when loading. However, a Japanese font file could be more than 8MB and a Simplified Chinese font file could be more than double (12-16MB). Not to mention the file size of the Traditional Chinese. This will become a huge issue for page loading performance.
​​
Limited font alternatives & expensive cost
Due to the size of the font file, there are not many font options in Japanese and Chinese font. It is also quite expensive to purchase.
​​
After the above, I started to look into system fonts and aimed to create a font stack to cover different devices for all three markets and both brands.
Type analysis
Analyse the existing sites, competitors' sites and the typography and typesetting they used
I started by digging out what font stacks they were using from the existing sites (locally developed). Also started conversations with local markets to collect their feedback and thoughts. It turned out that the Taiwan market mostly used system fonts and only got one custom font (Noto) for GQ. Japan market used 3 custom fonts and it was loading slowly when visiting the site. China market used the system font only but we also learned that they mainly use WeChat, and the site was outdated.
System font audit
All system font alternatives for OS, Windows, iOS and Android
I've also spoken with the data team to collect the figures for the user environments. This helped me to make the order when creating the font stack.
Interview with native speakers
According to the audit, I've quickly mocked up a selection of fonts in the article headline and summary for both Vogue and GQ. The font not only should be natural for user to read but also need to represent the brand. This interview could filter and narrow down the font options to move on to the next stage.
​Participants
-
2 native speakers for each market - 6 in total
-
at least one of each group mainly read on mobile
-
All of them are royal audience
Key findings
SIMPLIFIED CHINESE
-
Both user prefer Sans Serif a lot more than Serif font - They think Serif font is very old fashion
-
Users do not mind when you have Serif English with Sans Serif Chinese
JAPANESE
-
User prefer smaller fonts overall
-
Both user noticed the size/space between Kanji (Chinese character in Japanese) and other word is not natural
-
User mentioned that one of brand font (Sans-serif font) looks broken in number
-
Both mentioned that the word-break was wrong in mockup
TRADITIONAL CHINESE
-
User think the Serif font for the headline is classic and work well with the brand font
-
Both mentioned PMingLiU (the default font of Windows) give them a negative feeling
-
Both mentioned the line height could be looser
WHAT IN COMMON
-
Reading from left to right
-
No italic across all three markets
-
Both Japanese and Taiwan users preferred English in the menu and some buttons, it makes the brand more premium
-
Underline treatment may affect the line heigh
The solution
1. A font stack for each market, device and brand
Based on the user interview findings, I listed out the following fonts for each device and created a font stack.
From the research, I also learned that audiences in China only use WeChat to consume content and the market had no resources to maintain the website. So the market was removed from the delivery.
2. Iterating the UI components
Based on the user interview findings, I've iterated the designs on various components to meet the user and market.
ALIGNMENT
Centred alignment changed to left alignment
NO ITALIC
SANS-SERIF FOR BODY
Use Sans-serif fonts for Body section due to legibility
UNDERLINE TREATMENT
Due to the limited tech structure, we were not able to deliver the different line heights. Instead, we changed underlining to colour treatment
Validate the design
Online survey
The method I took here was an online survey, so users can act in their normal way to consume the content and take the survey afterward. I've worked with the data team to access their brand communities in Japan and Taiwan.
​​
The survey aimed to find out how users feel about the new design and how easy and natural to read.
Vogue Taiwan
88%
users feel neutral/somewhat like/like a lot the new design
Vogue Taiwan
94%
users feel neutral/somewhat easy/very easy to read overall
Vogue Japan
70%
users feel neutral/somewhat like/like a lot the new design
Vogue Japan
60%
users feel neutral/somewhat easy/very easy to read overall
GQ Japan
75%
users feel neutral/somewhat like/like a lot the new design
GQ Japan
56%
users feel neutral/somewhat easy/very easy to read overall
Overall positive feedback
The feedback from the Taiwan market was extremely positive. However, we can see the number of Japanese users is slightly lower. This is also within the expectation as Japanese audiences prefer smaller fonts in general. Unfortunately, how design components were built into the system, the font size and line-height setting cannot be customized.
​
The localized design system was launched in Taiwan and Japan in 2019.
