TomTom Map Maker





-    Client: TomTom
-    Role: UI/UX designer
-    Link: Map Maker

TomTom Map Maker is a web-based tool for creating and customizing map styles. It allows designers and developers to adapt the appearance of TomTom maps to their brand, product or needs. A very simple and easy personalization platform that avoids having to work directly with code.










The challenge was to translate a complex set of map styling options into a clear, intuitive visual interface, defining how the data should be represented across the experience and working closely with the development team to bring the visualisations to life.

The tool provides a visual interface for making these changes and seeing the results directly on the map, before sharing or publishing the final style to an application. Instead of requiring users to work directly with code or complex configurations, the tool provides a structured way to adjust the appearance of a map through the UI.




Map Style and
color controls


Users can start from a predefined map style and customize everything from the overall color palette to individual map elements such as roads, places, labels and points of interest.

The controls were designed to make these options easier to understand and work with, giving users a structured way to move between broad visual decisions and more specific adjustments. 






Map Element Controls


Maps are made up of multiple visual layers, including roads, places, labels, and points of interest. 

We organized these elements into manageable groups, helping users navigate the available properties and focus on the details they want to adjust. The design challenge was to make a potentially complex set of options feel structured and approachable without losing the flexibility of the underlying map styling.

Live Map Preview


By allowing users to see their styling decisions reflected directly on the map, the interface creates a more immediate and intuitive feedback loop. This helps users evaluate individual changes in context and understand how different visual properties work together, without having to rely on their imagination.




A Scalable 
Interaction System


The design system established a shared visual and interaction language for the customization experience, helping different controls feel like parts of the same product. This approach provided a foundation for supporting a variety of map styling options while preserving a coherent experience across the tool.

The system was developed in collaboration with the development team, translating visual decisions and interaction patterns into a working interface.