Charlotte Franenberg
T-Mobile Thuis
Customer Service Landing Page
T-Mobile Thuis (Dutch for home) is 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
Website:
– UX Research
– UX Design
– UX Micro-copy
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.
Charlotte Franenberg
Jacobs Douwe Egberts
In this project, my team and I optimized the homepage, category page, and product detail page for two Jacobs Douwe Egberts (JDE) brands: Douwe Egbert (Coffee) and Pickwick (Tea). Both brands have a rich history and are an authority in the Netherlands in the field of coffee and tea. However, steps still needed to be made in the field of the online brand experience. In my role as UX designer, I focussed on the structure and user experience of the pages. I also looked at their place within the total flow of the site.
Starting-points
- Responsive design (mobile compatible)
- Online brand experience with an emphasis on user experience
- A seamless experience with other media
- Easy to maintain by JDE in their CRM
Data research
JDE did a survey among 200 respondents before the start op this project. This meant that we could use this data to get insights about the customers of both brands. Among others, I visualized this data in pie charts depicting reasons for users to visit the websites and what they were missing. Furthermore, I looked at Hotjar and Google Analytics metrics to understand how people navigate through the website.
My main findings were that users visited the website to get more information about the products, the savings program, and campaigns. The information the users were missing most was information about the saving program and inspiration.
Wireframes
After making a flowchart and sitemap I created wireframes. These wireframes allowed me to start working on the basic layout for each page. This made it possible to rapidly understand how the pages would function and how the content would be presented. I also took the overall composition into account and, looked at how the elements on the pages should be arranged to create an optimal user-centered design. Additionally, I created the wireframes with the CRM in the back of my mind. This means the pages are build up of modules of which the content can be edited by JDE and can also be re-used on other pages in the future.
Visual Design and handoff
After handing my wireframes over to the visual designer we still worked closely together to find a perfect balance between usability and a trendy design. We also defined the animations together to give the website an extra ump of delightfulness. We documented all the information about the designs and animations. Together with a visual style guide, we send all this information to the developers at JDE.
