Engaging Designers to
Learn Bilingual Design
A case study spanning digital and physical mediums
Singapore has been a multilingual and multicultural country since it's Independence, and with a close relation with the China market, many local companies are seeking out to create bilingual brand identities to fit into both the local and international market.
However, designers and business owners in Singapore are not equipped with the capability to handle such changes. This project seeks to uncover the challenges of the market and provide a solution to tackle the issue.
This project was single-handlely run by me from the initiation to final testing. The project dives into the area of market research, user research, branding strategy, prototyping, and testing. Focusing on a digital solution, the project uses Sketch and Webflow heavily to conduct prototypinh and testing.
The Project Timeline
Due to the limitation of the submission requirements, a waterfall project management method was adopted. However, it is crucial to understand that the project was executed with iterations between each phase, allowing the timeline to overlap.
Research was conducted locally to identify the current situation of bilingual design. On the ground visits to locations, interviews with business owners and observations were involved to gather a cohesive result.
02: User Research
Research was conducted through interviews with local designers. Observations were also conducted to identify their behaviours and skills when it comes to bilingual design.
03: Solution & Planning
Dec 2018—Jan 2019
Sitemaps of the website were created in this process. The functionality and navigation of the website relies heavily on this process. See the final Wireflow here.
A total of 2 rounds of testings were conducted. MVPs were identified and tested with users from Singapore. Iterations of the wireframes were changed accordingly to the feedback received. Prototypes were created with Webflow to ensure full functionality.
The platform's branding, graphics, and tone of voice were set in this process. Identifying the right design is crucial to improve the user experience on the site.
The project ended with a soft launch, together with the LASALLE College of the Arts' annual showcase. Graduants' projects were placed and exhibited alongside with Typelingual. Testing and feedback was conducted and collected at the launch.
Singapore's Bilingual Design is Stagnant.
Over the course of the project, 110 brands were identified and analysed. Bilingual logotypes were broken down and sorted into categories. They were classified by their language and font type use and compared against each other.
Bilingual logotype are separated into two main categories —Singular and Complementary. The designs commonly seen in Singapore are "Complementary" and the designs are often contradictory to the functionality of it. In comparison to countries from the APAC region for their bilingual logotypes and brand design, not much improvement has been made since the 1950s.
Singular design refers to the same logotype being designed in two languages. However, each logotype will only be used alone in the designated region. The design of the logotypes are almost identical to maintain a consistency across the branding.
Coca-Cola designed their logotype in different languages for implementations in multiple countries.
Complementary design placed two languages in the same design. The emphasis of these logotypes are placed on the characteristics of the type. Using type of similar characteristics or details become a key to maintain a consistency across the branding.
Temporary Workshop is a design practice created by bilingual designer, Duan Zhi Hua.
How are bilingual logotypes being portrayed in Singapore?
Common Types of Font Pairing
Complementary design often resulted in designs that pair the English and Chinese font together. Font Pairing is the one of the ways to design a complementary bilingual logotype. It can be considered a fundamental for designers who do not have knowledge in bilingual logotype design nor capabilities to understand Chinese. Though there's no right or wrong, improvements and other methods can be explored.
Here, a general classification of the pairings were identified to understand the practices available in Singapore.
01—Sans Serif & Heiti
Recorded as 20% of the brands analysed, this combination is the easiest way to design. This combination is considered modern in Singapore and it is the safest approach with lesser room for errors, thus making it a popular choice for business owners and designers to choose them.
02—Serif & Calligraphy
This combination holds 18% of the total because of the popularity of Chinese calligraphy in Singapore. Restaurants and businesses rely heavily on Chinese calligraphy to portray a sense of traditionalism and stability to the consumers while using Serif as an embellishment.
03—Sans Serif & Calligraphy
Similar to Serif and Calligraphy, the popularity of this combination lies on Chinese calligraphy. English is often set in Sans-Serif or Serif to attract English speaking audiences in Singapore. They are normally not modified and may appear as a typed out word alongside the Chinese logotype.
04—Display & Calligraphy
This combination is the result of a designed logotype. Business owners take into consideration for various font styles that may be unique for each language. However, this combination can be risky in terms of visual harmony. In Singapore, these logotypes are deemed as "hipster" brands.
05—Sans-Serif & Chinese Display
Many Chinese characters are derived from iconography, thus designers often replace certain parts of the original font to make a custom display font. This is a common practice for Chinese brands and a basic Sans-Serif such as Helvetica will be used to serve as a functional tool.
06—Script & Calligraphy
This combination often places emphasis on the English language. With the popularity of brush script and handwritten calligraphy, modern brands are using them as logotype design. A common approach is to use Chinese calligraphy, which in this case might not work as well as expected.
Prioritisation of Languages
There are many ways to distinguish the priortisation of language in a bilingual logotype. Placing the first language on the left; at the top; at a larger size; are all indicators of the business' desire and the need to communicate the language. This decision can be based on the business' personal interest or the intended target audience they wish to reach out to.
In this research, the hierarchy is determined by the font size used and displayed in each logotype.
Over 60% of the brands placed Chinese language at the top priority in their logotype. However, most of the menu items or language used in the shop is in English.
The average scale of the English to Chinese font size is at 1:15. This makes the Chinese text almost illegible when it is applied at a smaller size.
Only 15% of the brands equally distributed the size of the English and Chinese font. In this situation, the hierarchy should be determined by the arrangement of the language.
What do designers think of bilingual design and how do they approach it?
Interviews & Insights
Interviews were conducted with local designers and practitioners from APAC. The designers interviewed provided concrete insights to the original assumptions while it also provided a fresh view on bilingual design in Singapore. The questions were set to achieve the four goals and confirm any assumptions that I have hypothesized through the background research.
To allow bilingual design to occur and hit the brief, there should be a need to understand the demand and availablity of such briefs set by the business owner. Questions set out should be quick to identify if the demand is there in Singapore or in APAC.
Identifying Designers Capability
Questions such as "What are your capabilities in designing for bilingual design?"; "How do you approach a bilingual design brief?" are some essential questions to identify the capability of local designers. Language capability can also be a factor to consider.
Troubles and Challenges
What troubles are they facing? Do they have enough resources to learn? What about their interest to learn? These questions set out to identify the challenges that they face if they encounter such briefss and what can they do to overcome the challenges.
LIMITED LEARNING RESOURCES
From digital to printed materials, there are no available written English resources for designers to learn about bilingual design. This is extended to Chinese typography and methods that are essential in the steps to create a bilingual logotype.
Current resources that are available are set in Chinese language and they are often hard to understand due to the limited language capability of designers.
ALMOST NON EXISTENCE DOCUMENTATION
Designers get confused over the approach to bilingual design and they do not have a formalise process to verify their design. This can be a major issue to their confidence as they present to their client or pitch for projects. Without proper terms and understanding of the making, these designers rely heavily on their instinct to determine what works and doesn't.
However, on the other side of Asia, designers from Hong Kong, Taiwan and China do have certain process to it. This however was not much recorded and practiced in Singapore.
DISORGANISED WORKING RESOURCES
While some designers have the attempt and opportunity to work on bilingual design, they often encounter issues finding the right font for the project. Unlike English font foundries, Chinese font foundries are limited and can be hard to find.
Designers without much knowledge and understanding of the Chinese, resorted to download fonts from sites that can be illegal. Else, they will stick to the fonts found in the computer.Thus, degrading what the project may initially set out to be.
Customer Journey Mapping
The problem of the users span across digital and physical mediums thus through Customer Journey Mapping, I can understand the customers' needs and pain points. It is reflective of the user's mindset, thoughts, and emotions. As it is chronological, it is appropiate to pinpoint specific customer journey touchpoints that cause pain or delight.
How might we enable bilingual design resources
to be accessible for English-speaking designers?
Chinese Typography Resources
Learning the fundamentals in Chinese typography will allow a better understanding of how the two languages will work with one another.
Bilingual Logotype Examples
Through analysing and understanding of existing work, a designer can benefit and derive his/her own way of approach.
Method of Design
Depending on feelings for design is not wrong, but a formalised process serves as a backup plan that a designer can refer to.
Chinese Font Directory
Gone are the days of browsing through shady websites to download Chinese fonts, this will be the curated list of fonts that designers can use across different projects.
The proposal is to come up with a digital web platform that encapsulates various functionalities into a single site. This will be a site that provides fundamental skills required to create a bilingual logotype. It will also be the first site internationally that supports the learning of Chinese typography in written English.
Gathering the various pages and laying them out helps to define the hierarchy of the pages. It further helps to define the Information Architect for the entire platform. This is crucial to provide a usable navigation for users to access the information they want.
Setting the Design Direction
In order to provide users with an idea of how Typelingual will look like, wireframes were drawn. The goal is to provide an idea of where the information should be placed. These further allows us to create our high fidelity mockup.
The design of the website layout took approximately a total of 1 month inclusive of feedbacks from various stakeholders such as designers, lecturers, and student designers.
The first phase of the designing begins with the wireframe. The design of the website was set with a split screen layout after consulting and observing the reading habits of designers when they are picking up new skills. Unlike reading an article which reads from top down, the arrangement of graphics and text to describe a topic needs to be thought through for the website.
Going through research on existing website formats, I decided to settle on a split screen website. This places the graphics and texts side by side, allowing the readers to understand what the text is describing or what the photo is showing, vice-versa. Through observing and interviewing of intended users, they also explain the habit of screen-switching to constantly switch between their working app and resources content. They will also split their screen manually into half to understand and watch the graphics at the same time.
Testing with Users
The wireframes were converted to hi-fidelity mockups to conduct testings. A focus group of 5 were presented with the prototypes to test out the functionalities and content presented. Feedback was collected and improved. The following are some parts of the screens that received more critical comments and required more testings.
Re-Establishing the Design
While maintaining the same design language, interactions, and content, the site was designed in the split page view. I generated a new set of wireframes which included new pages and the removal of the "Name Translation" pages. Understanding the feedback that users provided, the new wireframe is a lot easier to navigate and more functional for designers who are totally new to the web.
Minor changes were made to this section with the design staying in a modular grid. This establishes the same visual language as the rest of the website. This modular grid system also allows the design to work with the logotype (which may come in all shapes and sizes).
On hover, it reveals the designer and the project name. The inner pages which showcase the project in detail were also drawn out.
3.0 Type Foundations
Instead of the old design which splits the features into different styles, the foundations were further split into smaller topics. The page was also designed to be more organised, with each square containing a smaller topic. The inner pages can also link each of the smaller topics as they are co-related to the understanding of the Chinese type foundation.
After reviewing the methods of design, 3 methods of design were identified. Users can navigate through the sections by selecting the kind of methods they want to learn. They will be brought through a step-by-step design such that they will not be distracted by other content.
With a series of updated wireframes, it is essential to update the wireflow alongside it. This is crucial as the "Name Translation" page has also been taken out, thus simplifying part of the decision making process.
UI Design & Branding
Prior to executing the wireframes into mockups, a set of guidelines for the platform have been created. Typelingual sets out as a typography based website that aims to become the first platform for designers to learn typography. The typography on the web has to be set well to be pairable. Illustrations were omitted as well so that the focus will be on the typography and the examples.
I decided to combine a balance of contemporary sans-serif — Marr Sans; with a neo-grotesk sans-serif — Suisse Int'l. Marr Sans has a strong characteristic while Suisse Int'l balances out the tone to provide stability. The addition of Sweet Sans as the caption font further adds a sense of playfulness into the website, aiming to lighten the overall seriousness of the topic.
With lesser graphics or almost no drawn illustrations, the project takes on a variety of colors. Contrasting colours are the key in shaping the website's personality. It is used and applied throughout the website with the focus given to Orange-Red and Pink as the main and secondary colours.
As an educational website, the tone of voice for the website must be informative and less playful. To help build a better user experience, attention was given to the microcopy in many pages and functions.
The logotype for "Typelingual" is designed from Marr Sans. With focus on the font characteristics, the original type was modified to adapt an arrow at the end of each glyph. The arrow represents the future of bilingual logotype designs and the determination to be the first in the industry.
Similarly, the arrow was adopted in the Chinese logotype, allowing both the logotypes to share the same characteristics.
Understanding that the content of the web platform will be heavy and dry, simple motion graphics were designed and implemented to allow the user to visualise the content. These are applied in the Type Foundation section where imagery plays an important part in the type education.
Softlaunch x The LASALLE Show 19
Typelingual was officially launched on the 16 May 2019 in lieu with the LASALLE Show. After 8 months of research and iterations, the project was in the final phase of the development. Although it was launched, it was not fully completed with various bugs and browser responsiveness issues. However, the core functions of the platform were still in tact and browseable.
Here are some of the screens of the website and how it translated from the wireframes into the actual product.
Examples: More Varieties & Behind the Scenes
With contribution from practicing designers, this page provided users with an extensive collection of successful examples and analysed the process behind it.
Type Foundations: The Key to Bilingual Design
Understanding the basic foundation skills help to path the road for designers to further experiment and test out various kinds of bilingual combinations.
Methods: Decrypting the Hidden Practice
With a formalised method, designers can refer and use this as an explanation tool to discuss ideas with other designers and business owners.
Font Directory: Providing Legal and Best Font Sources
With a selected list of fonts, this curated list has a variety of fonts that suits projects spanning from editorial, branding, to web design.
Feedbacks, Features and Refinements
Typelingual platform has received both positive and negative feedback since the launch. Users have responded well to the platform being the first to teach Chinese and bilingual design for the designers. Negatively, users were concerned about the lack of imagery and a fully functional website to navigate.
Typelingual has also successfully been invited by Singapore Chinese Cultural Centre to exhibit its content and promote the platform at the organisation's largest annual festival, Chinese Cultural Extravaganza 2019.
Typelingual is currently looking for sponsorships and development teams to expand and build a fully functional platform. Do drop me an email if you're interested to collaborate and improve on this.