You are now reading case study for:

Customer Service Intranet Redesign.

Hutchison Telecom Ltd needed to find a better way to organize the information of its intranet which is visited by more than 350 users daily.


There are number of complains increased from users that information is hard to find on the intranet. This lead to operation inefficiency and delay in answering customer's enquiry.

My Role

I was on a two men team with the intranet content manager. I was responsible for leading not only the UX design work, but also the visual design and front‑end development work.

The Process

The Challenge

In this project we faced two big challenges. Firstly, we did not get to see our end-users. We had an call centre out-sourced in Shenzhen, China, and it is where most of our end-users located. Since I am working in the Hong Kong office, this makes the "getting to know your user" part more difficult. 


Secondly, I haven't work on a website before, and I am not very good at estimating how long the development work will take. I could only make the best "Guestimate" and hoped everything would be on schedule.


Existing Product

Before I talked to any users, I decided I should go on the intranet and have a feel of the site. This was the intranet that the call centre agents uses everyday. Just at a first glance, I have found three areas that needed to be improved.

First, you can see that the search bar is in the middle of the page, which breaks the convention of the location of a search bar which should be located at the top of the page and this is a textbook NONO for websites. 


Next, we can see there were tab buttons in the middle of the page. However, the tabs had a line below it which made it look disconnected with the contents below. When the tabs were selected, there were no pop up or visual effect to indicate which tab was selected, so users will have a hard time to indicate the contents they were reading belongs to which tab.


Finally, there were no identification of name of the website and you won't even know if this is the home page!


Getting to Know Our Users

Although we did not have direct access to the end users due to location barrier, we have conducted in-depth telephone interviews with the call centre manager in order to understand our users behaviour. We wanted to understand how the intranet play in a daily life of a call centre agent and what will they do if they can't find information from the intranet.We created user stories base on our interviews.


What Do Users Want?

We wanted to find out as quickly as possible which areas of the intranet were the most urgent so we could prioritized our tasks accordingly. We decided to conduct quantitative researchs; two rounds of survey that covers:


1. Which area of the intranet did users find most disappointing.

2. What functions or features users would like to have.


The survey revealed that users were most dissatisfied with the information architecture of the intranet. A satisfaction score of 2.76 out of 5.

Market Research

I conducted in-depth market researches to find out how professional intranet solution companies handle the challenges of designing intranet for their customers. Some of these companies offers intranet guides and some of them offers thier working intranet prototype. All these resources were available for free  by providing them an email address.


Playing with these prototypes gave me a sense of "How the pros do it". I observed very closely how they handled the design challenges of UIs such that vast amount of information could be displayed in a sensible, organized and not over crowded way. I also took notes on the interaction designs that I thought would improve the user experience of our intranet and went on looking for such java/jQuery effects online.

Heuristic Mark-up

After I have done my research, I went on an in-depth assessment of the existing intranet and documented all my findings. Apart from the poor information architecture, the intranet was built using a very old fashion web design practice: the whole website was built using tables and were full of frames. The website also lacked breadcrumbs and has a weak visual consistency across pages, the sitemap was also very outdated.

Strategy Workshop

With so much problem found on the existing intranet, our team decided it would be best to abandon the old website completely and build a new one from scratch. We worked out the priorities of the tasks based on my researches and assesments and we decided the naming conventions of pages as it would help us to reduce the maintenance cost in the future.

Usability Testing

We decided we should trying to do some usability testings before we move on to our work. We have only conducted one round of usability testing due to limited support and resources. The test participant was Jackie the new girl from training (We grabbed her as she walked by).


One round of usability test was better than none. The test has assured us that there was a need to develop a set of control vocabularies because Jackie failed to one of the "finding" task that we thought it was the easy task. After chatting with the content manager, we concluded inconsistent use of terminologies was one of the reasons why information was so hard to find on the intranet.

Controlled Vocabulary

We developed a set of control vocabularies for products, services and terms used in the intranet. The set of control vocabularies were sent to all content writers to ensure only official terms will be allowed across the website.


We understand inconsistencies in the intranet did not happen overnight. They piled up, bits by bits. To avoid that in the future, we educated the importance of controlled vocabularies and how it would effect the searching difficulties to all content writers and encouraged front-end users to report in-consistency use of terms.

Information Architecture

The activities undertaken in defining an information architecture involve:

  • Content inventory: Examination of a website to locate and identify existing site content

  • Content audit: Evaluation of content usefulness, accuracy, tone of voice, and overall effectiveness

  • Information grouping: Definition of user-centered relationships between content


The intranet has an estimated sum of over 500 pages and a new page is added every 2-3 days. We broke down the process into bite-able pieces so we could celebrate small wins and keep the team motivated. For example, we assigned some of the content inventory task to our admin staff, each day they will be inventorying 30-40 pages. This allow us to review their work more easily a day after and minimize damage if things goes wrong.  


We moved on to rearrange the contents after we have conducted our content inventory and audit. Below are my sketches on how to organize contents for the "Learning Centre".

Design Chat

We had made a lot of decisions alongside with the redesign of the  intranet. At one point I had to persuade the training manager that dropping the "words of encouragement" section from the home page was necessary for the product to benefit becuase the homepage were over-crowded (And nobdy reads it).

The Development

Initial Concepts

My sketches that I presented over the early part of the design process. Notice the sketch shows the interactions as well. Paper prototyping techniques helped me work rapidly and led me to consider a lot of ideas in a short amount of time.

Clickable Wireframe

The company computer did not install neither Balsamiq or Axure. So I created all my wireframes and visual designs using Microsoft Excel instead. ​


Using Excel to create wireframe wasn't that bad, I created clickable effects using the built in hyper-link function and we could jump from pages to pages quite easily using that function.​​​​​​​​​​

Visual Design

I took up the role as an visual designer because frankly, we did not have one. I knew visual design is a very time consuming process. So to speed things up I chose one of the colour palettes from


One thing I learned during the creation of wireframes and visual designs was to do not use "lorem ipsum" to replace real texts. For one thing, I have to explain what "lorem ipsum" means everytime I show my design to my colleagues. For the other, using Lorem ipsum avoided the most crucial part of the user experience. 


The content.


The fundamental building block of a website are the words. How could I design the experience of the website when I haven't decided what words my users were going to see? Filling spaces with "lorem ipsum" is easy. Figuring out the proper words to use and make it easy to understand by everyone, is hard.

Style Guide

Visual consistency are one of the things that plays a key yet subtle role on websites. A consistent visual hierarchy allow users to form a familiarity of the website, and hence reduce their mental effort when they are searching for information. With a understanding of this, I have created a style guide to help to ensure visual will be consistent across the site.


In this project, I act as a front end developer as well. This was an excellent opportunity for me to practice my CSS skills. I used a lot of icons fonts to replace words on navigations because icons would save us a lot of space and it would make the website more interesting. Icons, when used right can allow users to scan through contents quickly and will help to reduce their searching time.


The Final Product

A before and after comparison of the home page. Most of the usability problems I stated at the beginning of this case-study had been resolved.


Although you can't see it, the Information Architecture had gone through a massive make over and I am sure the IA now makes more sense. The new intranet was built using website best practice (no tables!), eliminated most iframes and added bread crumbs to sub-pages to improve the usability.


I would update the achievement of this redesigned intranet as soon as I get the chance to do a satisfaction survey to my end users.

What else have I done?
Introducing Tooltips

Every company has its own jargons and terminologies, for new employees, jargons are confusing and it will take them a significant amount of time to learn. This problem can easily be solved by adding tool-tips to terms when they were needed. Users like this function. One user even said she didn't know what some abbreviation means until I introduced this function, but she has been working in the company for more than 6 years!

No More Automated Slides

Studies has shown click on demand slides works better than slides that moves automatically, some users will be annoyed with automated slides.


With that knowledge in mind, the product page I created was click and slide on demand.​​​​​​​​​​






Answering User Feedback

We received a lot of feedbacks from users after the new intranet is launched. We reviewed their feedbacks very carefully and asnwer them back as quickly as possible. We knew true UX design doesn't end when the product is launched. It is the continuous feedback from users that will help us to build the ideal user experience and make people's life easier.

Thanks For Reading.