Shipped

Shipped

Shipped

Shipped

TSMC-Online • Customization and Onboarding

Redesign B2B Project - A platform that supports TSMC's clients at every manufacturing step

Role

Product Designer

Team

2 Designers, 10 Developers

Timeline

4 months

Working on the B2B project was exciting because I got to learn a lot about the industry and work closely with stakeholders. I led the user research and UX design of this project and worked closely with the TSMC customer service team and engineers

Outcome

70%

reduce the time required to

find technical documents

65%

save the time of learning

manufacturing knowledge

95

NPS score increase

from 82 to 95

Problem

TSMC-Online require clients spend an enormous amount of time understanding how to use the platform and how to select specific documents.

Introduction of TSMC

  • World's leading semiconductor manufacturing company.

  • Focus on Manufacturing customer-designed semiconductor chips

TSMC's clients

Final Designs
and Solutions

Over four months, I drafted multiple design strategies and crafted various wireframes, and discussed them with the customer service team to do rapid test and meet user needs.

Customized widgets for various stakeholders

Based on four different ways of using TSMC-Online, I designed four distinct widgets for users. Users can change the sequence based on their purpose and different stages of manufacturing


Also, I Clearly divide into three different sections


  1. Navigation

  2. Working Area

  3. Search + Tooltip

Onboarding tutorial for Newbies

I designed the animation to help users clearly see the layout and all the features, allowing them to understand the site faster and more easily without any guide

Support Module at every step

Over 50% of users required customer service team support for using document features. However, due to time differences, they needed to wait for the customer service department to provide corresponding tutorials. I designed a module that allows users to access tutorial content in real-time

Design Process
and Ideate

This project allowed me to dive deep into understanding the manufacturing process, the responsibilities of each role, how they collaborate, and when they need to use this platform during the production stages.

Stakeholders

Stakeholders

At least six roles would be
involved in these three stages.

Each of them will responsible for different tasks by using TSMC-Online different features

Project Manager

IC designer

Foundry Manager

Field Solution Engineer

CSV Engineer

Account manager

(customer service)

Involvement

Involvement

Each stakeholder is involved in
different stages of collaboration

Manufacture Process with TSMC

Business

Engagement

Design IC

Tape Out & Mask

Wafer Dispostion

Eng. Analysis

Post Service

Foundry

Manager

Project

Manager

IC Designer

CSV Engineer

Field Solution Engineer

Account Manager

Project Goal 1

Improve customized features for each stakeholders to support their work

Pain Point

Pain Point

Customized widgets are not acknowledged by users

TSMC-Online offer customize features however users complained they don’t know what is this section for and what they can do

Design Challenge

Design Challenge

How might we redefine the information hierarchy to better support stakeholders in completing their work tasks?

What can a homepage to support stakeholders to complete their work tasks

What can a homepage to support stakeholders to complete their work tasks

What can a homepage to support stakeholders to complete their work tasks

Before

https://online.tsmc.com/

Navigation

Ad Banner

Customization

Features

User Manual for Beginner

Emphasize TSMC's new technology to clients.

Provide a full tutorial for beginners by supplying a user manual.

Provide a full tutorial for beginners by supplying a user manual.

User manual can only be useful for beginners.

User manual can only be useful for beginners.

Couldn't track the wafer production process status once logged into the platform.

Couldn't track the wafer production process status once logged into the platform.

After

https://online.tsmc.com/

Customized Features


Favorite Function

Ad for introducing new technology

Document Download Status

Report Download Status

Notification

Navigation

Home

Documentation

Design Portal

Cyber Shuttle

Tapeout

Production Info & Instruction

Production & Logistic Report

ENG Data Analysis

Quality & Reliability

Post Sales Service

Privilege Setting

Tool bar

Navigation placed on the left to draw user attention initially and educate users about TSMC's wafer production process.

Maximize customized features to support different stakeholders' work tasks.

Lo-fi and sketches

During the communication, I also conducted quick sketches and wireframes to discuss with the customer service team how I would design and what my assumptions were.

Customized Widgets

Based on four different ways of using TSMC-Online, I designed four distinct widgets for users. Users can change the sequence based on their purpose and different stages of manufacturing.


  • Allowed changing sequence based on different roles.

  • Enabled checking of the download process upon entry.

  • Notified clients when new technologies were launched.

News

new tech and service launch

Favorite Function

save frequently used features

Relative functions

guide users the next step and explore relative functions

Document Download Status

Report Download

Status

What’s new

What’s new

What’s new

New technologies provides by TSMC

System alert / maintenance

New technologies provides by TSMC

System alert / maintenance

Favorite / Relative Functions

Favorite / Relative Functions

Favorite / Relative Functions

Stores frequently used functions are stored on the homepage for faster access.

Provides next-step features to users based on their behavior.

Stores frequently used functions are stored on the homepage for faster access.

Provides next-step features to users based on their behavior.

Document Download

Document Download

Document download shows how many documents are still working on watermarks.

Document download shows how many documents are still working on watermarks.

Tapeout Dashboard

Tapeout Dashboard

Tapeout Report status and where they are now

Tapeout Report status and where they are now

Final Design

Final Design

Final Design

Final Design

Project Goal 2

Enchance user experience and develop support materials for every step of the process

Pain Point

Pain Point

User manual for each feature and beginners only accessible on the homepage.

User manual for each feature and beginners only accessible on the homepage. All the user manuals are pdf file, some of them are even out of date

Design Challenge

Design Challenge

Identify new users to provide full tutorial and provide support each step of the way

ensure a comprehensive onboarding process is available on the homepage.

Final Design

Onboarding tutorial for Newbies

I designed the animation to help users clearly see the layout and all the features, allowing them to understand the site faster and more easily without any guide

Help Module - Provide user manual and educate article in each feature

Click “ ? “ icon to call out help module to view support matieral

Provide different ways to view based on users content and preference

Final Design