Story

Chunghwa Telecom is the biggest telecommunication company in Taiwan, furnishing 31 million consumers and business customers with broadband internet access, television and telephone, and wireless service.

Mission

Traditional service channels, including store counters, telephones, emails, and instant messages, along with social network, online chat, and the innovative web-based self-service are provided to maximize customer's satisfaction.


Our team is in charge of creating the web-based portal, which provides self-services, such as applying for home phone service, checking billing history, upgrading internet speed, suspending value-added services, and so on. This portal provided 45 online self-services in 2011.

Team Work

Our team leader connects between the customer service department at headquarters and our team. He prioritizes and dispatches new features to team members according to the work load at hands. The following shows one self-service I’ve worked on – contract inquiry.

Needs of Contract Inquiry

Consumers want to be able to view their contract information to answer questions such as: "When can I renew my contract, so that I can get discounts on purchasing a new phone?"

Design

To keep the inquiry process simple and straightforward: the user inputs a product number and the interface shows the contract information.


We include responsive designs in order to display content according to devices for better readability and user experience.


I drew the wireframes for the mobile and web versions.


At the mobile version, it asks users to put a product number (as seen the wireframe on the left below) and shows the contract information (as seen the wireframe on the right below).

two wireframes of the mobile version. users input a product number and press submit button at the first wireframe and the contract result shows at the second wireframe.
The wireframe of mobile version

At the web version, it shows contract information on the left near the field where users just put a product number. (People read from left to right in Taiwan, so I put the main content on the left.) Moreover, it shows relevant information (billing address, usage status, etc.) of this contract for further services.

two wireframes of the web version. a textfield and two buttons at the first wireframe and contract result and related information of this product number show at the second wireframe.
The wireframe of web version

Development

After validating interactions and components on wireframes with the team leader, I implemented the design with HTML, CSS, JavaScript, and our proprietary UI library.


Considering multiple products into a service was a little complicated, since we had multiple data sources owned by each product department. Therefore, we used APIs (Application Programming Interface) to get data and to rearrange it during development.

Two screens. the left one is mobile version, showing contract information; the right one is web version, showing contract information and related information about the number users provide.
The screenshot of contract information on the mobile and web versions

Test

Developers wrote the test scripts while testing on different products and different cases. For example, testing a phone number in a family plan of wireless services.


Before the new service went online, our team and the customer service department at headquarters ran test scripts in the test and production environments.


After services went online, we had our own system to catch the error happening in the production environment. We fixed bugs proactively before customer complained.

Result

This self-service system reduced the load to other channels (service counters, telephone, etc.), and allowed us to handle 37% more support cases annually (Data in 2011).

Reflection

It was great to work in a big company to serve millions of people.


The work culture in our company is in a strict top-down fashion. As a developer, sometimes I was curious about why and where these customer demands came from? How to design from the user’s point of view? How to improve the service quality?


These questions became the seed for me of diving into the user experience world later on.