Design system setup
Ux Design
Interaction Design
Service Design
Client: TOMTOM
Year: 2017-2018
As part of TomTom's rebranding initiative, a structured redesign of their website was essential. Our journey began with a simple but ambitious goal: to redesign TomTom’s main menu reduce the amount of menu items and improve theoverall navigation structure. By adopting a user-centric approach, we aimed to transform the user experience, making it more intuitive and efficient. The process was meticulous and comprehensive, involving detailed analysis, stakeholder engagement, user research, and continuous refinement. Here’s how we achieved this transformation.
Redesign of TomTom.com
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=821,h=469,fit=crop,trim=288.36272040302265;331.78470254957506;595.7682619647354;315.4674220963173/Aq2NEEQKX4HXGg4v/tt-tablet-Aq2NEOzbZlcXy3Kv.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=320,fit=crop,trim=156.9007263922518;596.9454545454546;329.49152542372883;565.5272727272727/Aq2NEEQKX4HXGg4v/tt-tablet-Aq2NEOzbZlcXy3Kv.png)
TOMTOM - 2018
Discovery Phase: Understanding the Current State
The first step was understanding the existing menu structure. Our team mapped out all the URL links of the top menu, documenting over 90 hidden menu items. This initial analysis was crucial. We created a visual map and a detailed spreadsheet, highlighting redundancies and pinpointing areas for improvement. It was clear that the current menu was cluttered and not user-friendly.
TOMTOM - 2018
Engaging Stakeholders
With a clear picture of the existing structure, we turned to internal stakeholders. We printed the names of all menu items and conducted interviews with managers, asking them to sort items into logical groups. The challenge was evident when many managers were unfamiliar with certain menu items.
To declutter and order the menu items, we conducted a card sorting exercise in two phases. First, we worked with managers and employees, then we moved to users. By posing the question, "How would you group these items?" we gained invaluable insights into how internal stakeholders perceived the menu items.
This feedback helped us form initial groupings and align internal understanding with user needs.
The outcomes of the card sorting exercise revealed several key insights:
We should avoid jargon and technical terms.
We should separate consumer and B2B-related items.
We should divide them into journeys rather than business silos.
This feedback was instrumental in forming initial groupings and aligning internal understanding with user needs.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=312,h=238,fit=crop/Aq2NEEQKX4HXGg4v/tt-workshop-YX4PjVEDDlSzDqVk.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=256,fit=crop/Aq2NEEQKX4HXGg4v/tt-workshop-YX4PjVEDDlSzDqVk.jpg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=298,h=252,fit=crop,trim=0;1540.8;144.11764705882354;345.6/Aq2NEEQKX4HXGg4v/20190214_173822-remko-YKbJeDzl0ztQZRDn.jpeg)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=256,fit=crop,trim=0;1395.9648506151143;142.02898550724638;311.7891036906854/Aq2NEEQKX4HXGg4v/20190214_173822-remko-YKbJeDzl0ztQZRDn.jpeg)
Creating Data-Driven
key customer groups
Understanding the end users was pivotal. We conducted extensive user research through surveys, interviews, and analytics, developing detailed personas that represented different customer groups, focusing on user goals, tasks, and pain points, guided the design process. They ensured that the new menu would meet specific user group needs and provide a more personalised experience.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=411,h=231,fit=crop/Aq2NEEQKX4HXGg4v/group-11-AMqnr9qRwNUoxgkq.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=320,h=183,fit=crop/Aq2NEEQKX4HXGg4v/group-11-AMqnr9qRwNUoxgkq.png)
Task Analysis and Journey Mapping
Using well-defined user personas as our foundation, we conducted a comprehensive task analysis and developed detailed customer journey maps. By mapping out the steps users took to accomplish specific tasks, we identified key interaction points with the website's menu items. These journey maps provided a clear visualization of user flows, highlighting crucial areas for improvement to better support user tasks.
Guided by insights from our task analysis and journey mapping, we reorganized the website’s page structure. We grouped related tasks and content into distinct sections, ensuring each section was tailored to specific user needs without unnecessary overlap. Additionally, we redesigned the navigation system, incorporating breadcrumb trails and contextual links to help users easily find related content and navigate back to previous sections.
Next, we focused on understanding user entry points and search behaviors. Utilizing analytics tools, we tracked where users were coming from, such as the homepage or Google searches, and identified what they were searching for. By pinpointing common entry points and search terms, we gained valuable insights that informed the design of landing pages and initial navigation paths. This ensured users had a smooth start to their website journey.
To further enhance the user experience, we designed entry-specific pathways. We created targeted landing pages for users arriving from various sources and developed contextual entry points to guide users directly to relevant sections. This customization facilitated efficient task completion and personalized the user journey, ensuring a seamless and engaging experience for all users.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=323,h=252,fit=crop/Aq2NEEQKX4HXGg4v/tt-ujm-YKbJ0XbRx1TZP39K.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=256,fit=crop/Aq2NEEQKX4HXGg4v/tt-ujm-YKbJ0XbRx1TZP39K.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=453,h=445,fit=crop/Aq2NEEQKX4HXGg4v/menu-structure-d95peB5kZNHo8ve4.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=320,fit=crop/Aq2NEEQKX4HXGg4v/menu-structure-d95peB5kZNHo8ve4.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=326,h=200,fit=crop/Aq2NEEQKX4HXGg4v/tt-cjm-AwvrQBvl55uoxnDO.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=200,fit=crop/Aq2NEEQKX4HXGg4v/tt-cjm-AwvrQBvl55uoxnDO.png)
Restructuring the Page Layout: Products and Solutions
Based on our research outcomes, we restructured the page layout to create distinct sections for "Products" and "Solutions." This new organization allowed us to craft interconnected landing pages, providing a seamless user experience.
Products: This section was dedicated to individual items that users could purchase, integrate, or add on. Each product page provided detailed information about the product's features, benefits, and usage.
Solutions: This section was designed to address specific user needs that often required a combination of products. For example, a solution such as "Get from A to B as efficiently as possible and charge my car when low" would guide users through the various products needed to achieve this goal, such as real-time maps and charge points.
We created comprehensive landing pages for both Products and Solutions, ensuring they were easily accessible from the main menu. The redesigned navigation flow included:
Clear Main Menu Options: We added distinct "Products" and "Solutions" options to the main menu, making it straightforward for users to begin their journey based on their specific needs.
Interconnected Landing Pages: Within each section, we ensured that landing pages referenced relevant pages in the other section. For instance, a solution page detailing efficient travel would link directly to product pages for maps and charge points.
Contextual Information: We provided contextual links and information on each landing page to guide users through their journey. For example, a user exploring solutions for efficient travel would find links to product pages, usage guides, and integration tips.
Streamlined Navigation Paths: From the main menu, users could quickly navigate to the Products or Solutions sections. Within these sections, intuitive pathways directed users to the specific information they needed, reducing the number of clicks required to find relevant content.
Our new structure clarified the distinction between products and solutions, enhancing the overall user experience. Users could now:
Quickly identify and access individual products.
Understand how multiple products work together to form comprehensive solutions.
Seamlessly navigate between related pages, making it easier to complete their tasks.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=606,h=950,fit=crop/Aq2NEEQKX4HXGg4v/page-structure-AR0JZD0P2ncBwDe4.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=555,fit=crop/Aq2NEEQKX4HXGg4v/page-structure-AR0JZD0P2ncBwDe4.png)
OUR STORY
Conclusion
Redesigning the TomTom website has been an Interesting project. Our changes have led to higher user engagement, reduced bounce rates, and better task completion rates. This project shows our commitment to focusing on user needs and our ability to adapt to those needs. The improvements have made the website more user-friendly and strengthened TomTom’s digital presence. This redesign highlights our team's ability to deliver effective digital solutions that make a real difference.
Get in touch
I invite you to join me for a free 30 min discovery call where we can explore how my expertise can help your business or enhance your team's design capabilities.
© 2024 Wynand Klees