01 The project in a minute

/ A platform to turn operational complexity into actionable insights

Smart Contact is a B2B SaaS platform built to centralize contact center monitoring, analytics, and operations management. It enables real-time activity tracking, KPI analysis, service configuration, user management, and tailored experiences to meet each organization's unique needs.

I worked on its creation and evolution for over five years, leading Product Design for the last four. My responsibilities spanned the entire product lifecycle: user research, functional definition, information architecture, user flows, wireframes, prototypes, branding, interface design, Design System, validation, handoff, and implementation follow-up.

The result was a modular, highly configurable, and scalable platform capable of consolidating massive volumes of data and adapting to different users, clients, brands, and markets.

Three key highlights

• My role: end-to-end design and leadership.

• The challenge: simplifying complex operations without losing depth.

• The result: a cohesive, configurable system built to scale.

02  Context

/From multiple standalone tools to a single product

The starting point was an ecosystem of several independent tools, each having evolved with its own architecture, navigation, branding, and look & feel. Features were split across products that did not communicate with each other, forcing users to log in with different credentials, constantly switch between tools, and rebuild context to complete a single task. This created friction, redundancies, and a fragmented experience.

We unified these tools within Smart Contact, creating a single point of entry with a shared architecture, visual identity, and interaction system. The new platform connected previously siloed features and data, centralized monitoring, analytics, and administration, while preserving the functional depth of each solution. The result was a cohesive, modular, and scalable experience.

03  The Design Challenge

/Simplifying complexity without sacrificing operational power

The challenge was not simply to redesign an interface. We needed to architect a structure capable of organizing diverse modules, user roles, permissions, and information hierarchies, all without passing that complexity on to the end user.

The solution had to address four core requirements simultaneously:

1. Clarity: Streamlining the digestion of high-volume, real-time data and status updates.

2. Flexibility: Empowering users to customize their workspace according to their specific goals.

3. Scalability: Supporting new features and modules without breaking the existing user experience.

4. Adaptability: Enabling the product to be easily white-labeled and deployed for different clients and operators without requiring custom design work for each rollout.

04 My role and responsibilities

/From discovery to production

I participated in the entire lifecycle of Smart Contact and led the Product Design team for the last four years. I worked alongside Product Managers, Engineering, Business, Support, and Operations to translate user and client needs into viable, consistent, and scalable solutions.

My work didn't end with delivering high-fidelity mockups. I supported every feature from its initial definition through to validation, documentation, implementation, and production review.

Process at a glance

Discovery → Research → Functional Definition → Architecture → Flows → Wireframes → Prototypes → UI → Validation → Handoff → QA → Evolution

Responsibilities

• Researching and understanding the operational context.

• Functional definition and prioritization alongside Product.

• Information architecture, user journeys, and flows.

• Wireframes, prototypes, and interaction design.

• Product branding and visual identity.

• Creation and evolution of the Design System.

• Design of the configurable dashboard and White Label system.

• Validation with users and stakeholders.

• Functional documentation and handoff.

• Continuous alignment with Development and UX/UI QA.

• Leadership and oversight of overall product consistency.

05 Discovery & Research

/Understanding Operations Before Designing the Interface

The process began by understanding how contact center operations worked and what decisions each user profile had to make. The research combined conversations with users and stakeholders, analysis of existing tools, and insights from Product, Support, and Operations.

This work allowed us to identify recurring tasks, navigation pain points, dependencies between modules, information needs, and technical or business constraints. Based on these findings, we translated unstructured needs into functional requirements and product priorities.

Research was not an isolated phase. Feedback from users, clients, and internal teams guided the evolution of Smart Contact throughout its entire lifecycle.

Key Findings

• Different user profiles did not need to see the same data.

• Reading speed was essential to detect operational deviations quickly.

• Navigation had to maintain context across modules and information hierarchy levels.

• New features required common patterns to prevent a fragmented experience.

• Personalization had to be solved through configuration, not custom development.

06 Information Architecture

/Building a Scalable Structure

One of the core challenges was organizing a platform with multiple services, navigation levels, and user permissions. We defined a unified architecture that enables quick information retrieval, maintains context, and allows for new features to be added without restructuring the navigation.

The structure separated monitoring, analysis, and administration tasks while maintaining clear relationships between dashboards, statistics, services, users, and settings. Roles and permissions determined what each user could view or modify, keeping the interface clean and free of irrelevant options.

Our goal was to keep the complexity under the hood, ensuring a seamless and intuitive user experience.

07 From Needs to Flows

Design the Logic First, Screens Second

Before defining the interface, we map out the steps, decisions, and states required to complete each task. User flows allowed us to anticipate dependencies, eliminate friction, and align the experience with the product's technical capabilities.

We focused particularly on key processes such as dashboard creation, widget configuration, viewing and filtering statistics, user management, and white-label customization.

Designing the logic before the layout helped us catch edge cases early and establish a shared vision across Product and Engineering.

08 Wireframes and iteration

/Turning user flows into a clear structure

Wireframes allowed us to explore different ways to organize navigation, structure information hierarchy, and map out complex interactions before diving into the final visual design.

We tested various layouts for dashboards, tables, filters, forms, and detail views. Each iteration was reviewed with Product and Engineering to ensure it met the original requirements and was technically feasible.

This process was particularly crucial for features with multiple states, complex configurations, or high information density.

09 Prototyping and Validation

/Validating behavior before building it

We created interactive prototypes to replicate complete user flows, test information hierarchy, and validate interactions before moving to development. This allowed us to evaluate tasks such as adding a widget, modifying its configuration, reorganizing a dashboard, or applying filters to large datasets.

Prototypes were reviewed with users, stakeholders, and technical teams. This feedback was used to refine steps, messaging, states, and behaviors before investing in final implementation.

Validation continued during development through functional reviews and UX/UI QA.

10 Interface Design

/An interface built to read, compare, and act

One of the main challenges was unifying several independent tools—each with its own interaction patterns and visual language—into a coherent, modular, and scalable experience. I designed over 700 core screens, along with hundreds of states, variants, and flows tailored to different features, operational contexts, and user profiles.

The UI needed to make large volumes of information digestible without sacrificing precision. To achieve this, I established a clear visual hierarchy that streamlined identifying statuses, comparing metrics, and locating actions within dashboards, tables, charts, filters, and complex forms.

I focused heavily on information density, consistent patterns, and system feedback. Empty states, errors, confirmations, and loading processes were designed as integral parts of the user journey. Legibility and contrast were also prioritised from the start to ensure data and controls remained clear across different configurations, devices, and white-label themes.

11 Design System

/Designing a system, not a collection of screens

To maintain consistency across Smart Contact during years of evolution, I designed and developed a scalable Figma Design System from scratch. This system unified the visual language and interaction patterns across the various tools, modules, and White Label identities that made up the product.

I built a library of over 350 reusable components and 1,200 variants, organized through foundations, design tokens, iconography, states, and interaction patterns. Its scope went far beyond basic buttons and input fields, including specific solutions for a data-intensive product such as tables, filters, charts, widgets, complex forms, selectors, navigation systems, and admin patterns.

Each component was designed with its various behaviors, sizes, states, and contexts of use in mind. The documentation established how it should be used, how it responded to interaction, and which variants to apply in each situation, streamlining the handoff and creating a shared language between Design, Product, and Engineering.

Implementing the system eliminated duplication and repetitive decision-making, reinforced consistency across hundreds of interfaces, and accelerated design, review, and implementation processes. Moreover, it provided a modular foundation ready to incorporate new features, extend existing tools, and scale future products without rebuilding the experience from scratch.

Impact

• Over 350 reusable components and 1,200 variants.

• A consistent experience across more than 700 main interfaces.

• Fewer duplications and isolated design solutions.

• Increased speed in design, review, handoff, and implementation processes.

• Shared patterns across Design, Product, and Engineering.

• A scalable foundation for new features, tools, and White Label identities.

12  Featured Feature: Customizable Dashboards and Tables

/From multiple separate tools to a single unified product

The Problem

Supervisors and administrators needed to monitor different services, teams, and metrics based on their specific roles and operational contexts. However, a rigid, static setup forced all users to work with the same data, widgets, and columns, creating cognitive clutter and making it difficult to find critical information.

The challenge was to deliver a high level of customization without fragmenting the user experience or designing bespoke interfaces for every user role.

The Solution

I designed a system of customizable dashboards and tables that allowed users to build their own workspaces and tailor the information to their specific workflows.

Users could create and save multiple dashboards, add widgets, select data sources and types, configure metrics, apply filters, and choose how to visualize information. They could also reorganize and resize widgets within a flexible grid to establish their own visual hierarchy.

This customization logic was extended to data tables. Users could configure which information to display, select and reorder columns, apply filters, and adapt the view to the specific analysis or task at hand.

Each widget and table element functioned as a reusable component, yet they had to work seamlessly across various sizes, configurations, visualizations, and states. The design system had to maintain readability, hierarchy, and consistency regardless of user choices.

Key Capabilities

• Create, name, and save multiple dashboards.

• Add, remove, reorder, and resize widgets.

• Select data sources, entities, and metrics.

• Choose from different sizes and visualization types.

• Display aggregated or detailed data views.

• Apply filters by service, direction, channel, or other criteria.

• Configure column visibility and layout order in tables.

• Adapt each view to different roles, tasks, and objectives.

• Access real-time data and activity updates.

The Impact

This solution transformed static dashboards and tables into highly personalized workspaces. Users could prioritize the data most relevant to their operations and build custom views without requiring custom development work.

This modular approach successfully catered to multiple user personas and use cases through a single system, eliminating the need for independent interfaces while keeping the experience consistent as the product scaled.

13  Handoff, results, and key learnings

/Designing the system and ensuring successful deployment

Each feature was accompanied by functional documentation, interaction specifications, states, and behavior criteria. Handoffs were conducted in close collaboration with the Engineering team to resolve queries, address edge cases, and adapt the solution to technical constraints.

During implementation, I reviewed staging environments, compared the build against the design, and performed UX/UI QA. This continuous cycle helped detect deviations, maintain system consistency, and ensure that UX decisions translated perfectly into production.

What it solved

Smart Contact resolved the fragmentation caused by multiple standalone tools, each with its own access, interaction patterns, and data structures. It centralized operations into a unified experience, making it easier for supervisors, admins, and agents to find, interpret, and manage critical information.

It also replaced rigid interfaces and custom workarounds with a modular architecture, configurable dashboards and tables, a shared Design System, and a White Label framework ready for different clients and brands.

Key outcomes

• Unified experience: Resolved fragmentation across multiple standalone tools, centralizing monitoring, data, and administration without sacrificing functional depth.

• Modular architecture: Prevented new features from being treated as isolated workarounds, enabling structured, scalable product growth.

• Common navigation and hierarchy: Reduced information overload, making it easy to locate data, states, and actions within complex interfaces.

• Configurable dashboards and tables: Solved the limitations of fixed views by allowing metrics, widgets, columns, and filters to be tailored to different user roles and operations. This flexibility improved the commercial appeal of Smart Contact, making it easy to offer the same platform to clients with distinct needs without relying on custom development for each deployment.

• Greater user autonomy: Reduced reliance on custom configurations or development to organize data and workspaces.

• Shared Design System: Reduced duplication, inconsistencies, and repetitive decision-making across more than 700 core interfaces.

• Reusable components and patterns: Accelerated design, review, handoff, and implementation processes for new features.

• Configurable White Label system: Replaced manual branding for each client, enabling faster, agile deployments across different brand identities.

• Documentation and continuous engineering collaboration: Minimized queries, deviations, and rework during implementation.

• UX/UI QA before deployment: Helped catch discrepancies between design and development, ensuring a polished final product.

• Shared language across Design, Product, and Engineering: Streamlined team coordination and accelerated decision-making.

• More consistent and predictable experience: Shortened the learning curve for new users and simplified onboarding across different modules.

• Enhanced commercial adaptability: Combining configurable dashboards, modular architecture, and White Label capabilities allowed Smart Contact to scale across various industries, clients, and operating models—significantly reducing the cost and time needed to customize each setup.

Key learnings

Smart Contact taught me that solving complex products isn't about stacking screens, but about building principles, patterns, and structures capable of absorbing growth. I learned to simplify without stripping away operational depth, making design decisions that not only solved immediate needs but also supported the long-term evolution of the product.

It also solidified my end-to-end design process, ensuring Design remains active throughout the entire product lifecycle: from research and problem definition to handoff, implementation tracking, production release, and post-launch optimization.

The most impactful outcome wasn't a specific interface, but a system built to evolve seamlessly without losing cohesion.