Story

Chunghwa Telecom is the biggest telecommunication company in Taiwan, and has established U.S.A. branch since 2002 in San Jose, California, namely Chunghwa Telecom Global. For the most cases, customers of this company are from enterprises who need telecommunication products or services, such as voice, VPN (Virtual Private Network), IP PBX (Internet Protocol Private Branch Exchange), IDC (Internet Data Center), and so on. About their business process, it had been in paper-based for a long time, yet the need of systematically processing through customer, quote, order, pricing, inquiry, provisioning, and billing was necessary for retrieving and using data effectively and efficiently.

Contextual Inquiry

In order to understand users, I conducted contextual inquiry with various teams across the company by observing how they worked in the existing operation and having interviews after. Through the whole business process, I listed goals and pain points in each business stage. (as seen the user flow below) I started designing and developing from the customer management and shipping features in a short sprint (about one week), since I can deliver quickly and gather more feedback from users.

the user flow and users' goals and pain points
The user flow

Information Architecture

By categorizing the needs gathered from the contextual inquiry and conducting the card sorting with users, I designed the information architecture (as seen the information architecture below) according to the sequence of the business process and users' mental models.

the information architecture
The information architecture

User Interface Design

Dashboard

After logging in, the dashboard (as seen the sketch blow) shows the menu and sections depending on the user's role and location. For example, if this user is a sales person, the dashboard shows sections of quote and order; if this user locates in Taiwan, dashboard shows news and frequent links of Taiwan. By showing the last five records of each section (users can switch the sub-page by clicking the number at the bottom), users know what tasks they are assigned to recently, and they can go to a specific page through links.

the sketch of the dashboard
The dashboard

Customer Management

After observing users' behaviors and interviewing them, I figured out that this internal business application should look more formal. One of users said "I don't need animation or other fancy effects. Just list the information I want." Thus, I chose the list view (as seen the sketch below), and attached a map, which allows users to plan their routes for visiting customers. Components were built with three sections: search, detail, and relevant information.

  1. I put a search bar at the top, by which users can find records by keywords, followed by a list of the search result.
  2. The detail section shows more information by selecting a specific record of the research result.
  3. The bottom section shows relevant information. For example, it shows contacts, quotes, orders, and visit reports for the customer this user chose, and the user can click links to check more details of this relevant record.
the sketch of customer management
The sketch and screenshot of customer management

Prototype

I've used the paper prototype to conduct the usability testing earlier in the process and spent more time thinking through users' needs. I took the first idea and ran with it as fast as I could because I wanted to deliver functions with a limited budget. Since Chunghwa Telecom Global provides many products and defines their customers into multiple categories, which impacts how to calculate the price, conducting usability testing with paper prototypes is the fastest way to gather users' feedback and go to the next design iteration.

The wireframe of price calculation table
The paper prototype

Result

  1. Efficient and automatic sales processing. The business process, from customer to billing management, became systematic, paperless, consistent, and efficient, in order to eliminate human error and to streamline business process.
  2. Automatic notification. Status-based structure made the business flow smoothly with the email notification in order to assign a task to the next person.
  3. Easily manipulation through a web application with a flexible data structure. It's pretty easy to add, for example, an employee, a product, or a function because of the flexible structure of HTML elements built with XML.

Reflection

This was the first time I built an internal-facing business system from scratch by myself. It was a great opportunity to interact with users from various departments and to understand their languages, goals and needs. The most valuable thing I learned was that listening to users and fully understanding what they meant was a key to design and develop a tool, which made their work easier. It feels really good to help people through design and I’ll keep doing this.