01. El proyecto en un minuto

/Una fotografía rápida del proyecto

Antes de entrar en el caso completo, este resumen permite entender en menos de un minuto el producto, el reto, mi aportación y los resultados.

¿Qué es?

Agent es una familia de herramientas SaaS B2B cloud desde la que los agentes gestionaban llamadas, email, WhatsApp, Messenger, web chat, redes sociales y otros canales digitales. Agent se integraba en Smart Contact, Agent Mini funcionaba como una aplicación omnicanal independiente y Agent Lite concentraba la operativa telefónica en una barra vinculada al navegador principal.

¿Qué problema resolvimos?

La herramienta anterior obligaba a clientes con canales, CRM y operativas diferentes a trabajar con la misma aplicación de escritorio. Era compleja, requería instalación y formación y ocupaba una segunda pantalla completa, incluso para los agentes que solamente necesitaban gestionar llamadas.

¿Cuál fue mi papel?

Lideré el proyecto end-to-end durante cuatro años como responsable del equipo de Product Design / UX/UI, desde el Discovery y la contratación del equipo hasta el diseño, la validación, el handoff y el QA en producción.

¿Qué diseñé?

Una familia modular formada por Agent, Agent Mini y Agent Lite, cubriendo con cada versión las necesidades de nuestros clientes, junto con la arquitectura necesaria para gestionar telefonía, email, chat y mensajería digital: estados, colas, canales, conversaciones simultáneas, componentes y sincronización en tiempo real.

¿Qué impacto produjo?

Una familia de productos desplegada internacionalmente para cientos de clientes y miles de agentes, con implantaciones reducidas de varios días a aproximadamente 15–30 minutos y mejoras de productividad de hasta un 40% en determinadas operativas analizadas.

02. Contexto

/La capa operativa de nuestra plataforma de monitorización

Smart Contact era nuestra plataforma de monitorización, analítica y gestión del contact center. Desde ella, los supervisores podían entender qué estaba ocurriendo en la operación, consultar estadísticas, seguir llamadas y comunicaciones, analizar el rendimiento de los agentes y generar informes.

Agent era la herramienta operativa utilizada por los agentes para gestionar las comunicaciones. Inicialmente funcionaba fuera de nuestro monitor Smart Contact y también era utilizada por clientes que trabajaban con CRM de terceros o sin ningún CRM adicional.

Agent forma parte del ecosistema de Smart Contact, nuestra plataforma para monitorizar y gestionar la actividad del contact center.
Ver el caso completo de Smart Contact →

Aunque ambas herramientas formaban parte de la misma operativa, su separación obligaba a muchos agentes a alternar entre aplicaciones y, con frecuencia, a dedicar una segunda pantalla exclusivamente a las comunicaciones.

03. El reto

/ Una única herramienta para operativas completamente diferentes

La herramienta anterior tenía una base amplia de clientes y muchas funcionalidades, pero presentaba problemas importantes de usabilidad, integración y escalabilidad:

Usabilidad: una interfaz compleja y desactualizada que requería formación.

• Dependencia técnica: instalación, actualización y mantenimiento individual en cada ordenador.

• Producto sobredimensionado: una única solución para clientes con canales y operativas diferentes.

• Ineficiencia espacial: dependencia habitual de dos pantallas, incluso cuando el agente solo utilizaba telefonía.

• Escalabilidad limitada: despliegues lentos, mayor mantenimiento y dificultad para adaptar el producto a nuevos clientes.

La herramienta anterior había sido diseñada como una solución única para todos los clientes, aunque sus operativas, canales y entornos tecnológicos eran completamente diferentes.

El reto no consistía únicamente en rediseñar una interfaz: debíamos replantear el modelo del producto, adaptarlo a diferentes formas de trabajar y hacerlo escalable desde la nube.

04. Mi rol y responsabilidades

/Liderazgo end-to-end durante cuatro años

Lideré la estrategia y el diseño de la familia Agent desde su concepción hasta su evolución en producción. Trabajé con autonomía sobre las decisiones de diseño, validando la dirección estratégica con el Director de Producto.

También lideré el equipo de Product Design y UX/UI, participé en la contratación de nuevos perfiles y coordiné el proyecto con Product Managers, Comercial, Soporte, Operaciones, Sistemas y los equipos de desarrollo especializados en voz, email, mensajería y datos.

Mis principales responsabilidades fueron:

• Liderazgo de Discovery, benchmark e investigación de campo.

• Conceptualización de la estrategia y definición de las tres soluciones Agent.

• Arquitectura de información, user flows, wireframes, UI y prototipado.

• Design System, componentes específicos, iconografía y branding.

• Liderazgo, contratación y desarrollo del equipo UX/UI.

• Validación, documentación funcional, handoff y QA hasta producción.

Cada decisión de interacción debía funcionar dentro de una arquitectura capaz de gestionar miles de comunicaciones y mantener sincronizados Agent, los sistemas de distribución(tablas, KPIs…) y las herramientas de supervisión de Smart Contact.

05. Cómo identificamos la oportunidad

/Investigar antes de diseñar

El proyecto comenzó varios meses antes de comenzar a diseñar. Me reuní con el equipo Comercial para recopilar necesidades de clientes, analicé las principales soluciones del mercado y estudié cómo otros contact centers resolvían la telefonía y la omnicanalidad.

Después trasladamos la investigación al entorno real:

• Visitamos tres call centers diferentes.

• Observé directamente cómo trabajaban los agentes.

• Realicé entrevistas formales y conversaciones contextuales.

• Comparé operativas integradas en nuestro monitor Smart Contact con otras que utilizaban CRM externos o Agent de forma independiente.

• Analicé sectores, clientes y modelos de atención diferentes.

• Utilicé nuestro call center interno para contrastar rápidamente los hallazgos.

El research mostró que una parte muy importante de los clientes solo trabajaba con llamadas, pero seguía utilizando una herramienta omnicanal que ocupaba una pantalla completa.

06. Insight y principios de diseño

/Diseñar para el contexto, no para un usuario medio

El descubrimiento clave fue:

Los clientes no necesitaban una herramienta más grande con todas las capacidades disponibles; necesitaban acceder únicamente a las funciones adecuadas dentro de su contexto real de trabajo.

A partir de la investigación definimos cuatro principios:

1. Modularidad: adaptar el producto a diferentes canales, herramientas, operativas y entornos de trabajo, en lugar de obligar a todos los clientes a utilizar la misma solución.

2. Continuidad con la herramienta principal: permitir que el agente gestionara las comunicaciones sin abandonar su CRM, navegador o entorno habitual de trabajo.

3. Optimización del espacio: evitar el uso de dos pantallas cuando no fuera necesario y aprovechar mejor la superficie disponible para cada operativa.

4. Simplicidad y usabilidad: reducir pasos, mostrar únicamente las funciones necesarias y ampliar la interfaz solo cuando la tarea requiriera más información o contexto.

Estos principios convirtieron el rediseño de una interfaz en una decisión de producto: sustituir una aplicación monolítica por una familia de soluciones adaptables.

07. De los hallazgos a la arquitectura y los flujos

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

Antes de definir la UI, convertí los hallazgos del research en una arquitectura capaz de responder a diferentes canales, herramientas y operativas. El primer paso fue separar qué capacidades debían ser comunes, cuáles dependían del canal y qué formato necesitaba cada contexto de trabajo.

Trabajé con:

• Mapas funcionales para organizar canales, grupos, estados, colas y permisos.

• User flows para llamadas entrantes y salientes, transferencias, esperas, postllamada y tipificación.

• Diagramas de estados para contemplar cambios manuales, automáticos, errores y comunicaciones simultáneas.

• Wireframes de baja y alta fidelidad para validar jerarquía, densidad de información y comportamiento antes de diseñar la interfaz final.

• Prototipos interactivos para comprobar los flujos con el call center interno.

Este trabajo permitió detectar contradicciones antes del desarrollo, compartir una lógica común con Producto e Ingeniería y definir cómo debía adaptarse una misma funcionalidad a Agent, Agent Mini y Agent Lite.

08. La solución

/Una plataforma, tres formas de trabajar

Convertimos la aplicación monolítica en una familia modular de tres soluciones. Agent y Agent Mini compartían toda la funcionalidad omnicanal; Agent Lite concentraba las capacidades avanzadas de telefonía para las operativas que no necesitaban canales digitales.

• Agent: omnicanalidad integrada en Smart Contact.

• Agent Mini: omnicanalidad completa en una aplicación independiente.

• Agent Lite: operativa telefónica vinculada al navegador principal.

Las tres versiones podían convivir dentro de una misma organización, permitiendo que cada equipo utilizara el formato más adecuado para su operativa.

09. Agent

/La comunicación integrada dentro del monitor del contact center

Diseñé Agent para los clientes que utilizaban Smart Contact, nuestra plataforma para monitorizar y gestionar todo lo que ocurría en el contact center. En lugar de obligar al agente a abrir una herramienta separada, integré el acceso a todas las comunicaciones en una barra situada en la parte inferior de la plataforma.

Incluí toda la capacidad omnicanal: telefonía, email, WhatsApp, Messenger, web chat, redes sociales y otros canales de mensajería digital. Para cubrir esta complejidad diseñé más de 250 pantallas, estados y variantes de interacción, contemplando disponibilidad, colas, conversaciones simultáneas, llamadas entrantes y salientes, transferencias, esperas, grabaciones, transcripciones, postllamada, tipificación, errores y casos límite.

Diseñé la barra para que permaneciera compacta durante la operativa habitual y se expandiera cuando la interacción necesitaba más espacio. Así, el agente podía consultar los datos del cliente y gestionar la comunicación sin salir de su entorno de trabajo.

También diseñé la integración entre la actividad operativa y la supervisión para que los estados, grupos, llamadas, conversaciones y tiempos se actualizaran en los KPIs y tablas de Smart Contact en tiempo real.

Qué resolví

• Eliminé la separación entre el monitor y la herramienta de comunicaciones.

• Integré toda la operativa dentro de un único entorno.

• Mantuve visibles los datos y el contexto del cliente.

• Sincronicé la actividad del agente con la supervisión en tiempo real.

• Reduje el cambio entre aplicaciones y pantallas.

10. Agent Mini

/Toda la omnicanalidad en una herramienta independiente

Diseñé Agent Mini para trasladar las mismas capacidades omnicanales de Agent a una aplicación cloud completa y autónoma. No necesitaba Smart Contact, un CRM ni ninguna otra plataforma para funcionar: desde ella, el agente podía realizar llamadas y gestionar email, WhatsApp, Messenger, web chat, redes sociales y otras conversaciones digitales.

El reto no consistía en reducir funcionalidades, sino en reorganizarlas dentro de un formato mucho más compacto. Agent Mini mantenía estados, grupos, colas, agenda, contactos, historial, llamadas en espera, transferencias, grabaciones, transcripciones, tipificación y conversaciones simultáneas dentro de una interfaz vertical aproximadamente del tamaño de un teléfono.

Su formato permitía utilizarlo como única herramienta de comunicación o mantenerlo abierto junto a un navegador, un CRM o cualquier otra aplicación cuando el agente necesitaba consultar información adicional. De esta forma, liberaba espacio en la pantalla sin condicionar el entorno de trabajo del cliente.

Diseñé más de 200 pantallas, estados y variantes para adaptar toda la operativa omnicanal a este formato, incluyendo las experiencias específicas de agentes y supervisores.

Permitía utilizar Agent Mini sin Smart Contact y sin depender de un CRM externo.

Qué resolví

• Conservé toda la funcionalidad omnicanal en un formato compacto.

• Liberé espacio para trabajar con otras herramientas en una única pantalla.

• Ofrecí una solución completa a clientes que solo necesitaban la capa de comunicaciones.

• Facilité el uso del producto en diferentes entornos y operativas.

11. Agent Lite

/Toda la operativa telefónica vinculada al navegador principal

Diseñé Agent Lite como una barra vinculada al navegador web principal del agente. En ese navegador podía estar abierto el CRM, una herramienta interna o cualquier otra aplicación web utilizada durante la atención. Si el usuario movía o redimensionaba el navegador, Agent Lite se desplazaba y ajustaba con él.

La mayor parte de la operativa telefónica podía resolverse directamente desde la barra sin abandonar ni ocultar el contenido abierto en el navegador principal.

Cuando una tarea necesitaba más contexto —por ejemplo, consultar el historial—, diseñé la interfaz para que se expandiera automáticamente y reajustara el espacio disponible en el navegador principal. Al finalizar, recuperaba su tamaño compacto.

Diseñé más de 130 pantallas, estados y variantes para resolver la operativa telefónica en este formato, incluyendo llamadas entrantes y salientes, esperas, transferencias, agenda, historial, errores, postllamada y tipificación.

Este comportamiento permitió liberar una pantalla completa sin reducir la capacidad telefónica.

Mostrar únicamente lo necesario durante la operativa habitual y ampliar el espacio cuando la tarea requiriese más contexto.

Qué resolví

• Liberé una pantalla completa al concentrar la operativa telefónica en una barra vinculada al navegador.

• Mantuve visible el CRM o la herramienta principal durante toda la interacción.

• Adapté automáticamente Agent Lite al movimiento y redimensionado del navegador.

• Mostré únicamente las acciones necesarias durante la operativa habitual.

• Amplié la interfaz cuando una tarea requería más contexto y recuperé después su tamaño compacto.

• Conservé llamadas, esperas, transferencias, agenda, historial y tipificación dentro de un espacio mínimo.

12. De la instalación local al cloud

/Escalar sin instalar puesto por puesto

La herramienta anterior debía instalarse y actualizarse individualmente en cada ordenador. Una implantación podía exigir varios días de configuración, intervención técnica y formación.

Construimos Agent desde cero como una solución cloud accesible desde cualquier navegador. Cada agente entraba mediante sus credenciales y recibía automáticamente los canales, grupos, roles y permisos correspondientes.

El nuevo modelo permitió:

• Actualizaciones instantáneas y centralizadas.

• Incorporación ágil de nuevos agentes.

• Menor mantenimiento.

• Eliminación de versiones obsoletas.

• Escalado internacional.

• Mayor facilidad para trabajar en remoto.

Redujimos implantaciones que podían prolongarse durante varios días a una puesta en marcha de aproximadamente 15–30 minutos.

La posibilidad de trabajar con una sola pantalla en determinadas operativas reducía además la necesidad de hardware y mantenimiento adicional.

La transición al cloud no fue únicamente una decisión tecnológica: transformó la instalación, el mantenimiento y la capacidad de escalar la familia Agent internacionalmente.

13. Traducir la actividad del agente en estados fiables

/Conciliar canales con ritmos diferentes

Uno de los mayores retos fue diseñar un modelo de estados que conciliara la inmediatez de la telefonía con la naturaleza asíncrona de la mensajería.

Una llamada requería atención inmediata y ocupaba una capacidad exclusiva. Sin embargo, un agente podía mantener varias conversaciones digitales abiertas, pertenecer a diferentes grupos y continuar disponible para determinados canales.

Por tanto, mostrar únicamente “disponible” u “ocupado” no representaba correctamente lo que estaba sucediendo.

Diseñamos un sistema que relacionaba:

• El estado operativo del agente.

• Los canales disponibles.

• Las comunicaciones activas.

• La capacidad disponible por canal.

• Los grupos asignados.

• Las conversaciones pendientes.

El agente podía estar disponible, no disponible, en pausa, hablando, en postllamada, invisible o desconectado. Algunos cambios eran manuales y otros se activaban automáticamente al recibir una comunicación, finalizarla o perder la conexión.

Esta lógica mantenía sincronizada la actividad real del agente con los KPIs, tablas, grupos y sistemas de distribución utilizados por supervisión en Smart Contact.

El reto no era mostrar un estado, sino representar correctamente qué estaba haciendo el agente y qué capacidad conservaba en cada canal.

16. Validación continua

/Un call center real dentro de nuestra empresa

Disponer de un call center interno de diez agentes nos permitió probar el producto dentro de una operativa real antes de desplegarlo a clientes externos.

Trabajamos con:

• Entrevistas de usuario.

• Observación y grabación de sesiones.

• Pruebas de usabilidad con tareas concretas.

• Tests A/B y comparativas entre alternativas.

• Versiones beta utilizadas en el trabajo diario.

• Análisis de diferentes hábitos y modelos mentales.

• Dos o tres clientes piloto externos antes de ampliar el despliegue.

Las agentes utilizaban Agent, Agent Mini y Agent Lite, lo que nos permitía validar las tres experiencias en condiciones reales e iterar de forma continua.

La nueva interfaz redujo además la formación necesaria: una explicación aproximada de veinte minutos era suficiente para comenzar a utilizar las operaciones principales.

17. Design System y evolución

/Mantener tres productos sin triplicar el esfuerzo

Agent partía del Design System de Smart Contact, pero incorporaba patrones específicos de comunicación y un sistema visual oscuro que permitía distinguir rápidamente la capa operativa del entorno de supervisión.

La librería específica de la familia Agent incluía:

• Patrones de telefonía y mensajería.

• Cápsulas para llamadas, emails, chats y conversaciones activas.

• Estados del agente y capacidades por canal.

• Colas, notificaciones, esperas y errores.

• Componentes expandibles y comportamientos adaptativos.

• Atajos para las operaciones más frecuentes.

• Iconografía específica para canales, estados y acciones.

• Variantes adaptadas a Agent, Agent Mini y Agent Lite.

La base compartida permitió trasladar cada nueva funcionalidad a las tres soluciones sin mantener tres productos de diseño independientes.

El Design System no eliminó la complejidad: permitió gobernarla y evolucionarla de forma escalable.

18. Handoff y llegada a producción

/Diseñar la interacción y asegurar su implementación

Documenté la lógica funcional, los estados, las variantes, las restricciones y los casos límite necesarios para que varios equipos técnicos pudieran implementar una experiencia coherente.

Trabajé directamente con los equipos de desarrollo especializados en voz, datos, email, mensajería y sistemas durante refinamientos, handoff y desarrollo. Después realicé QA UX/UI para comprobar que los flujos, comportamientos y estados funcionaban correctamente en producción, resolviendo las incidencias y dudas directamente con los equipos de desarrollo.

Esta coordinación era especialmente importante porque una sola interacción podía depender de varios sistemas y debía reflejarse simultáneamente en Agent y en la información de agentes, tablas y KPIs de Smart Contact.

19. Impacto

/De una herramienta que necesitaba instalación a una plataforma cloud internacional y escalable

La familia Agent se desplegó internacionalmente y fue utilizada por cientos de clientes y miles de agentes. Las tres soluciones podían convivir dentro de una misma organización y adaptarse a diferentes equipos y operativas.

Resultados principales

• Implantaciones reducidas de varios días a aproximadamente 15–30 minutos.

• Actualizaciones instantáneas para todos los clientes.

• Formación inicial reducida a aproximadamente 20 minutos.

• Posibilidad de trabajar con una sola pantalla en determinadas operativas.

• Menor dependencia de monitores, instalaciones y mantenimiento.

• Mejoras de productividad de hasta un 40% en determinadas operativas analizadas.

• Adopción internacional por cientos de clientes y miles de agentes.

• Valoraciones muy satisfactorias en los cuestionarios anuales de calidad.

La solución simplificó la instalación, actualización y mantenimiento de los puestos de trabajo, al mismo tiempo que permitía adaptar el producto a una mayor variedad de necesidades comerciales.

El proyecto recibió además un reconocimiento interno por su impacto y capacidad de escalado.

20. Aprendizajes

/Diseñar sistemas vivos, no interfaces estáticas

La familia Agent confirmó que la complejidad omnicanal no se resuelve mostrando todas las posibilidades al mismo tiempo. Se resuelve entendiendo el contexto, modelando correctamente los estados y construyendo una arquitectura capaz de adaptar la experiencia sin fragmentarla.

Durante cuatro años consolidé una forma de trabajar en la que Diseño participa en todo el ciclo: investigación, estrategia, arquitectura, interacción, validación, coordinación técnica, producción y evolución.

También aprendí que un Design System maduro no aporta únicamente consistencia visual. Permite mantener varias experiencias, coordinar equipos especializados y convertir cada nueva funcionalidad en una mejora escalable para todo el producto.

Diseñar la familia Agent significó equilibrar la inmediatez de la telefonía y la flexibilidad de la mensajería con una arquitectura modular capaz de adaptarse a las operativas y necesidades de cada cliente, convirtiendo esa flexibilidad en una mejor experiencia de uso y en una ventaja comercial para responder a un mercado diverso.

21. Cierre y navegación

/Conexión con Smart Contact

Agent resuelve la capa de interacción en tiempo real de la que depende cada agente del contact center. El caso de Smart Contact muestra la otra mitad del ecosistema: cómo construí y escalé el monitor, sus dashboards, su arquitectura y el Design System que ambos productos comparten.

Ver el caso de Smart Contact →