DESIGN SYSTEM AND UI GUIDELINES

Lead UX & Product Designer | 2019–2025

XTEL Design System — Building a Cohesive Multi-Brand UI Foundation


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

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.

Over more than ten years of evolution, XTEL’s software ecosystem had grown into a suite of independent tools—each built by different teams, using different technologies, and following different design approaches.

As Lead UX Designer, I initiated and guided the creation of a unified Design System and UI Guidelines that would bring structure, scalability, and visual harmony to the entire product suite.

  • Design System Evolution
    2017 — Kantar Retail UI Guidelines & Design System
    2019 — Kantar Consulting Design System
    2022 — Kantar XTEL Design System v3
    2024 — XTEL Design System Update

  • 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

  • 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) 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

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.

(05) PROCESS

PROCESS

  • Discovery & Audit
    Collected and analyzed all existing UI patterns across five key modules.
  • Structure Definition
    Built atomic design hierarchy and component taxonomy.
  • Design & Documentation
    Created scalable library in Figma, published live documentation in Zeroheight.
  • Integration & Testing
    Partnered with devs to test and refine components in production.
  • Evolution & Maintenance
    Established versioning (V 6→V 9.2) and continuous improvement cycle.
The steps I carried out in the design process:
  • Defined scalable UI components and interaction patterns to bring consistency across modules.
  • Applied WCAG 3.0 accessibility principles from the start to ensure inclusive design.
  • Documented guidelines for layout, typography, colors, spacing, and responsive behavior.
  • Built and tested interactive prototypes in Figma to validate components in real workflows.

(06) ARCHITECTURE

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.

(07) DELIVERABLES

DELIVERABLES

  • Multi-brand component library
    We are a leading firm in providing quality and value to our customers.
  • Governance model
    Each member of our team has at least 5 years of legal experience.
  • UI Guidelines
    Our managers are always ready to answer your questions. You can call us during the weekends and at night.
  • Zeroheight Documentation
    We like to make people happy. We ask our clients about their birthday and prepare cool presents.

(08) OUTCOME

OUTCOME

“
Flexibility ensures longevity when technology and teams evolve.
2017:
Kantar Retail UI Guidelines and Kantar Retail Design System
This was the first atomic design system, prototyped in Sketch and Invision. The UI guidelines were written and released on SharePoint.
2019:
Kantar Consulting Design System
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.
2022:
Kantar XTEL Design System
This involved transferring the previous design system from Sketch to Adobe XD, with new, upgraded components for mobile applications.
2024:
XTEL Design System
This design system was completely redesigned and upgraded with new branding guidelines, and released in Figma.

(09) VISUAL GALLERY

VISUAL GALLERY

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.
STORY
  • 2017: Kantar Retail UI Guidelines and Kantar Retail Design System
    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.
  • 2019: Kantar Consulting Design System
    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.
  • 2021: UI Design Library for XTEL Sales Force Application
    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.
  • 2022: Kantar XTEL Design System
    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.
  • 2024: XTEL Design System
    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.

(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:
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.
I love building systems that bring structure and beauty to complex digital ecosystems.
Let’s Connect on LinkedIn
Made on
Tilda