Customer Service Pages
T-Mobile Thuis is an internet provider in The Netherlands. The customer service has over a hundred customer support service pages which all needed a make-over. My role in this enormous (and still ongoing) project is to analyze the current content and determine how to present the -often dry- content in an user-centered way. The goal is to make it easier and more pleasant for customers to find answers to their questions online and to reduce the number of calls to the help center.
UX Research, UX Design, Copywriting
Due to the magnitude of this project, I found an efficient way to create wireframes in which the pages would contain a consistent presentation of the information. I first designed specific components which could be re-used for every page depending on the content. Based on my designs, the visual designer created an UI-kit which followed the T-mobile guidelines. This enabled me to create pixel perfect “wireframes” at lightning speed. My designs could be handed straight over to our frontend developer. Although initially the creation of the UI-kit took some time investment. In the end, this way of working significantly speeded up the delivery process.
When we now come across pages that require new components, I again analyze and create the most user-centered solution for that component. The visual designer then designs it and adds it to the UI-kit.
To illustrate my contribution to this project I will discuss three specific components I created.
Component 1: Tips
‘Tips’ are based on progressive disclosure. The idea is that users can scan all the relevant information quickly. The tips are written in a to-the-point and descriptive way in order to only give the most relevant information. When a user wants to learn more about a tip an accordions opens and more information is presented.
For example, on the page Trage Wifi (translation: Slow Wifi) many users immediately understand what is meant in the second tip which, translated to English, says “unplug your modem”. However, for users that want to know exactly how to do this, they can click on the tip, and a step-by-step explanation about unplugging the modem is given with out having to load a new page.
Component 2: Steps
In some cases, users need to follow a sequence of steps. For this situation, I created a ‘steps’-component. This component consists of a descriptive icon and a short text. The text in the step must purposely be kept short to make sure the steps are easy to follow. The idea is that the users follow ‘baby-steps’ to reach their goal. This component may only be used when the users need to follow steps in a chronological order.
Component 3: Timeline
For the support page ‘Status van je bestelling’ (translated: status of your order) I created a timeline component. The idea is that this component is used to display a timeline in which no mandatory action of the users is required. For this page, I used cards instead of accordions because the goal is the make sure the users read all the information. By using cards with their own title and icons, the information is chunked so that the users can process, understand, and remember the information better.
Data collection and optimisation
In order to test the pages, I use Hotjar. Hotjar gives me insights into the use of the pages through heatmaps which depict scroll, mouse and click behavior. I frequently analyze these heat maps to see if users interact with the pages as intended. When I see pages aren’t used in the optimal way or when we launch pages containing highly complex information, I start a feedback poll and analyze the results in order to optimize the pages. Additionally, I use Usabilla to give me insights into how happy users are with a page.