T-Mobile Thuis
Customer Service Landing Page

T-Mobile Thuis (Dutch for homeis an internet provider in The Netherlands. I redesigned the landing page of their customer service. The goal of the redesign was to make it easier for customers to find answers to their questions online and to reduce the number of calls to the help center.

Client:

T-Mobile Thuis

Services:
– UX Research
– UX Design
– UX Micro-copy
mockupstmo

User research: heat maps

In order to determine which elements of the current landing page were and weren’t interacted with by customers, I analyzed heatmaps. The heatmaps (click & mouse movements) also gave me insight into how users interact with the page on different devices. The tool I used for this was Hotjar.

Findings: 

  • Users don’t understand what is and isn’t clickable in the menu. 
  • Mobile users mainly interact with the menu, where desktop users interact more with the links under the menu.
  • Links to topics for new customers are clicked less than other topics but are placed higher on the screens.

User research: Feedback survey

To understand the satisfaction of the current page, I analyzed the results of a feedback survey. This also gave me insight into the purpose of the user’s visit and into which subjects customers searched for most. The tool I used for this was Hotjar. 

Findings: 

  • Half of the respondents could not find what they were looking for and were going to call the helpdesk.
  • Not only existing customers visited the support page, but also orientating potential customers searched for information on the page.

Concept Creation

T-Mobile has strict style guidelines and an existing UI-kit. For this reason I used existing components and elements a much as possible. This also enabled me to rapidly create various mock-ups of what the page structure could look like. I was therefore able to demonstrate to stakeholders why certain components and elements should or should not be included on the page.

Prototype

As mentioned above, the page had to be designed with as many existing components as possible. However, I did add one new component: an FAQ block. This block was designed to help customers find the answers to specific questions quickly. 

Prototype (FAQ component)

Goal of the FAQ component:

  • To give users texts which corresponded to their specific questions.
  • To give more textual context than the top menu.

Challenge:
Getting as much relevant information as possible in a compact screen real estate.

Micro-copywriting

After getting the green light on the design, it was time to fill an excel sheet with all the FAQ’s and their answers. This was an extensive process.

The handoff

Although the designs I made were already high fidelity, I handed the designs over to a Visual Designer in order to make the designs pixel perfect and check if everything was according to the style guidelines. Then the designs were handed over to the frontend developer. I worked closely with the developer to ensure the interactions were implemented correctly. 

T-Mobile Thuis
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.

Client:

T-Mobile Thuis

Services:

UX Research, UX Design, Copywriting

The Process

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.