Design System | TSMC-Online

Design System | TSMC-Online

Timeline

2020.10 - 2022.12

2020.10 - 2022.12

Client

TSMC

TSMC

Company size

73,000+

73,000+

Role

UIUX Designer

Team

5 front-end developers, 5 back-end developers, 2 UIUX designers, 1 system analyst and 1 project manager

5 front-end developers, 5 back-end developers, 2 UIUX designers, 1 system analyst and 1 project manager

Contribution

User Research, Wireframing, UIUX design, Prototyping, Workshop Facilitations

User Research, Wireframing, UIUX design, Prototyping, Workshop Facilitations

Overview

Once we redesign and rebrand for TSMC, we hand over the design system to TSMC to make sure TSMC-Online can maintain its consistency and led users every step of their way.

Due to NDA, I’m not allowed to reveal complete design processes and deliverables. All the data is redacted and blurred and would be used for portfolio building only.

Impact

After launched new version TSMC-Online, the design system helped with their collaboration with different department and low the redesign and development costs to fasten the iteration efficiency.

62%

Reduce design and development costs

55%

Improved Iteration Efficiency

01 Hierarchy

When and where to show the information is crucial for maintaining consistency

We tried to think of different extreme cases to help us define the layer and how we can show the content.

02 Color System

When and where to show the information is crucial for maintaining consistency

We tried to think of different extreme cases to help us define the layer and how we can show the content.

03 Component

1. Button

Main_Primary

Main_Secondary

Confirmation_Primary

Hierarchy Guideline

2. Content Selection List

2. Dropdown

Dropdown_Large

Title + Dropdown_Large

Dropdown_Medium

Title + Dropdown_Medium

Title + Dropdown_Medium

Dropdown Item_Large

Dropdown Item_Large

3. Toast

Status

04 RWD