CUSTOM METRICS
Rediseño de Custom Metrics: crear, etiquetar y visualizar datos personalizados con entradas flexibles, agregaciones y tendencias.
INTRODUCCIÓN
La función de custom metrics permite a los usuarios crear métricas a medida mediante fórmulas basadas en datos predefinidos (p. ej. ingresos, impresiones, coste del servicio), ayudándoles a medir el rendimiento en línea con sus objetivos de negocio. Aunque la función ya estaba en producción, algunos problemas de usabilidad limitaban su adopción y eficiencia. Este proyecto mejoró la experiencia resolviendo esos problemas, manteniendo intacta la funcionalidad principal de las custom metrics.
PROYECTO
El proyecto se centró en rediseñar cómo los usuarios crean, exploran y gestionan las Custom Metrics dentro del dashboard builder de Swydo — pasando de una desorientadora página de configuración a pantalla completa a un panel (drawer) contextual, con un nuevo editor de fórmulas, una tabla de resumen más ligera y puntos de entrada más claros para añadir o editar una métrica.
DESAFÍO
La investigación reveló varios pain points recurrentes:
Pérdida de contexto: la página de configuración a pantalla completa desorientaba a los usuarios que llegaban desde un widget.
Empezar de cero: los usuarios tenían que reconstruir su selección de datos incluso cuando ya llegaban con contexto.
Sin un punto de entrada claro: no estaba claro dónde añadir o editar una métrica, y el propio botón de añadir era fácil de pasar por alto.
Tablas densas y con ruido visual: la tabla de métricas mostraba filas demasiado grandes, con información en su mayoría irrelevante.
MI ROL
Trabajé como Product Designer en este proyecto de principio a fin — llevando a cabo la investigación de usabilidad, definiendo los casos de uso y los criterios de aceptación, y diseñando el nuevo flujo de creación basado en drawer, el editor de fórmulas y la tabla de métricas, en estrecha colaboración con product management e ingeniería.
PROBLEMAS CLAVE
Modo a pantalla completa
El modo a pantalla completa provoca pérdida de contexto: los usuarios se sienten desorientados al entrar en la página de configuración de custom metrics porque pierden el contexto de su flujo de trabajo anterior.
A los usuarios les cuesta encontrar los datos correctos
Los usuarios tienen que empezar de cero al seleccionar los data points, incluso cuando llegan desde la configuración de un widget.
Sin claridad sobre dónde añadir/editar métricas
Los usuarios se confunden al entrar por primera vez en la página de configuración, ya que no está claro por dónde empezar.
Posición del botón de custom metric
Los usuarios se confunden al entrar por primera vez en la página de configuración, ya que no está claro por dónde empezar.
Opción de desplazar y seleccionar categorías
La lista de categorías en el modal de Custom Metrics puede resultar confusa: los usuarios pueden añadir métricas a cualquier categoría, pero solo las ven en los widgets que usan esa categoría. Limitar las categorías visibles según el punto de entrada podría mejorar la claridad.
Opción de añadir una categoría
Los usuarios pueden añadir una categoría desde esta vista, pero el botón está oculto y carece de contexto. Probablemente sea innecesario y puede confundir a quienes lo confunden con 'Add Custom Metric'.
Tabla de custom metrics
Las filas de la tabla de Custom Metric son demasiado grandes y muestran demasiada información irrelevante. Lo que los usuarios quieren principalmente es una vista rápida de la fórmula de cada métrica creada. La mayoría de los detalles mostrados por fila no son necesarios en esta fase, o se generan automáticamente durante la creación de la fórmula, y podrían permanecer ocultos hasta entonces.
SOLUCIÓN DE DISEÑO
Creación de una nueva Custom Metric
Desde la configuración del widget, los usuarios pueden acceder a la función de Custom Metrics desde la sección Dimension and Metrics.
Los usuarios pueden buscar Custom Metrics ya existentes con el menú desplegable, o añadir una nueva con el botón "Add Custom Metric" junto a la etiqueta. Al hacer clic se abre el drawer directamente en el nivel de Custom Metrics.
El drawer muestra una cabecera con el nombre de la integración, la fuente de datos y la categoría — coherente con la vista de configuración del widget. Ahora los usuarios solo pueden crear métricas para la categoría del widget.
Al hacer clic en "Add Custom Metric" o al arrastrar el tirador hacia arriba se revela el panel del editor de fórmulas. Los usuarios introducen un nombre, construyen la fórmula escribiendo o seleccionando métricas y operadores, definen el tipo (detectado automáticamente para métricas simples o seleccionable para múltiples) y establecen el impact.
Al hacer clic en "Save" se añade la métrica; al cerrar el panel se descartan los cambios. Los usuarios pueden escribir el nombre de la custom metric en el campo correspondiente, que se reflejará en la primera celda de su fila.
Los usuarios pueden acceder al listado de métricas haciendo clic en el botón Add metric o directamente en el campo de la fórmula — en esta demo solo se muestra la primera opción.
Al seleccionar una métrica, el desplegable se cierra, aparece un chip de validación, el chip de la métrica se añade al editor, Type e Impact se autocompletan y el botón Save se activa.
Tras añadir la primera métrica, los usuarios pueden escribir o seleccionar operadores desde el menú (algunos iconos siguen pendientes en el design system). Las fórmulas no válidas muestran mensajes de error y deben terminar con una métrica o un paréntesis de cierre: el guardado permanece deshabilitado hasta corregir la fórmula.
Los usuarios pueden escribir números directamente en el campo: si lo introducido no coincide con ninguna métrica, no aparece ningún desplegable, y al pulsar Intro el número se convierte en un chip.
Una vez completada la fórmula, aparece un mensaje de validación. Si la fórmula incluye dos métricas, los usuarios pueden seleccionar manualmente el Type entre un conjunto limitado de opciones válidas; para métricas simples, el Type se asigna automáticamente.
El Impact ahora se define directamente en el editor de fórmulas, en lugar de en la fila de la tabla.
Si una custom metric incluye métricas dinámicas, se guarda a nivel de fuente de datos: un mensaje sobre el campo de entrada informa al usuario de esta condición.
Vista general de las custom metrics en la nueva tabla
Una vez guardada la nueva custom metric, los usuarios la ven en la tabla. Desde esta vista general solo podrán leer la información: para editarla, hacen clic en los tres puntos y seleccionan "Edit".
Los usuarios podrían crear fórmulas muy largas en cada celda de fila, por lo que parte del texto podría quedar oculto.
Al pasar el ratón por encima de la fórmula, aparecerá un tooltip que resume todo su contenido.
Como ahora el type se ha convertido en un icono, quienes no estén familiarizados con el elemento pueden pasar el cursor por encima y obtener un tooltip que explica de qué tipo se trata.
De igual modo, ahora que Impact (antes Comparison Change) se ha convertido en un icono, un tooltip al pasar el cursor explica su significado.
Al hacer clic en el icono de los tres puntos se abre un menú con dos opciones: Edit para modificar la custom metric y Delete para eliminarla de la lista.
Para eliminar una custom metric, los usuarios hacen clic en el menú de los tres puntos, seleccionan Delete y confirman la acción en un diálogo emergente estándar.
Cuando el número de filas supera la altura máxima de la lista, el contenido se vuelve desplazable: los usuarios pueden desplazarse dentro de la lista para llegar a la custom metric deseada. Esta elección busca mantener la lista en su sitio y dejar siempre visible el botón de añadir custom metrics.
Aplicar la nueva custom metric al widget
Cuando los usuarios buscan entre las métricas disponibles, encuentran las custom metrics en el desplegable que aparece debajo del selector de Custom Metric.
Al buscar, los usuarios encuentran las Custom Metrics disponibles en el desplegable debajo del selector de Custom Metric.
Al seleccionar una custom metric, aparece un chip debajo de la etiqueta de métricas.
Una vez definidas y aplicadas, las custom metrics se ven a nivel de configuración del widget, en la etiqueta debajo de dimensions and metrics.
