My Podcast

Resume

Shipped

TSMC-Online • Design System

I was responsible for organizing the handoff to the client and ensuring the design system's readability and ease of understanding.

Role

Product Designer

Team

2 Designers

Timeline

2 months

TSMC didn't have a solid design team, so we wanted to ensure that all components remained consistent in terms of usage and behavior. After the handoff, if the customer service team wants to launch a new feature, they can base the new flow on the design system.

Outcome

We delivered all our components through Figma and handed them off to the customer service team at the end.

Evaluation

Color System

Messages

Platform

Actions

Status

Guide

Dark

Dark Grey

Hint

declined

Link

System Dark Navy

Guidance

Negative

Red

System Error

Error/ Warning

System Red

Inactive/ Warning

System Red

Primary

System Red

Theme

Caution

Yellow

System Yellow

Notice

declined

Progress

blocked

Beige

declined

System Beige

Partially Active

System Orange

Function action

declined

Positive

Green

System Green

Success

System Green

Active

declined

Informative

Blue

System Blue

Information

System Blue

In Progress

System Blue

Secondary

System Blue

Link

Inactive

Gray

declined

Disabled Solid

Disabled

Section BG

Background

Theme Color

These are the main branding colors & color themes of TSMC-Online platform, the main visual presence.

System Red

#D70B0B

AAA

System Dark Navy

#273038

System Blue

#096ADB

AAA

Section BG

#F5F5F5

Neutral Color

AAA

White

#FFFFFF

AAA

Section BG

#F5F5F5

AAA

Light BG Small

#F5F7F7

AAA

Light BG

#F0F2F2

AAA

Light Stroke

#E0E1E3

Light Blue Gray

#ADB5BD

Medium Blue Gray

#868E96

Medium Gray

#666666

AAA

Dark Gray

#333333

AAA

System Dark Navy

#273038

Disabled Text

#AAAAAA

Disabled Stroke

#CCCCCC

Disabled Solid

#DDDDDD

System Color

These are the color palettes that are being used systematically throughout the platform.

Tint Red

#FBE7E7

Light Red

#FACCCC

Bright Red

#E40202

System Red

#D70B0B

Dark Red

#C71D22

Light Error

#FCEAEA

System Error

#E42929

Light Blue

#E6F0FB

System Blue

#096ADB

AAA

Dark Blue

#0755AF

Light Green

#E5F3EE

System Green

#00875A

Light Beige

#F6F0E6

System Beige

#A96806

AAA

System Yellow

#FFDC62

System Orange

#F2A000

Headline

Headline 1

Font

Rubik

Weight

Medium 500

Size

24pt

Line Height

30px

Letter Spacing

-0.2px

I’m a header’s title

Full Page Modal

The Headline 1 is mostly used for full page modal’s header title.

Headline 2

Font

Rubik

Weight

Medium 500

Size

22pt

Line Height

24px

Letter Spacing

-0.2px

I’m a page’s title

Home

Search Result

Level 3 Function Page

Headline 3

Font

Rubik

Weight

Medium 500

Size

20pt

Line Height

24px

Letter Spacing

-0.2px

I’m a modal’s title

Modal

Button

Based on the function and purpose, button can be defined in several types:

1. Main Button

Main Button represents the most important action in that page.

2. Main Button: Confirmation

Main Confirmation Button is used when that page have the event need to be confirmed.

3. Sub Button

Sub Button represents the sub action in that page.

4. Text button

Text button represents the less important action in that page.

5. Floating Action Button (FAB)

Floating Action Button performs the most important or common action on the page, it allows the user access the button easily.

6. Image Button

Image button represents the less important action. Compare with Text button, transforming the content to the visualization.

Button

Hierarchy: Main Button

The Main Buttons can be defined in 2 hierarchys: Primary and Secondary

Main Button

Confirmation

1. Main Button

A. Primary (High emphasis)

B. Secondary (Medium emphasis)

2. Main Button: Confirmation

A. Primary (High emphasis)

B. Secondary (Medium emphasis)

Hierarchy Guideline

All buttons in TSMC-Online platform can be defined into different levels of emphasis from most-emphasis to low-emphasis.

Text Button

Medium-emphasis

Low-emphasis

Most-emphasis

Floating action button

Main Button - Primary

Main Button - Secondary

Text button, Image button

High-emphasis

Main Button

Confirmation

Main Button

Confirmation

1. The FAB (floating action button) will be shown at every pages in TSMC-Online.

Using FAB to trigger the “Help” feature in TSMC-Online, the button will at the highest layer in the page. User can easy to access the button as they want

2. Keep only ONE Main Button in the page

Without regard to the FAB logic, keep one main button in that page. Let the user can focus on the most important task which the Main Button will be expressed. Such as "Login", "Download", "Create" or "Confirm"...etc.

3. If the page have multiple buttons scenario

Try to use one Main Button (most important task) with other medium and low emphasis buttons (less importent tasks). Also consider the button appearance and placement to let the UI is clear and easy-to-use.

Search Function or Document

My Online

Submit

Clear

Cancel

Button

Default

Hover

Pressed

Disabled

Medium+Icon

Medium+Dropdown

Medium

Small

Small+Icon

Introduction

Create Group

Manage

Introduction

Manage

Download

Medium

Medium+Icon

Small

Small+Icon

Create Group

Add to DocCart

Button

Add to DocCart

Button

Default

Hover

Pressed

Disabled

Toast

1. Successful

Main Button represents the most important action in that page.

2. Informative

Main Confirmation Button is used when that page have the event need to be confirmed.

3. Failed

Main Confirmation Button is used when that page have the event need to be confirmed.

Successful feedback

Informative feedback

Failed feedback

Status

Based on the status, toast can be defined in several types:

1. Text

Providing contextual feedback.

2. Text and Button

Providing contextual feedback with related action button.

Failed feedback

Button

Purpose

Based on the purpose, toast can be defined in several types:

Composition

Failed feedback

Button

A. Icon

B. Content

C. Action Button (optional)

D. Close Button

Content Guideline

Please select at least one item.

Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor

Keep the content clear, short and easy to unserstand

Suggested character limitation of the Link: 80 characters

Changes saved.

Documents unsubsribed.

Using past simple tense.

“Job Title” updated.

“Tapeout Dashboard” moved to “Do Not Display”.

Using medium font size and “quatation mark” to emphasize certain text.