Timeline
Client
Company size
Role
UIUX Designer
Team
Contribution
Overview
TSMC-Online is the company's online customer portal that provides its customers with online services including order placement, order status tracking, and access to various technical information. However, using this website require a lot of wafer production domain knowledge, TSMC spend a lot of time and hired a lot of agents to assist their users.
We collected all the frequently asked questions about what kind of issues TSMC's clients are facing and prepared a completed kit for users.
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 launching the help widget and information center, these features significantly helped and supported users every step of the way and reduced overwork and 54% of complaint issues in the customer service team.
54%
Reduce complaint issues
35%
Reduce customer service team workload
01 Challenges
Challenge 1
There were no instant help and support when users are facing issues, even though the customer service team reply message every couple of hours.
" Even though the customer service team helped me a lot throughout the process, I still needed to wait a couple of hours to let them help me solve the problem. "
Users 12 ( TSMC's client )
Challenge 2
Each agent would make their own tutorial material to lead their clients, but some material is outdated, and we still need to ask them for an updated version.
"My agent will send me the pdf of how to use this function step by step, but some of them are outdated, and I need to ask them to make the updated version. "
Users 4 ( TSMC's client )
02 Before / After
Before
They need to update user manual manually and update the updated version on TSMC-Online
After
A well categorized information center to help users to search any issues.
Help Modal for more complex function and let users search for assistant when they are stuck.
03 Design Highlights
Help Modal
→ When users are facing issues, they can click the question mark icon on the right corner and search for support and user manual.
→ If the instruction has longer content and image, users can choose to open in the new tab to have a complete understanding
After
Multiple ways to look into the instruction and an collect all the frequently asked questions to lead users right away.
Use the instruction based on their personal preference.
Before
There are no extra for more features in the future so they need to keep merging all the features into one category .
Information Center
→ For beginners, We designed and combined all the information that customers may be confused and training video in here, agents don't have to explain all the information for their clients and hold the meeting when they are new clients join and need to learn all the wafer production process in TSMC.
After
Video Training, What service that TSMC provided and all the function tutorial can be found in here.
Before
Information spread everywhere, for example, key route it's telling TSMC's clients that the overall production process here.
Search
→ For those who are familiar with the production process, they can simply use search function to find the information instantly.
→ Category entrance provided in the search homepage that provided users can find data for different behavior.
After
Users can know the overall layout with in 5 seconds and the onboarding process can lead users to explore the main features.
Before
User guide can't be searched in the previous system, only general information provided in it.
04 Information Structure
Training
→ Beginners: Understand all the termologies through document and video training.
Support
→ For all: All the information that TSMC's client may need through the wafer production process.
05 Design Iteration
Help Modal
→ User flow
Service Now
→ Wireframe
→ High Fidelity
Videos
→ Wireframe
→ High Fidelity
Help Center
→ Wireframe
→ High Fidelity
