PRODUCT DESIGN OF COMPLEX TPM SYSTEM
Lead UX & Product Designer | 2019–2025
Redesigning the TPM System with Enhanced Aesthetics and Improved User-Friendly Experience
A multi-year transformation project that unified a fragmented ecosystem into one scalable design foundation, ensuring consistency, efficiency, and familiarity across all XTEL products
(01) OVERVIEW
OVERVIEW
Kantar XTEL's Trade Promotion Management (TPM) software is a specialized solution designed to help consumer goods companies optimize and manage their trade promotions. It streamlines the planning, execution, and analysis of promotions, enabling businesses to control trade spending, enhance promotional effectiveness, and boost profitability.
Major clients using Kantar XTEL’s TPM solutions include global industry leaders such as Nestlé, Danone, L’Oréal, Unilever, Heineken, Beiersdorf, and PepsiCo. While the system has evolved over the past 20 years, its technology and user interface (UI) have lagged behind competitors in terms of intuitiveness and usability. As a result, modernizing the UI and enhancing the overall user experience has become a top priority.
Major clients using Kantar XTEL’s TPM solutions include global industry leaders such as Nestlé, Danone, L’Oréal, Unilever, Heineken, Beiersdorf, and PepsiCo. While the system has evolved over the past 20 years, its technology and user interface (UI) have lagged behind competitors in terms of intuitiveness and usability. As a result, modernizing the UI and enhancing the overall user experience has become a top priority.
- Timeline
- 2017 Release v7.
- 2020 Release v8
- 2024 Release v9
- ToolsSketch
Miro
Zeroheight
Invision
XD
Figma - TeamProduct Teams from Kantar XTEL: TPM, TTC; IBP, Analytics, SFA)
- RoleUI Designer
UX Designer
UX Researcher
Design Lead
(02) CHALLENGES
CHALLENGES
- Complex System and User FlowsThe TPM system is highly intricate, requiring the integration of multiple XTEL products and various technologies. This complexity impacts both the user experience and technical implementation, making navigation and usability more challenging.
- Performance Bottlenecks with Large Data SetsHandling vast amounts of data has led to significant performance issues, as the system struggles to efficiently process and manage large-scale projects.
- Disorganized Product Teams and Misaligned PrioritiesA lack of strategic alignment across product teams has resulted in inefficiencies, slowing development progress and causing fragmentation in the product roadmap.
- Limited Design Thinking CultureThe absence of a strong design-thinking mindset has hindered the creation of user-centered solutions, leading to a disconnect between design and product development.
- Customization Complexity for ClientsWithout a clearly defined design process, the product suffers from inconsistencies, making it harder to maintain a cohesive and scalable design system.
- Lack of a Unified Design Process and StrategyExtensive customizations for individual clients have complicated efforts to standardize solutions
- Customization Complexity for Clients:Extensive customizations for individual clients have complicated efforts to standardize solutions, making it difficult to consolidate feedback and resolve common usability issues across the platform.
(03) MY ROLE
MY ROLE
As Lead UX & Product Designer, I:
- Defined the vision and roadmap for the design system.
- Conducted a cross-product UI audit and pattern inventory.
- Led a team of three designers and one front-end developer in component creation.
- Established the documentation structure and contribution model.
- Facilitated design–development alignment workshops and governance sessions with global teams.
(04) DISCOVERY
DISCOVERY
Over the years, the software has evolved into a highly complex system, developed using various technologies without a structured user experience analysis. The absence of a central component repository, combined with continuous customization for individual customer requests, has resulted in inconsistencies in navigation patterns and visual design. This complexity leads to long, multi-step processes that users must navigate to complete their financial tasks.
- User-Centered Design Approach: A user-centered design approach was implemented by conducting in-depth research through surveys, interviews, and usability testing to identify key pain points and usability challenges. These insights helped shape design decisions based on real user needs. Additionally, detailed user personas were developed to represent different roles within the system, ensuring the design aligns with specific workflows and enhances overall usability.
- Simplifying and Streamlining User Flows: Existing user flows were thoroughly analyzed to identify inefficiencies and eliminate unnecessary steps, streamlining processes for a more seamless experience. Additionally, a more intuitive navigation structure was designed to enable users to move effortlessly between different sections of the software, enhancing overall accessibility and efficiency.
- Prioritize Collaboration Across Teams: Encouraged collaboration between product teams to align development efforts with user needs, using regular meetings and workshops to bridge gaps in understanding. Foster a design-thinking culture across the organization, emphasizing empathy and iterative development to ensure user-centered design decisions.
- Performance Optimization: Optimized data management within the TPM system by refining data architecture and enhancing server capabilities to efficiently handle large datasets. Integrated continuous performance testing into the development cycle to proactively identify and address potential issues.
We also conducted a competitive analysis to benchmark ourselves against our competitors, identifying our strengths and weaknesses, and assessing our position in the market. The principal competitors of Kantar XTEL's Trade Promotion Management (TPM) software include several key players in the consumer goods and retail industry who offer similar solutions: Accenture CAS, SAP Trade Promotion Management, Oracle Retail, Exceedra, Anaplan, Visualfabriq.
- Release of a Design System: Each member of our team has at least 5 years of legal experience.
- Delivery of Initial Guidelines: We like to make people happy. We ask our clients about their birthday and prepare cool presents.
- Comprehensive Documentation: We care about our clients' time. Just give us a call, and we will help you with all the questions.
(05) PROCESS
PROCESS
- Phase 1: Understanding the Users and Defining the Problem
- User Research and Define User Persona
- Gather Continuous Feedback: Interviews, surveys, UX testing, navigation data analysis, workshops
- Phase 2: Building the Foundation for Design
- UI Repository and Design System
- Streamline User Flows
- Prioritize Collaboration Across Teams and Setup a Design Process
(05) METHADOLOGY
METHADOLOGY
Following the Agile methodology, we aimed to integrate design into development, ensuring a continuous, user-centered, and iterative process. Rather than working in isolation, our design team collaborated closely with developers and product owners, managing the backlog and user stories related to design topics. We also worked with stakeholders to align business goals with user needs.
- Discovery & ResearchEvery initiative started with a deep understanding of the problem space. We worked alongside stakeholders to define objectives, conducted user research, workshops, and interviews, and analyzed insights from these activities—along with competitive analysis and usability tests—to establish a clear foundation before moving into ideation.
- Designing Within SprintsTo stay ahead of development, the design team worked one sprint in advance, crafting wireframes, prototypes, and user flows that were validated through interactive prototypes shared with internal stakeholders to collect feedback. This ensured that design decisions were backed by data and insights before moving into development.
As designers, we actively participated in Agile ceremonies:- Sprint Planning to align on priorities
- Daily Standups to stay in sync with developers
- Sprint Reviews & Demos to gather early feedback and refine designs
- Design Handoff & ImplementationWhen a design was ready, it was documented and shared through tools like InVision, Sketch, XD, and later Figma, ensuring a smooth handoff to development. However, collaboration didn’t stop there—we remained involved during implementation, addressing edge cases, refining interactions, and ensuring the final experience aligned with the intended vision.
- Testing, Learning & IterationWe used MVP presentations with internal stakeholders and customer meetings to present and collect feedback. This iterative loop allowed for continuous refinement, ensuring the product evolved based on real user needs.
- Scaling Through a Design SystemTo maintain consistency and efficiency, we documented reusable components and patterns in a design system. This continuous process of improvement enabled scalable and cohesive experiences across the produc
(06) ARCHITECTURE
ARCHITECTURE
The TPM system features a highly intricate information architecture, designed to accommodate the complexity of trade promotion processes. It is composed of multiple interconnected modules, including Sales Agreement Management, Trade Promotion Management, and Customer Business Planning.
Depending on the customer’s configuration and specific business needs, there are typically 5 to 7 user roles navigating and interacting with the system daily. These roles follow diverse user journeys that often span across multiple modules, intertwining functionalities and requiring seamless transitions.
Because of this deep interconnectivity, the system’s information architecture must account for numerous dependencies and workflow variations. Each user journey is tailored to the organization’s unique structure and module usage, making the overall navigation framework both dynamic and multifaceted.
Depending on the customer’s configuration and specific business needs, there are typically 5 to 7 user roles navigating and interacting with the system daily. These roles follow diverse user journeys that often span across multiple modules, intertwining functionalities and requiring seamless transitions.
Because of this deep interconnectivity, the system’s information architecture must account for numerous dependencies and workflow variations. Each user journey is tailored to the organization’s unique structure and module usage, making the overall navigation framework both dynamic and multifaceted.
(07) DELIVERABLES
DELIVERABLES
The design transformation of the TPM system has been a long and dynamic journey, shaped by evolving business strategies and company changes. Over the past decade, the priorities of the design stream have continuously shifted, often adapting to new organizational directions and market demands. As a result, achieving long-term design goals has not always been a linear process.
It all began with the creation of the first design system and guidelines, which led to the initial design review and UI upgrade, aligning the interface with contemporary design trends. Over time, the TPM system underwent three major UI and component upgrades, culminating in a complete redesign in 2024.
This latest transformation introduced significant improvements, enhancing navigation, refining main menu access, and modernizing key modules such as the TPM Configurator, Promo Calendar, Bulk Edit Batch, Rebates, and Pricing Management. Each iteration has contributed to a more streamlined, user-friendly, and visually cohesive experience, reinforcing the solution’s adaptability to the ever-evolving business landscape.
It all began with the creation of the first design system and guidelines, which led to the initial design review and UI upgrade, aligning the interface with contemporary design trends. Over time, the TPM system underwent three major UI and component upgrades, culminating in a complete redesign in 2024.
This latest transformation introduced significant improvements, enhancing navigation, refining main menu access, and modernizing key modules such as the TPM Configurator, Promo Calendar, Bulk Edit Batch, Rebates, and Pricing Management. Each iteration has contributed to a more streamlined, user-friendly, and visually cohesive experience, reinforcing the solution’s adaptability to the ever-evolving business landscape.
“
Flexibility ensures longevity when technology and teams evolve.
(08) OUTCOME
OUTCOME
2017 – UI Design Renewal for XTEL Retail & TPM UX Improvements
This project marked the release of the first design guidelines, a system-wide UI renewal, and key improvements to navigation and the main menu.
2018-2020 – Kantar XTEL Renewal & Release of XTEL Configurator
This phase focused on updating the Kantar XTEL Design System and enhancing the usability of the platform. Through in-depth research with customers, we identified key navigation pain points and prioritized areas for improvement. Simultaneously, we designed and launched the XTEL Configurator, ensuring its interface was built using the new design system components for consistency and scalability.
Kantar UI Upgrade (2022)
The Kantar Design System underwent a complete redesign, incorporating new branding guidelines and migrating from Sketch to Adobe XD. This upgrade introduced enhanced UI components, including those for mobile applications, ensuring consistency and scalability across the platform.
XTEL (Former Kantar) Renewal (2024)
In 2024, the XTEL UI was completely redesigned again with a new Design System, this time migrated to Figma with updated branding guidelines and enhanced UI consistency.
(09) VISUAL GALLERY
VISUAL GALLERY
STORY
- 2017 – UI Design Renewal for XTEL Retail & TPM UX ImprovementsThis project marked the release of the first design guidelines, a system-wide UI renewal, and key improvements to navigation and the main menu.
My Role: UI Designer, Design Lead
As a Design Lead, I guided the new design team, ensuring alignment with the existing Kantar Design System while overseeing final design proposals for consistency. I also documented and governed the release of UI guidelines to establish a structured design framework.
As a UI Designer, I was responsible for redesigning and enhancing the user interface across the entire TPM system, improving usability and visual coherence. - 2018-2020 – Kantar XTEL Renewal & Release of XTEL ConfiguratorThis phase focused on updating the Kantar XTEL Design System and enhancing the usability of the platform. Through in-depth research with customers, we identified key navigation pain points and prioritized areas for improvement. Simultaneously, we designed and launched the XTEL Configurator, ensuring its interface was built using the new design system components for consistency and scalability.
My Role: Design Lead, UI Designer
As Design Lead, I drove the adoption of the updated design system, implementing new UI components across the TPM system to enhance usability. I also led the design and rollout of the XTEL Configurator, ensuring it aligned with the latest UI standards while improving the user experience for system configuration.
- Kantar UI Upgrade (2022)The Kantar Design System underwent a complete redesign, incorporating new branding guidelines and migrating from Sketch to Adobe XD. This upgrade introduced enhanced UI components, including those for mobile applications, ensuring consistency and scalability across the platform.
My Role: UI Designer, Design Lead, UX Researcher
I led the transition from Sketch to Adobe XD, overseeing the porting and integration of designs while conducting design and technology audits. As part of this migration, I contributed to the development of the new visual language, refining components and navigation modules alongside other designers.
Additionally, I played a key role in designing and launching the Customer Business Plan module within the TPM System. I also collaborated on updating the Retail module, ensuring seamless integration with the new design system.
As a Principal UX Researcher and UX leader, I led the TPX Research Initiative, where my role was to develop the methodology and plan all activities, from surveys to customer interviews. Ultimately, I analyzed all insights, delivered the final outputs to the customer, and identified key areas for product improvement to be integrated into the strategy. - XTEL (Former Kantar) Renewal (2024)In 2024, the XTEL UI was completely redesigned again with a new Design System, this time migrated to Figma with updated branding guidelines and enhanced UI consistency.
My Role: UI Designer, Principal UX Researcher
I worked closely with other designers to integrate and update the TPM system, ensuring a smooth transition to the new design system.
As a UX Researcher, I led customer interviews and surveys to identify key usability improvements, ensuring significant enhancements to the user experience.
My work also focused on refining navigation, the main menu, and the bulk editing batch process, addressing critical UX challenges to streamline user workflows.
(10) IMPACT
IMPACT
While data remains confidential, the design system has:
- Strengthened design–development collaboration, reducing inconsistencies.
- Created a unified visual language across all product lines.
- Increased delivery efficiency and reduced duplicated design work.
- Supported scalability and adaptability during rebranding and tech migrations.
- Alignment with Technology:
- Continuous Integration of Components.
I love building systems that bring structure and beauty to complex digital ecosystems.
