Satechi Tech Support Center

Following the triumphant launch of Satechi's new E-commerce platform, I took the initiative to revamp the tech support center website, aiming to elevate customer satisfaction and agent productivity. My redesign focused on delivering a streamlined, intuitive user experience, enabling customers to effortlessly navigate technical support within the Satechi ecosystem. Simultaneously, the new design significantly enhanced our agents' capacity to rapidly evaluate and address technical issues, ensuring prompt and effective resolutions.

Project owner
Satechi
My Role
UI/UX Design
Scroll Down

The Challenges

•  Navigate customers to efficiently find the FAQs, quick start guides, and product manuals for specific products.

•  Build the support center within the content management constraints of Zendesk but also approach a customized solution that aligned with Satechi's design system.

•  Optimize ticket submission forms to allow agents to better sort and route tickets to the right departments, reduce time spent on data entry.

The Process

Research Methods.
• Stakeholder Interviews

I started by talking to the support team to gather more information and get a clear understanding of their workflow and the challenges and frustration they face on a daily basis and how it affects them. How do they want to improve the support center. We did this so that the new support center could effectively contribute to their process.

• Usability Testing

I also did usability test on current existing site along with 2 competitor support sites with 10 users. To identify the parts of the interface that most frustrated and confused people, so that they can be prioritized and fixed.

• Card Sorting

During the usability test, I found users took a long time and feel difficult to find certain product-related FAQS they are looking for. And this is mainly because the categorization and content on the current support site are very confusing.

I then used closed card sorting method to spot actionable patterns in the way our users think about the contents. We provide the participants with product names and fixed product categories and asked them to put products into the categories they belong to.

Closed Card Sorting

Research Insights.

• Product categories should better reflect our users mental model. Reduce the number of main categories and then list the rest as sub-categories will make the items easier to find.
• A products fits in a few different categories need to be placed in every one of them. Due to Zendesk' s restraints, agents need to manually create multiple sections under different categories. It created extra work for agents, also it's hard to make sure to update all the sections.
• The current contact form submits all information to the technical support team without filtering out important keywords. Information such as order number, proof of purchase should be required in the form. Agents spend extra time entering data and unnecessary chats.

Design.
• Let's take look at the current support center 🧐
Support Center Hompage

There is no button to navigate user to Satechi's main site. Users need to click on the go back arrow on the browser. Users are overwhelmed with too many choices. Categories like USB-C are too broad because most products fit into that category. Category like car has only one product. Category like Early Adopters is redundant, Shipping & Delivery and Refunds & Returns can be combined to make the content clearer.

Search Result

There are too much information on the search result, make it hard for user to scan.

Current Contact Form

The contact form did not forward all the necessary information to the support team. Also, the current form uses the Wufoo Online Form Builder, which requires the support agent to manually enter the information into Zendesk.

• Let's map out the user flow and understand how users might interact with the site
User Flow Chart
• Ideation

Explore different solutions for adding filter to main category to help users find the most relevant product.

Solution1_Tabs
Solution2_check box

• Prototype

Test. - What we heard from the users
• The product images not only help me find my product easily, but also make the support center look professional.
• The hierarchy of information is more digestible.
• The product category makes more sense to me now, which helps me find what I'm looking for.

Final Responsive Design. 🖥️ 💻📱
New Support Center
Using tabs to break main category into sub-categories
New Search Result

Results.
• Significantly reduced customer service calls by 40%.
• The new design is more cohesive with the main site. Our team and users felt the fresh look pleasing to them.
• Significantly improved agent workflow, and increased customer satisfaction rating from 70% to 95%.

Reflect.

Through this project, I learned the importance of effective communication and how to uncover the real problem. Not everything the stakeholder says will be immediately clear, we need to look deeper than their actual words to deduce their intended meaning.

During the initial meeting, the stakeholder asked to keep all products strictly in one category to make classification easier, but that struck me as odd because research shows that one of the best practices for creating product categories is: if a product fits into several different categories, place it in each of them. That way, the item is easier to find. As I dug deeper, I understood that their real concern is that agents have to create multiple sections for the same product under different categories due to Zendesk's technical restraints. Not only is this time consuming, but it's also difficult to keep them all up to date on updating articles and making changes. We were able to respond and address this issue by hardcoding from backend. This way we address their concerns and provide the best experience for the user.