01 El proyecto en un minuto

/ Una plataforma para convertir la complejidad operativa en información útil

Smart Contact es una plataforma SaaS B2B creada para centralizar la monitorización, la analítica y la administración de operaciones de contact center. Permitía consultar actividad en tiempo real, analizar indicadores, configurar servicios, gestionar usuarios y adaptar la experiencia a las necesidades de cada organización.

Trabajé en su creación y evolución durante más de cinco años y lideré Product Design durante los últimos cuatro. Mi responsabilidad abarcó todo el ciclo de producto: investigación, definición funcional, arquitectura de información, flujos, wireframes, prototipos, branding, diseño de interfaz, Design System, validación, handoff y seguimiento de la implementación.

El resultado fue una plataforma modular, configurable y escalable, capaz de concentrar grandes volúmenes de información y adaptarse a distintos usuarios, clientes, marcas y mercados.

Tres destacados

• Mi papel: diseño y liderazgo end-to-end.

• El desafío: simplificar una operativa compleja sin perder profundidad.

• El resultado: un sistema coherente, configurable y preparado para crecer.

02  Contexto

/De varias herramientas independientes a un único producto

El punto de partida era un ecosistema formado por varias herramientas independientes. Cada una había evolucionado con su propia arquitectura, navegación, branding y look & feel. Las funcionalidades estaban repartidas entre productos que no se comunicaban entre sí, por lo que los usuarios debían acceder con credenciales diferentes, cambiar constantemente de herramienta y reconstruir el contexto para completar una misma tarea. Esto generaba fricción, duplicidades y una experiencia fragmentada.

Unificamos esas herramientas dentro de Smart Contact, creando un único punto de acceso y una arquitectura, una identidad visual y un sistema de interacción comunes. La nueva plataforma conectó funcionalidades y datos antes aislados, centralizó la monitorización, la analítica y la administración y mantuvo la profundidad funcional de cada solución. El resultado fue una experiencia coherente, modular y preparada para crecer.

03  El Reto de diseño

/Simplificar sin reducir la capacidad operativa

El reto no consistía únicamente en rediseñar una interfaz. Debíamos construir una estructura capaz de organizar diferentes módulos, perfiles, permisos y niveles de información, sin trasladar toda esa complejidad a las personas que utilizaban el producto.

La solución tenía que responder simultáneamente a cuatro necesidades:

1. Claridad: facilitar la lectura de grandes volúmenes de datos y estados en tiempo real.

2. Flexibilidad: permitir que cada usuario configurara su espacio según sus objetivos.

3. Escalabilidad: incorporar nuevas funcionalidades sin romper la experiencia existente.

4. Adaptabilidad: comercializar el producto para diferentes clientes y operadores sin rediseñarlo en cada implantación.

04 Mi rol y responsabilidades

/Del descubrimiento a producción

Participé en todo el ciclo de vida de Smart Contact y, durante los últimos cuatro años, lideré el equipo de Product Design. Trabajé junto a Product Managers, Ingeniería, Negocio, Soporte y Operaciones para convertir necesidades de usuarios y clientes en soluciones viables, consistentes y escalables.

Mi trabajo no terminaba con la entrega de las pantallas. Acompañaba cada funcionalidad desde su definición inicial hasta la validación, documentación, implementación y revisión en producción.

Proceso resumido

Discovery → Research → Definición funcional → Arquitectura → Flujos → Wireframes → Prototipos → UI → Validación → Handoff → QA → Evolución

Responsabilidades

• Investigación y comprensión del contexto operativo.

• Definición funcional y priorización junto a Producto.

• Arquitectura de información, journeys y flujos.

• Wireframes, prototipos y diseño de interacción.

• Branding e identidad visual del producto.

• Creación y evolución del Design System.

• Diseño del dashboard configurable y del sistema White Label.

• Validación con usuarios y stakeholders.

• Documentación funcional y handoff.

• Seguimiento con Desarrollo y QA de UX/UI.

• Liderazgo y supervisión de la coherencia global del producto.

05 Discovery e investigación

/Comprender la operativa antes de diseñar la interfaz

El proceso comenzó entendiendo cómo funcionaban las operaciones de contact center y qué decisiones debía tomar cada perfil. La investigación combinó conversaciones con usuarios y stakeholders, análisis de las herramientas existentes y conocimiento procedente de Producto, Soporte y Operaciones.

Este trabajo permitió identificar tareas recurrentes, problemas de navegación, dependencias entre módulos, necesidades de información y restricciones técnicas o comerciales. A partir de esos hallazgos, convertimos necesidades poco estructuradas en requisitos funcionales y prioridades de producto.

La investigación no fue una fase aislada. El feedback de usuarios, clientes y equipos internos acompañó la evolución de Smart Contact durante toda su vida.

Hallazgos principales

• Los distintos perfiles no necesitaban ver los mismos datos.

• La rapidez de lectura era esencial para detectar desviaciones operativas.

• La navegación debía mantener contexto entre módulos y niveles de información.

• Las nuevas funcionalidades necesitaban patrones comunes para evitar una experiencia fragmentada.

• La personalización debía resolverse mediante configuración, no mediante desarrollos específicos.

06 Arquitectura de información

/Construir una estructura que pudiera crecer

Uno de los principales trabajos fue organizar una plataforma con múltiples servicios, niveles de navegación y permisos. Definimos una arquitectura común que permitiera localizar rápidamente la información, mantener el contexto y añadir nuevas funcionalidades sin reconstruir la navegación.

La estructura separaba las tareas de supervisión, análisis y administración, pero mantenía relaciones claras entre dashboards, estadísticas, servicios, usuarios y configuración. Los roles y permisos determinaban qué podía consultar o modificar cada persona, evitando sobrecargar la interfaz con opciones irrelevantes.

El objetivo era que la complejidad permaneciera en el sistema y no en la experiencia del usuario.

07 De las necesidades a los flujos

Diseñar primero la lógica, después las pantallas

Antes de definir la interfaz, representamos los pasos, decisiones y estados necesarios para completar cada tarea. Los flujos nos permitieron anticipar dependencias, reducir pasos innecesarios y alinear la experiencia con las posibilidades técnicas del producto.

Trabajamos especialmente en procesos como la creación de dashboards, la configuración de widgets, la consulta y filtrado de estadísticas, la gestión de usuarios y la personalización White Label.

Diseñar la lógica antes que la apariencia nos ayudó a detectar problemas en una fase temprana y a compartir una visión común con Producto y Desarrollo.

08 Wireframes e iteración

/Convertir los flujos en una estructura clara

Los wireframes permitieron explorar diferentes maneras de organizar la navegación, jerarquizar la información y resolver interacciones complejas antes de trabajar el lenguaje visual definitivo.

Probamos distintas configuraciones para dashboards, tablas, filtros, formularios y vistas de detalle. Cada iteración se revisaba con Producto y Desarrollo para comprobar que respondía a la necesidad original y era viable dentro de la arquitectura técnica.

Este proceso fue especialmente importante en aquellas funcionalidades con numerosos estados, opciones de configuración o grandes densidades de información.

9 Prototipado y validación

/Validar el comportamiento antes de construirlo

Creamos prototipos navegables para reproducir procesos completos, comprobar la jerarquía de información y validar interacciones antes de pasar a desarrollo. Esto permitió evaluar tareas como añadir un widget, modificar su configuración, reorganizar un dashboard o aplicar filtros sobre grandes conjuntos de datos.

Los prototipos se revisaban con usuarios, stakeholders y equipos técnicos. El feedback servía para ajustar pasos, mensajes, estados y comportamientos antes de invertir en la implementación definitiva.

La validación continuaba durante el desarrollo mediante revisiones funcionales y QA de UX/UI.

10 Diseño de interfaz

/Una interfaz diseñada para leer, comparar y actuar

Uno de los principales retos fue convertir varias herramientas independientes, cada una con sus propios patrones de interacción y lenguaje visual, en una experiencia coherente, modular y escalable. Diseñé más de 700 interfaces principales, además de cientos de estados, variantes y flujos adaptados a diferentes funcionalidades, contextos operativos y perfiles de usuario.

La interfaz debía hacer comprensibles grandes volúmenes de información sin perder precisión. Para ello, definí una jerarquía visual que facilitaba identificar estados, comparar indicadores y localizar acciones dentro de dashboards, tablas, gráficas, filtros y formularios complejos.

Trabajé especialmente la densidad de información, la consistencia de los patrones y el feedback del sistema. Los estados vacíos, errores, confirmaciones y procesos de carga se diseñaron como parte integral de la experiencia. La legibilidad y el contraste también se incorporaron desde el inicio para garantizar la claridad de los datos y controles en diferentes configuraciones, dispositivos e identidades White Label.

11 Design System

/Diseñar un sistema, no una colección de pantallas

Para mantener la coherencia de Smart Contact durante años de evolución, diseñé y desarrollé desde cero un Design System escalable en Figma. El sistema permitió unificar el lenguaje visual y los patrones de interacción de las diferentes herramientas, módulos e identidades White Label que formaban parte del producto.

Construí una biblioteca con más de 350 componentes reutilizables y 1.200 variantes, organizada mediante foundations, tokens de diseño, iconografía, estados y patrones de interacción. Su alcance iba más allá de botones y campos básicos: incluía soluciones específicas para un producto intensivo en datos, como tablas, filtros, gráficas, widgets, formularios complejos, selectores, sistemas de navegación y patrones de administración.

Cada componente contemplaba sus diferentes comportamientos, tamaños, estados y contextos de uso. La documentación establecía cómo debía utilizarse, cómo respondía ante la interacción y qué variantes aplicar en cada situación, facilitando el handoff y creando un lenguaje compartido entre Diseño, Producto y Desarrollo.

La implantación del sistema redujo duplicidades y decisiones repetidas, reforzó la consistencia a través de cientos de interfaces y aceleró los procesos de diseño, revisión e implementación. Además, proporcionó una base modular preparada para incorporar nuevas funcionalidades, extender las herramientas existentes y conectar futuros productos sin tener que reconstruir la experiencia desde cero.

Impacto

• Más de 350 componentes reutilizables y 1.200 variantes.

• Una experiencia coherente a través de más de 700 interfaces principales.

• Menos duplicidades y soluciones diseñadas de forma aislada.

• Mayor velocidad en los procesos de diseño, revisión, handoff e implementación.

• Patrones compartidos entre Diseño, Producto y Desarrollo.

• Una base escalable para nuevas funcionalidades, herramientas e identidades White Label.

12  Funcionalidad destacada: Dashboards y tablas configurables

/De varias herramientas independientes a un único producto

Problema

Cada supervisor o administrador necesitaba controlar servicios, equipos e indicadores diferentes según su responsabilidad y contexto operativo. Sin embargo, una configuración fija obligaba a todos los perfiles a trabajar con los mismos datos, widgets y columnas, generando ruido y dificultando la localización de la información realmente relevante.

El reto consistía en permitir un alto nivel de personalización sin fragmentar la experiencia ni diseñar una interfaz específica para cada usuario.

Solución

Diseñé un sistema de dashboards y tablas configurables que permitía a cada usuario construir su propio espacio de trabajo y adaptar la información a sus necesidades.

Los usuarios podían crear y guardar varios dashboards, añadir widgets, seleccionar el origen y el tipo de dato, configurar métricas, aplicar filtros y decidir cómo visualizar la información. También podían reorganizar y redimensionar los widgets dentro de una retícula flexible para establecer su propia jerarquía de seguimiento.

Esta lógica de personalización se trasladó también a las tablas. Cada usuario podía configurar qué información mostrar, seleccionar y ordenar columnas, aplicar filtros y adaptar la vista al tipo de análisis o tarea que necesitaba realizar.

Cada widget y cada elemento de las tablas funcionaban como unidades reutilizables, pero debían convivir con diferentes tamaños, configuraciones, visualizaciones y estados. El sistema tenía que mantener la legibilidad, la jerarquía y la coherencia independientemente de las decisiones tomadas por el usuario.

Capacidades principales

• Crear, nombrar y guardar múltiples dashboards.

• Añadir, eliminar, reordenar y redimensionar widgets.

• Seleccionar fuentes de información, entidades y métricas.

• Elegir entre diferentes tamaños y visualizaciones.

• Mostrar datos acumulados o desglosados.

• Aplicar filtros por servicio, dirección, canal u otros criterios.

• Configurar las columnas y el orden de las tablas.

• Adaptar cada vista a distintos perfiles, tareas y objetivos.

• Consultar datos y actividad actualizados en tiempo real.

Resultado

La solución transformó dashboards y tablas estáticas en herramientas de trabajo personalizables. Cada usuario podía priorizar la información relevante para su operación y construir distintas vistas sin depender de desarrollos específicos.

Esto permitió responder a múltiples perfiles y contextos mediante un único sistema modular, reduciendo la necesidad de crear interfaces independientes y manteniendo una experiencia consistente a medida que el producto crecía.

13  Handoff, resultados y aprendizajes

/Diseñar el sistema y asegurar su llegada a producción

Cada funcionalidad se acompañaba de documentación funcional, especificaciones de interacción, estados y criterios de comportamiento. El handoff se realizaba en colaboración directa con Desarrollo para resolver dudas, revisar casos no contemplados y adaptar la solución cuando aparecían restricciones técnicas.

Durante la implementación revisaba los entornos de prueba, comparaba el resultado con el diseño y realizaba QA de UX/UI. Esta continuidad permitía detectar desviaciones, mantener la coherencia del sistema y asegurar que las decisiones de experiencia llegaran correctamente a producción.

Qué solucionó

Smart Contact resolvió la fragmentación provocada por varias herramientas independientes, cada una con accesos, patrones de interacción e información diferentes. Centralizó la operación en una experiencia común y facilitó que supervisores, administradores y agentes pudieran encontrar, interpretar y gestionar la información relevante para su trabajo.

También sustituyó interfaces rígidas y adaptaciones específicas por una arquitectura modular, dashboards y tablas configurables, un Design System compartido y un sistema White Label preparado para diferentes clientes y marcas.

Resultados clave

• Experiencia unificada: resolvió la fragmentación entre varias herramientas independientes y centralizó la monitorización, los datos y la administración sin perder profundidad funcional.

• Arquitectura modular: evitó que cada nueva funcionalidad tuviera que plantearse como una solución aislada y permitió que el producto creciera de forma ordenada.

• Navegación y jerarquía comunes: redujeron la dispersión de la información y facilitaron localizar datos, estados y acciones dentro de interfaces complejas.

• Dashboards y tablas configurables: solucionaron la rigidez de las vistas fijas y permitieron adaptar métricas, widgets, columnas y filtros a diferentes perfiles y operaciones. Esta flexibilidad amplió el encaje comercial de Smart Contact, ya que facilitaba ofrecer la misma plataforma a clientes con necesidades distintas sin depender de desarrollos específicos para cada implantación.

• Mayor autonomía para los usuarios: redujo la dependencia de configuraciones o desarrollos específicos para organizar sus datos y espacios de trabajo.

• Design System compartido: redujo duplicidades, inconsistencias y decisiones repetidas a través de más de 700 interfaces principales.

• Patrones y componentes reutilizables: aceleraron los procesos de diseño, revisión, handoff e implementación de nuevas funcionalidades.

• Sistema White Label configurable: sustituyó las adaptaciones manuales para cada cliente y permitió realizar implantaciones más ágiles con diferentes identidades.

• Documentación y colaboración continua con Desarrollo: redujeron dudas, desviaciones y retrabajo durante la implementación.

• QA de UX/UI antes de producción: permitió detectar diferencias entre diseño y desarrollo y asegurar la coherencia del resultado final.

• Lenguaje compartido entre Diseño, Producto y Desarrollo: mejoró la coordinación entre equipos y facilitó la toma de decisiones.

• Experiencia más consistente y predecible: redujo la curva de aprendizaje para nuevos usuarios y facilitó el uso de diferentes módulos.

• Mayor capacidad de adaptación comercial: la combinación de dashboards configurables, arquitectura modular y White Label permitió presentar Smart Contact como una solución adaptable a diferentes sectores, clientes y modelos operativos, reduciendo el coste y el tiempo necesarios para personalizar cada implantación.

Aprendizajes

Smart Contact me enseñó que los productos complejos no se resuelven acumulando pantallas, sino construyendo principios, patrones y estructuras capaces de absorber el crecimiento. Aprendí a simplificar sin eliminar profundidad operativa y a tomar decisiones que no solo resolvieran una necesidad inmediata, sino que también pudieran sostener la evolución futura del producto.

También consolidé una forma de trabajar en la que Diseño participa durante todo el ciclo: desde la investigación y la definición del problema hasta el handoff, el seguimiento de la implementación, la llegada a producción y el aprendizaje posterior al lanzamiento.

El resultado más importante no fue una interfaz concreta, sino un sistema capaz de evolucionar sin perder coherencia.