HTC  Support

UI/UX, Branding, Graphic Design

This project is the UX/UI and wireframe redesign of the HTC official website.

The goal of this HTC support pages revamp is to increase user retention rate and reduce customer support costs with a task-oriented self-services approach, and  in order to creating a friendly and less stressful environment, the UI was designed with flat, fun and cartoon style.

Visit Site

The Situation

Based on the HTC.com satisfaction survey result, the instructions of support section lacks clarity and details content to assist respondents diagnose their problems. In addition, the help content is written before product shipped and not always up-to-date to reflect issues and problems respondents encountered.

Our Strategy

HTC wants to improve customer engagement with personalised support site. Therefore we empower the customer with collaborative self-service tools. Base on the user story, here’s are the improvement and new features we come up with: 

  • Improved Support pages structure
    Reduce friction in costumer outreach with better user experience by reorganizing the structure, layout and content
     
  • Smart search and filter system
    Provide an easy way for users to reach the content.
     
  • Integrate official and community article
    Provide up-to-date information by integrate community feedback / Q&A / solutions.
     
  • Q&A filter system by decision tree
    Simple and easy flow for user to filter out the problem step by step, and reach the correspondent support content.
     
  • Top selection categories driven by data
    Prioritise topics based on user click rate to help user quickly find what they need, and minimize their frustration.

My Responsibility

As a member in the integrated design team, I played the main UI designer role who was also getting involved in the UX and marketing research during the process of this project. 

As working in a multinational corporation, to compete a project, every step has to be subtle, careful and fully authorised by several professionals and managerial levels through the whole design process.

Firstly, our team implemented the usability test, defined the needs of users and the potential problems, and then generated possible ideas solutions, redesigned the web wireframe and redesign the interface with more relevant corporate images, fonts and icons.

Web_Support_0.55_20160602-04Web_Support_0.55_20160602-04
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

PROTOTYPING and UI DESIGN

The next step was prototyping, we tested the buttons and visual effects as well as debugged the pages, and subsequently, the prototypes sent to the focus groups in the United States in which target market we recorded the participants’ opinions, perspectives and attitudes towards this new interactive service

According to the feedback, revisited the design process and optimised the service pages repeatedly, and finally launched this revamped product.

Prior to making the decision for the general UI style which could be impactful to the whole HTC official site as the new UI guideline, I created a 4-theme moodboard and analysed the trend and usability for the future.

After the UI style was confirmed, for ensuring the adhesion to the style guideline, I created over 100 icons with various colours, stroke lines, corner radius, etc., examining each icon through all the pages and sections. 

HOVER EFFECTS

As the goal of building a friendly support site, I examined several hover over effects on the icons, aiming to use the minimalist style and effects but still remains legible to users.

Designers, developers, managers and international marketing teams were all involved in this project, as a result, the new support pages now create a more friendly and less stressful environment for users which service significantly reduces the amount of support costs and increases in the user retention rate.