PRODUCT DESIGN OF COMPLEX TPM SYSTEM

Redesigning the TPM System with Enhanced Aesthetics and Improved User-Friendly Experience

  • Context

    Kantar XTEL's Trade Promotion Management (TPM) system is a comprehensive software solution that integrates multiple tools, including the XTEL Configurator, XTEL Mobile Sales Force Application, Power BI Reports, and the Sales Performance Platform. It also encompasses six key operational units: Trade Management, Agreements and Accruals, Claims and Calculations, Customer Business Planning, Sales Force, and Analytics. However, the system's underlying technology, Sencha JavaScript, has become outdated and is no longer supported by Internet Explorer browsers. Numerous user requests have emphasized the need for more intuitive guidance, simplified navigation, and a seamless flow between functionalities. These factors have led to the decision to undertake a major system overhaul, focusing on redesigning both the user experience and the overall look and feel.

  • Area

    UI Design
    UX Design
    UX Research
    Product Analytics
    Design Leadership
(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.
  • Timeline
    • 2017 Release v7.
    • 2020 Release v8
    • 2024 Release v9
  • Tools
    Sketch
    Miro
    Zeroheight
    Invision
    XD
    Figma
  • Team
    Product Teams from Kantar XTEL: TPM, TTC; IBP, Analytics, SFA)
  • Role
    UI Designer
    UX Designer
    UX Researcher
    Design Lead
(02)
CHALLENGES
CHALLENGES
The discovery phase revealed key challenges affecting usability, performance, and strategic alignment. Complex user flows and multiple integrations have created usability hurdles, while performance issues with large data sets slow efficiency. Misalignment across product teams and a lack of design thinking have led to fragmented development and inconsistent user experiences. Additionally, slow user feedback collection and extensive client customizations hinder standardization and scalability. Addressing these issues requires a user-centric approach to enhance system intuitiveness, performance, and collaboration.
  • Complex System and User Flows
    The 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 Sets
    Handling 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 Priorities
    A lack of strategic alignment across product teams has resulted in inefficiencies, slowing development progress and causing fragmentation in the product roadmap.
  • Limited Design Thinking Culture
    The 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 Clients
    Without 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 Strategy
    Extensive 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)
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.
The Problem:
• Furthermore, no prior efforts were made to clearly define user audiences, key roles, or responsibilities, causing a misalignment between user roles and their respective workflows. Given the scale and complexity of global customers’ organizational structures, accessing end users and conducting comprehensive research to gather insights on software usage has been particularly challenging.
• Additionally, the organization lacked experience with design processes and had not integrated any structured design methodology into the development cycle. There was also a significant gap in design thinking culture and a limited understanding of the value that design could bring to the product.
(01)
HOW IS THE PROBLEM CURRENTLY BEING ADDRESSED?
  • 1.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.
  • Establishing a Design System:
    Developed a centralized component library to maintain design consistency across the application while allowing for easier customization and future updates. Additionally, established clear design guidelines outlining typography, color schemes, and UI elements to create a visually cohesive and unified user experience.
  • 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.
  • Gather Continuous Feedback and Engage Stakeholders.
    Implemented continuous feedback loops by engaging users throughout the redesign process, including beta testing phases to gather insights on new features and design changes. Leveraged this feedback to make iterative improvements, ensuring alignment with user expectations. Additionally, involved key stakeholders from departments such as marketing, sales, and supported to incorporate diverse perspectives and align the redesign with broader business goals.
(02)
HOW ARE OUR COMPETITORS ADDRESSING THIS?
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.
(03)
EXPECTED OUTCOMES
  • Modernized UI
    A modernized UI that aligns with updated branding, supported by a new repository and detailed guidelines. A refreshed visual identity with consistent components across the platform.
  • Targeted analysis
    Targeted analysis to identify quick wins, prioritizing key modules like Promotion Management, Promo Planning, Agreements, and Rebates Management.
  • Enhanced navigation and user experience
    Enhanced navigation and user experience through a thorough review of high-use cases.
(04)
DISCOVERY PHASES
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
Phase 3: Promoting Alignment and Engagement
  • Design Thinking Promotion Activity
  • Engage Stakeholders
(04)
METHADOLOGY
METHADOLOGY
The methodology follows a structured approach to creating impactful user experiences through Discovery & Research, Design Thinking & Ideation, Agile & Incremental Development, User Testing & Feedback Integration, and Continuous Improvement.
  1. Discovery & Research: We engaged with stakeholders, including internal teams and clients, to gain a clear understanding of their needs, goals, and pain points. This was followed by thorough user research to uncover user behaviors, workflows, and challenges through interviews, surveys, and observation sessions. Competitor benchmarking is also conducted, analyzing key players like SAP, Oracle, Anaplan, and Visualfabriq to identify industry trends, best practices, and differentiators. Additionally, we reviewed existing product usage data and performance reports to pinpoint bottlenecks, common user pain points, and areas for improvement.
  2. Design Thinking & Ideation: In this phase, we created detailed personas representing various user types (e.g., sales, marketing, finance) based on research insights. We also mapped out both current and ideal user journeys for primary flows, such as promotion planning and agreement management, identifying friction points and opportunities for improvement. To foster collaboration, we hold co-creation workshops with cross-functional teams, including development, sales, marketing, and product teams, to brainstorm potential design solutions. Additionally, we developed low-fidelity prototypes to explore different approaches for enhancing the UI and UX in key areas.
  3. Agile & Incremental Development: We prioritized key modules or features for redesign, such as promotion management and promo planning, delivering them in short, iterative cycles as part of the Minimum Viable Product (MVP). We followed agile methodologies for sprint planning, focusing on iterative releases that continuously improve based on user feedback, starting with quick wins like enhancing the UI for consistency. Close collaboration with development teams ensured that designs were feasible, scalable, and seamlessly integrated across the platform.
  4. User Testing & Feedback Integration: We conducted usability testing with real users to collect early and frequent feedback, focusing on key areas like navigation, ease of use, and performance enhancements. We also explored design inconsistencies for critical features through testing to determine the most effective approach. Additionally, we established iterative feedback loops, continuously gathering user insights and incorporating them into ongoing sprints to refine designs and features over time.
  5. Documentation & Design System Creation: We developed a cohesive design system featuring reusable components, comprehensive documentation, and clear design guidelines to maintain consistency and scalability across various products and modules. We ensured the design system aligned with branding and accessibility standards, providing development teams with the necessary guidelines for future projects.
  6. Continuous Improvement: We set key performance indicators (KPIs) to measure the success of the redesign, focusing on aspects like user satisfaction, reduced task completion time, and system performance. Based on user feedback, market trends, and technology updates, we continuously refined and improved the system over time.
(05)
INFORMATION ARCHITECTURE
INFORMATION 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.
If a building becomes architecture, then it is art
(06)
DESIGNING
DESIGNING
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.

Agile methodology

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 & Research

    Every 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 Sprints

    To 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 & Implementation

    When 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 & Iteration

    We 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 System

    To 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 product.
SOLUTION
  • 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.

    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 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.

    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.

(07)
DELIVERING
DELIVERING
We successfully delivered the TPM system design update through close collaboration with development teams, iterative feedback sessions, and continuous refinements to ensure seamless implementation and alignment with customer expectations.
To ensure the successful delivery of the TPM system design update, we closely collaborated with development teams, working hand-in-hand with front-end developers to ensure accurate implementation. Before the release, we integrated feedback sessions, presenting the MVP prototype to customers and gathering insights on the UI and navigation experience. This allowed us to incorporate necessary changes and refine the design based on customer perspectives.This process ensured that the design evolution consistently met customer expectations and was efficiently deployed with every update.
Made on
Tilda