background

Engaging Designers to
Learn Bilingual Design

A case study spanning digital and physical mediums

Photo by Lily Banse on Unsplash
Project Year 8 Months, 2018-19
Area of Work
  • UI/UX
  • Branding
  • Typography
Brief:

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.

Role:

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.

01: Background
Aug—Nov 2018

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
Oct—Nov 2018

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.

04: Prototyping
Feb—April 2019

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.

05: Designing
March—April 2019

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.

06: Concluding
May 2019

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.


background
Bilingual Design in Singapore
Over 100 logotypes found in Singapore were used as case study examples.
image

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
  • Complementary
  • Image

    Singular Design

    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.

  • Image

    Complementary Design

    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.

Image
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.

Image
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.

Image
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.

Image
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.

Image
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.

Image
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.

Image
Chinese Priority

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.

Image
English Priority

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.

Image
Equal Distribution

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.

Business Demands

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.

  • Problem 01
  • Problem 02
  • Problem 03
  • LIMITED LEARNING RESOURCES

    problem-1

    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

    problem-2

    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

    problem-3

    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.

background
User Persona
Designer based in Singapore.

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.


Thumb
[Fig.01] Customer Journey Map for the defined user persona.

How might we enable bilingual design resources
to be accessible for English-speaking designers?

  • Image
    Chinese Typography Resources

    Learning the fundamentals in Chinese typography will allow a better understanding of how the two languages will work with one another.

  • Image
    Bilingual Logotype Examples

    Through analysing and understanding of existing work, a designer can benefit and derive his/her own way of approach.

  • Image
    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.

  • Image
    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 Solution

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.

Sitemap

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.


Thumb
[Fig.02] The sitemap designed for Typelingual. This is the first version of the sitemap as the sitemap was subjected to change after testing.
background

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.


Thumb
[Fig.03] Home page
Thumb
[Fig.04] Works. Showcase examples of existing brands. It adopts the same layout as the home page.

Thumb
[Fig.05] Translation. It displays the 3 types of translations for brand names.

Thumb
[Fig.06] Type Foundation. Split the screen into three kinds of important features.

Thumb
[Fig.07] Method of Design. The design splits the 4-step method into a step-by-step process.

Thumb
[Fig.08] Font Resources. The design displays the 4 main font styles for Chinese characters. It also contains a "Search" function for the users to find the fonts they want.

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.


Thumb
[Fig.09] HOME PAGE — Users commented that the home page was rather boring if the design is kept to color blocks and titles. The different heights of the containers also seemed to indicate the different importance of the sections. The design also does not encourage them to understand which section they are viewing if they are in a rush to understand the topic.

Thumb
[Fig.10] FIND FONTS — Users commented that the page should have filter functions to filter out fonts that they need or want. As many of them are unfamiliar with the kind of fonts available, filters are the best option to introduce fonts. The "Search" function should be kept for designers who are familiar with Chinese fonts.

Thumb
[Fig.11] NAME TRANSLATIONS — Many users commented that this website should be kept minimal as they are looking for content related to graphics and designs instead of language content. Although this section is important, it may not be appropiate inside a design-focused website. The content on the site is also readily found on multiple websites.

Thumb
[Fig.12] INSIDE CONTENT — The use of split screen to showcase both the content and imagery has received positive feedback. However, attention has to be given to the typography.

image

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.

Thumb
[Fig.13] Before

Thumb
[Fig.14] After

2.0 Examples

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.





Thumb
[Fig.15] Before

Thumb
[Fig.16] After

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.





Thumb
[Fig.17] Before

Thumb
[Fig.18] After

4.0 Methods

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.





Thumb
[Fig.19] Before

Thumb
[Fig.20] After

5.0 Find Fonts

Taking in feedback from the users, filter options were added in to the design. The detailed view of the selected font will also showcase more examples of the glyphs and will include a link for the user to purchase it from the original website.


Wireflow

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.


Thumb
[Fig.21] Flow chart for the website.

Thumb
[Fig.22] Wireflow for Finding Fonts. This is a part of the various wireflows created. If you're interested to view more, please contact me here.

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.

  • Typography
  • Colours
  • Microcopy
  • Logotype
  • Graphics
  • 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.

    graphic-gif

  • 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.

    graphic-gif

  • 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.

    graphic-gif

    graphic-gif


    graphic-gif

    graphic-gif

  • 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.

    graphic-gif
    graphic-gif
  • 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.

    graphic-gif
    graphic-gif
background

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.


Image
Image
image

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.


Image
Image
image

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.


Image
Image
image

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.


Image
Image
image
THE TAKEAWAYS

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.


Image
[Fig.23] Exhibition at SCCC.

Image
[Fig.24] Having a talk at SCCC, Chinese Cultural Extravaganza 2019.