UX Case Study: Redesigning ASUS Support Website

Amo Chu
6 min readMay 28, 2019

閱讀中文版本>>

The Challenge

Increase consumer satisfaction and reduce customer service cost through improving user experience on the support website.

Support website as a low-cost service channel has become increasingly important in recent years. To encourage website visitors to solve problems through internet resources instead of phone service, guiding them to find the information they need quickly is the primary task for designers.

The Outcome

This website launched on June 2017.

  • Increased sessions from home to download pages by 45%;
  • Decreased online chat usage for driver download and troubleshooting issues by 22%;
  • Reduced bounce rate of homepage from 25% to 12%;
  • The download Center conversion rate was 80%.
  • Won the 2nd highest score in Laptop Magazine Tech Support Website Review 2019.

My Role

I was responsible for most user experience strategy and user flow design for ASUS support website between February 2017 and April 2019. I also worked along with data analysts to build web data tracking plan.

Design Process

Defining the Business Goal

The customer service department leader came to us with a clear requirement: “We want to increase our support website usage.”

He believes that could be an effective strategy to reduce customer service costs based on his experience. With the directive, we conducted research to define our design plan.

Research: Discover the Design Opportunities

We assumed we could reach the goal by increasing website traffic or optimizing website usability. Our next step is to explore the two strategies by Google Analytics acquisition report and usability test.

The Google Analytics data shows:

  • The most popular content: driver downloads and FAQ pages.
  • Where the traffic comes from: most traffic is from search engine. Although the homepage is the most visited page, most visitors enter the support website from the FAQ and driver downloads pages.
  • Mobile and Desktop user behavior are different: mobile users visit much more FAQ pages than driver download pages, and the desktop user is the opposite. Besides, the mobile user only access a few services, e.g.contact-us, check RMA status.

The usability test reveals some problems with navigation

We tested both driver downloads and troubleshooting flow with 9 participants. To get the drives, users need to find the product details page first. Most of them got usability issues at the first step.

  • The internal search issue: the only way to arrive product detail page from the support website is by using internal search; however, it often returns wrong search results because it requires very precise keywords. The complex model name made it become a more cumbersome process.
  • The same problem also happened in FAQ search, users need to know the precise keywords to search for technical issues.
  • The product list issue: some participants tried to search the product details page from the official website. The problem is only the products for sale were displayed on the list, and those end-of-sale products can only be found by internal search, yet the support service for them usually continues for 3–7 years.

In the end, our users have no choice but to go back to google or turn to use customer service.

The previous support website home page

Competitor website analysis

We also collected ideas about features and layouts from our competitor's website. Most of our competitors provided a variety of navigation, including product-based and service-based navigation. Besides, we may be the only brand don’t have a download center yet.

Information Architecture and Wireframe

Based on the research, we proposed some strategies below:

  • Product-based navigation: the support website should enable users to find information by directly selecting a product model on the home page.
  • A clear FAQ category list that helps the user locate their problems.
  • A download center that guides the user to find the service quickly.
  • Improve the SEO(search engine optimization) for FAQ and driver downloads pages to help users easier find the answer from search engines.
  • Customized design for the mobile site.

Design and Development

Product based navigation

We put a product menu that allowed users directly find and go to the product details page with a few clicks.

Just click a product line, the drop-down list that includes all product models will be displayed in the extended section.

By selecting a product model, the support information links will show up on the right side in real-time without refreshing the page. It is also an effective way to avoid wrong search results caused by typos.

Search drivers and other support information by product model

FAQ categories and hot topics

It helps those users who are still determining what topics they should look for to quickly find the most relative answers, which reduces the chance to use customer services.

FAQ Categories

Download Center

We built a download center and displayed its link in the head menu shared by the official site and support site, making user easier to find the service anywhere on our website. It soon became the second most visited page in a few weeks after we launched it.

Download Center

SEO Improvement

We removed the iframe structure to improve SEO. The knowledge base editors also unified FAQ writing formats and added tags to help search engine crawler index our website.

We also refreshed the UI design for both driver downloads page and FAQ page, so when people enter those pages from search engine, they will see a refined and elegant interface welcoming their landing.

Customized design for mobile site

Usually our mobile version website are just responsive design, which means the website can adopt to different size screens, but the content and flow are the same as desktop version. But in this case, user behavior on mobile and desktop devices is very different. So we designed and developed an independent website for the mobile user. Here is what we do:

  • Simplified the homepage and put up the most visited services on the page.
  • Put the FAQ/troubleshooting relative feature on the primary position.
  • Applied the interactive components that are suitable for the mobile device. For example, we use a one-page list instead of a drop-down menu to design the product selector.
The mobile site pages

Evaluation and Iteration

We tracked web data to evaluate the performance, the data shows more visitors successfully arrived at destinations from the home page, and the contact-us pageview also decreased. Although it does not have too much impact on phone service usage, the chat service usage goes down.

The phase one outcome is okay, but we still have a lot of work to do. We have been keeping improve the website since it launched in June 2017. Last year, a new search engine was implemented to fix the search issue; we also conducted A/B tests and usability tests to improve the design.

Through teamwork, we won the 2nd highest score in Laptop Magazine Tech Support Website Review this year.

--

--