DESIGN SYSTEM AND UI GUIDELINES

Unified Design System for Kantar: Scalable UI Solutions

Ensuring Consistency Across Diverse Product Platforms and Solutions.

  • Context

    After Kantar merged its technology units into one portfolio solution, we were left with different applications—XTEL, Richmix, VR, and IQ—each with distinct operational goals, technology frameworks, user interfaces, and user experiences. It became critical to find a way to unify the experience and create UI consistency, allowing these applications to function as parts of a cohesive solution. To achieve this, we needed to develop a new vision and collaborate on creating updated UI guidelines and a design system consisting of scalable and adaptable components and experience patterns to meet the diverse needs of each unit.

  • Area

    UI Design
    Design System
    Design Guidelines
    Design Leadership
(01)
OVERVIEW
OVERVIEW
Over several years, I developed and refined a design system and UI guidelines to create a cohesive, scalable, and flexible user interface for XTEL products. This process involved building a system that could accommodate multiple product units, each utilizing different technologies and frameworks. My goal was to ensure consistency, familiarity, and a seamless user experience across products from various brand units. The design system unified visual elements and interaction patterns, promoting alignment and collaboration across teams while maintaining adaptability for evolving product needs.
  • Timeline
    • 1st Release Kantar Retail UI Guidelines and Kantar Retail Design System: 2017
    • 2d Release Kantar Consulting Design System 2019
    • 1st Release of UI Design Library for XTEL Sales Force Application 2021
    • 2022 3d Release Kantar XTEL Design System
    • 2024 XTEL Design System
  • Tools
    Tools
    Sketch
    Miro
    Zeroheight
    Invision
    XD
    Figma
  • Team
    Product Teams from Kantar Consulting Group ( XTEL, VR, Richmix, IQ)
    Product Team XTEL
  • Role
    UI Designer
    Design Lead
(02)
CHALLENGES
CHALLENGES
Designing a unified design system for XTEL came with a range of challenges, particularly in maintaining consistency and alignment across products and teams. The primary obstacles included varying user experiences across different technologies and frameworks, along with inconsistent UI and technology standards across XTEL products. Additionally, the differing priorities and product strategies of individual teams, combined with complex product navigation, made it difficult to create a cohesive design. Limited development capacity further hindered the testing and integration of new patterns, while constant updates to Kantar’s brand guidelines required ongoing adjustments.
  • Inconsistency
    Inconsistency in user experience across technologies and frameworks for each product within the consulting group.
  • Multiple internal products
    Inconsistency in UI and technology across XTEL products.
  • Priorities
    Different priorities and product strategies for each team in every company.
  • Complexity
    Complexity in product usage and overly sophisticated navigation.
  • Development Capacity
    Limited development capacity for design testing and integration of new patterns
  • Constant Upgrading
    Constant changes and updates to Kantar units and brand guidelines.
(03)
DISCOVERY
DISCOVERY
Given that this occurred at a pivotal moment for XTEL—when it became part of the Kantar group and aligned with other technology applications—it became absolutely essential to design the new system and guidelines in consideration of the components and needs of the other applications. This would ensure that the guidelines would foster familiarity and consistency across all applications within the portfolio.
The Problem: Initially, all XTEL products, such as XTEL Web, XTEL Sales Force, and XTEL Sales Platform, had different UIs and were developed with different frameworks by separate teams. There was poor consistency between components, even though they were integrated in a few use cases for specific tasks. The need was to design unified guidelines with updated UI components, providing detailed instructions for proper usage and implementation across different development teams. It became clear that the first priority was to create a comprehensive design system with a fresh UI for components, interaction patterns, and layout/page guidelines.
(01)
HOW IS THE PROBLEM CURRENTLY BEING ADDRESSED?
  • Collaboration with Developers:
    We worked closely with developers from each project to understand the technical limitations and requirements of different frameworks, ensuring the design system could be implemented across multiple tech stacks.
  • Comprehensive Audit
    UI Component Audit: We gathered all components, patterns, and designs from the various projects and technologies in use, identifying commonalities, differences, and inconsistencies (e.g., button styles, navigation structures).
    Technology Audit: We evaluated the different front-end frameworks (React, Angular, Vue, etc.), libraries, and technologies in use. This helped identify overlaps, gaps, and potential compatibility issues between the technologies.
  • Establishing a Unified Vision
    We created a shared vision for the design system, aligning stakeholders on its purpose—consistency, scalability, and a seamless user experience across all projects.
    Setting Clear Objectives: We set specific goals, such as unifying UI components, standardizing interaction patterns, and ensuring compatibility across different frameworks.
(02)
HOW ARE OUR COMPETITORS ADDRESSING THIS?
Through benchmarking, we found inspiration from renowned design systems in complex applications, including Google Material Design, IBM's Carbon Design System, SAP Fiori, Atlassian, Salesforce's Lightning Design System, and Shopify's Polaris.
(03)
EXPECTED OUTCOMES
  • 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.
(04)
DISCOVERY PHASES
  • We began by conducting a comprehensive audit of the UI components in Sencha's Ext JS framework. Our process involved assessing existing design assets to identify commonalities, inconsistencies, and areas for improvement. We also evaluated user journeys and flows across the product(s) to pinpoint areas lacking consistency and opportunities for enhancement.

  • In parallel, we worked closely with developers from each team to understand the technical limitations and requirements of various frameworks. This collaboration allowed us to audit existing front-end code and frameworks, ensuring that the design system aligns with current development practices or to determine whether a new structure would be necessary.

  • Additionally, we performed a comprehensive technology audit of the UI components across other products in the portfolio, including VR, Richmix, and IQ. This involved evaluating the different front-end frameworks (React, Angular, Ext JS, Google Material), libraries, and technologies in use. We identified overlaps, gaps, and potential compatibility challenges between these technologies.
(04)
METHADOLOGY
METHADOLOGY
Given that this occurred at a pivotal moment for XTEL—when it became part of the Kantar group and aligned with other technology applications—it became absolutely essential to design the new system and guidelines in consideration of the components and needs of the other applications. This would ensure that the guidelines would foster familiarity and consistency across all applications within the portfolio.
  • Atomic Design Methodology: We adopted Atomic Design as a best practice to structure our design system. After completing the component audit phase, we categorized all components, starting with the smallest elements (atoms), combining them into larger components (molecules and organisms), and progressing to templates and full-page layouts.

  • Agile Methodology: Within Kantar, our product unit follows Agile methodology. This allowed us to release the design system incrementally and iteratively, integrating feedback and making adjustments in each sprint.

  • Component-Driven Development (CDD): Given the software's complexity and limited development capacity, we employed CDD—a development-centric approach where UI components serve as the foundational building blocks of the design system.

  • Lean UX: We focused on delivering a minimum viable design system and refining it based on continuous feedback and user testing.

  • Continuous Integration and Delivery (CI/CD): We automated the integration and testing of updates to the design system, ensuring seamless delivery of design components into production environments.

  • Versioning and Documentation: Each release of the design system was carefully versioned and documented, with comprehensive guidelines for usage, customization, and integration.
(05)
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
After initiating the process by categorizing components based on functionality and design principles—using categories such as Atoms, Molecules, Organisms, Templates, and Pages—we created a visual map of UI components in Miro. This map was designed to reflect how the components fit together, from the smallest to the most complex, and to illustrate the dependencies and interactions between them.
(06)
DESIGNING
DESIGNING
Given that this occurred at a pivotal moment for XTEL—when it became part of the Kantar group and aligned with other technology applications—it became absolutely essential to design the new system and guidelines in consideration of the components and needs of the other applications. This would ensure that the guidelines would foster familiarity and consistency across all applications within the portfolio.
ESTABLISH A DESIGN LANGUAGE
My primary responsibility has consistently been to oversee and shape the Visual Foundation of each design system. This involves defining the core design elements—including color schemes, typography, spacing, iconography, and other foundational components—that ensure a cohesive, scalable, and visually consistent user experience. By setting up these visual standards, I ensure that each design system is adaptable across platforms and applications while maintaining alignment with the overall brand identity.
In our design process, we followed these steps:
  • Defined Components and Patterns: We broke down the UI into modular components such as buttons, forms, input fields, modals, and navigation bars, ensuring these components were reusable and adaptable across the system.
  • Established Interaction Patterns: We defined how users should navigate, input data, and interact with the product. These patterns ensured a consistent user experience, regardless of the product or platform.
  • Focused on Accessibility Following WCAG 3.0 Guidelines: We incorporated accessibility best practices into each component from the start, addressing factors like color contrast, keyboard navigation, and screen reader support.
  • Created Design Guidelines: We developed comprehensive documentation detailing how to use components, patterns, and interactions. This included guidelines for colors, typography, icons, spacing, and responsive design.
  • Built Prototypes: We prototyped key components and patterns in design tools such as Figma, Sketch, and Adobe XD to visualize how they would work together within the system.
SOLUTION
  • 1st Release: Kantar Retail UI Guidelines and Kantar Retail Design System (2017).
    This was the first atomic design system, prototyped in Sketch and Invision. The UI guidelines were written and released on SharePoint.

    My Role: UI Designer, Design Lead
    • I led a team of three designers from different Kantar units—Richmix, IQ, and VR. I guided the strategy, made key decisions, and oversaw the entire process required to create the design system. Additionally, I created and managed the UI documentation for both global and internal purposes.
    • In parallel, I worked as the UI designer for the XTEL application, designing components and leading the design process. I managed the design backlog and collaborated with developers to ensure smooth implementation during Agile sprints.
  • 2nd Release: Kantar Consulting Design System (2019).
    This was the second version of the design system, upgraded with a new color palette and designed in Sketch, prototyped in Invision, and released in Zeroheight.

    My Role: UI Designer, Design Lead
    Together with a team of three designers, we upgraded the design system with new branding guidelines, added new design patterns, and incorporated more technical insights to accommodate various technology constraints. As the Design Lead, I made the decision to create a comprehensive design system presentation. We worked collaboratively to publish the documentation in both Invision and Zeroheight.
  • 1st Release: UI Design Library for XTEL Sales Force Application (2021).
    The design system was upgraded with new components for mobile applications, designed and prototyped in Adobe XD.

    My Role: Design Lead, UI Designer
    As Design Lead, I oversaw the final proposals of the new design team to ensure consistency with the existing Kantar Design System. As a UI Designer, I contributed to the upgrade and modernization of several existing components and finalized the UI guidelines.
  • 3rd Release: Kantar XTEL Design System (2022).
    This involved transferring the previous design system from Sketch to Adobe XD, with new, upgraded components for mobile applications.

    My Role: UI Designer, Design Lead
    As part of the design decisions, we chose to migrate to a new technology, continuing the design system development in Adobe XD. I led the process of porting and integrating designs from Sketch to Adobe XD, conducted design and technology audits, and supervised the overall design migration.
  • XTEL Design System (2024)
    This design system was completely redesigned and upgraded with new branding guidelines, and released in Figma.

    My Role: UI Designer
    As a UI Designer, I worked on migrating and properly setting up the new design system in Figma. Along with other designers, I helped design the new visual language, components, and navigation modules.
(07)
DELIVERING
DELIVERING
To ensure the successful delivery of each version of the design system, we closely collaborated with developers.
  • Alignment with Technology:
We worked hand-in-hand with front-end developers to ensure the design system was implemented using scalable, maintainable, and flexible code.

  • Continuous Integration of Components.
We incorporated the design system into the development pipeline, allowing for the seamless integration of upgraded components. This process ensured that components were consistently tested and efficiently deployed with every update.
Made on
Tilda