HTC SUPPORT

Category:
UX/UI, Branding, Graphic Design

My Role: 
UX/UI, Design Research

Overview

As the online task-oriented self-services approach is gradually dominating the customer service area, our goal for this project is to increase user retention rate and minimise customer support costs, 

Our team reinvented the support site through wireframe, UI elements, interview as well as the comprehensive user experience, in order to provide a more user friendly and less stressful environment to the online visitors, furthermore, meet our objectives of this project.  

Visit Site

As the online task-oriented self-services approach is gradually dominating the customer service area, our goal for this project is to increase user retention rate and minimise customer support costs, 

Our team reinvented the support site through wireframe, UI elements, interview as well as the comprehensive user experience, in order to provide a more user friendly and less stressful environment to the online visitors, furthermore, meet our objectives of this project.  

Visit Site

DESIGN PROCESS

DESIGN PROCESS

As working in a multinational corporation, to compete a project, each step needs to be subtle, thoughtful and authorised by various professionals and managerial levels. So, the communications amongst the stakeholders, designers, developers, marketers and managers were critical that have to be taken into account for a comprehensive UX design process.

Following the Design Thinking method, our team implemented this project from the usability test, defining the needs of users and the potential problems to generating the possible solutions, and redesigning the wireframe and user interface, and then iterated between prototypes and user testing until the result reached the best-case scenario.

htc-design-process-01

The Situation

The Situation

Based on the HTC.com satisfaction survey results, 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.

My Responsibilities

My Responsibilities

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 design process.

Our Strategy

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 are the improvements and new features we came up with: 

  • Improved Support pages structure
    Reduce friction in customer 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 the collection of 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 reduce the feeling of frustration.

WIREFRAME

WIREFRAME

wireframe-02

UI DESIGN & PROTOTYPE

UI DESIGN & PROTOTYPE

As users who visit the support pages aimed to look for the information to solve their issues on the phone. With the well structured wireframe, we moved on to user interface design and prototype to test the effects and styles that incorporated the design outputs and solutions for creating a relaxing user interface and experience.

As users who visit the support pages aimed to look for the information to solve their issues on the phone. With the well structured wireframe, we moved on to user interface design and prototype to test the effects and styles that incorporated the design outputs and solutions for creating a relaxing user interface and experience.

MOODBOARD

MOODBOARD

Prior to making the decision for the new UI style which would be impactful for the whole HTC webpages, I created a 4-theme moodboard and analysed the trend and usability in the future.

Moodboard
Moodboard
Moodboard
Moodboard
Moodboard
Moodboard
Moodboard
Moodboard

PROTOTYPE

htc-prototype

desktop - tablet

htc-prototype-mobile-2

mobile

ICONOGRAPHY

Since the UI style was confirmed, for ensuring the adhesion to the style guideline, I created and tested over 100 icons with various colours, stroke lines, corner radius, etc., examining the visual effects of both isolated and grouped icons throughout all the sections and pages. 

icon style v5-01

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 with small animation. However, the hover animation still remains legible for conveying that the element is interactive to users.

1.1-Support-Landing-Page-v1

opacity

1.1-Support-Landing-Page-v2

background

1.1-Support-Landing-Page-v3

angle

1.1-Support-Landing-Page-v5

underscore

4.3-Select-issue-v3

angle

4.3-Select-issue-v7

underscore

4.3-Select-issue-v5

shadow

4.3-Select-issue-v6

colour

OUTCOME

OUTCOME

This project involved designers, developers, managers and international marketing teams and most importantly, our users. The prototypes were tested on focus groups and surveys were conducted in streets for keep improving and optimising our design.

As a result, the new support pages are now creating a more friendly and less stressful environment with less impact of visual elements for users, according to the online analytics service, which has significantly reduced the amount of support costs and increased the retention rate.

This project involved designers, developers, managers and international marketing teams and most importantly, our users. The prototypes were tested on focus groups and surveys were conducted in streets for keep improving and optimising our design.

 As a result, the new support pages are now creating a more friendly and less stressful environment with less impact of visual elements for users, according to the online analytics service, which has significantly reduced the amount of support costs and increased the retention rate.

Laptop

mac-real-01
mac-real-02
mac-real-03

Mobile

U11_landing v2
U11_productv2
U11_backup v2

Selected Works

AdventsureUX/UI, Branding, Graphic Design

NVIDIA iCAFEUX/UI, International Collaboration

Performing SculptureUX/UI, Motion Graphics, Exhibition

HTC SupportUX/UI, Branding, Graphic Design

In the GrooveCritical Thinking, Design Theories, Motion Graphics

Vivid LIVEUI, Digital Marketing, Graphic Design

Hi!

   

All rights reserved © Christopher Hsueh