Ketea S.A.

Product Design
Frontend

Diseño de un dashboard de control para un e-commerce industrial orientado a equipos técnicos de alto valor (PLC, sensores, válvulas y controladores). El objetivo fue construir una herramienta que permita entender el negocio en tiempo real, reduciendo la fragmentación de información entre ventas, marketing y operación.

Ketea S.A. cover

Plataforma

Dashboard operativo interno

Industria

Retail técnico / B2B industrial

Usuarios

Equipos de negocio y operaciones

Rol

Product Design + Frontend

Alcance

UX/UI Design · Product Thinking · Prototipo frontend

Mercado

B2B / Industrial

Duración

3 semanas

El Problema

Diagnóstico

El negocio contaba con múltiples métricas, pero no con una estructura clara que permitiera interpretarlas. La información estaba fragmentada y no respondía a preguntas concretas.

Insights clave

  • Sobrecarga de datos sin jerarquía.
  • Falta de separación entre áreas (ventas, marketing, operación).
  • Métricas sin contexto ni conexión entre sí.
  • Dificultad para detectar problemas rápidamente.

Investigación

Análisis de dashboards y comportamiento de lectura

Se analizaron dashboards existentes, productos SaaS y patrones de lectura de usuarios de negocio para entender cómo sintetizar información compleja en vistas rápidas de escaneo.

12

Dashboards y referentes analizados

3

Áreas de negocio modeladas

4

Insights accionables priorizados

Hallazgos clave

  • Los usuarios no leen dashboards completos: escanean.
  • El insight principal define la interpretación del resto.
  • Mezclar métricas de distintas áreas genera confusión.
  • La mayoría de decisiones se toman con 3 o 4 datos clave.

Estrategia

Separar el dashboard por decisiones, no por métricas

En lugar de agrupar información por tipo de dato, se definió una estructura basada en preguntas de negocio. La decisión clave fue dividir el sistema en 3 vistas: Overview (estado general), Sales (ventas y conversión) y Marketing (adquisición y eficiencia de canales).

Cada vista responde una única pregunta

La navegación deja de ser una lista de widgets y pasa a ser un sistema de decisiones.

El insight define la lectura

Cada pantalla abre con una conclusión para orientar la interpretación.

Reducir antes que agregar

Se removieron bloques redundantes para evitar ruido y fatiga visual.

Claridad sobre completitud

Se priorizaron datos accionables por encima de la acumulación de métricas.

Tres vistas, tres preguntas de negocio

La estrategia del producto se resolvió separando la lectura del negocio en tres vistas principales: Overview, Sales y Marketing. Cada una responde una pregunta distinta y evita mezclar métricas que pertenecen a decisiones diferentes.

  • Overview → ¿Cómo va el negocio hoy y dónde debo mirar?
  • Sales → ¿Qué se vende, quién compra y dónde se pierde conversión?
  • Marketing → ¿De dónde vienen las ventas y qué canal funciona mejor?

UX y arquitectura

Se diseñó una jerarquía donde cada pantalla pudiera entenderse en menos de 10 segundos, organizando cada vista en capas claras de lectura: insight principal, KPIs clave, bloques de análisis e insights accionables. La lógica del sistema se definió como: Overview (qué está pasando), Sales (por qué pasa) y Marketing (de dónde viene).

Flujo de lectura

El dashboard fue estructurado como un flujo de lectura progresivo: primero sintetiza el estado del negocio, luego muestra los indicadores clave y finalmente permite profundizar en bloques específicos de análisis.

Insight principal KPIs clave Bloques de análisis Insights accionables

Arquitectura de la información

La arquitectura de información se organizó alrededor de tres preguntas de negocio. En lugar de construir una navegación por módulos administrativos, el dashboard separa la información según el tipo de decisión que permite tomar.

Vistas del sistema

1

Overview: ¿Cómo va el negocio hoy y dónde debo mirar?

Vista ejecutiva para entender el estado general del negocio, detectar variaciones clave y priorizar dónde mirar primero.
2

Ventas: ¿Qué se está vendiendo, quién compra y dónde se rompe la conversión?

Vista para analizar productos, evolución de ingresos, funnel de conversión, segmentos de clientes y comportamiento de compra.
3

Marketing: ¿De dónde vienen las ventas y qué canal funciona mejor?

Vista para evaluar adquisición, revenue por canal, eficiencia de campañas y puntos de pérdida en el funnel de marketing.

Sistema visual e implementación

Sistema de diseño

Prototipo del dashboard Ketea

El sistema visual se construyó sobre shadcn/ui y Tailwind CSS para acelerar la implementación de componentes consistentes, accesibles y fáciles de mantener. A partir de esa base se adaptaron patrones propios del producto, como cards de métricas, tablas, gráficos, estados de alerta e insights accionables.

Prototipo implementado

Prototipo frontend desarrollado con React, Tailwind CSS y componentes reutilizables para validar la arquitectura de información, la jerarquía visual y la lectura de datos en un entorno navegable.

De datos a decisiones

El resultado es un dashboard que permite entender el estado del negocio en segundos, detectar rápidamente problemas de conversión, identificar canales eficientes y reducir la sobrecarga de información.

Mejora en la experiencia

  • Mayor claridad en la lectura ejecutiva.
  • Menor esfuerzo para interpretar métricas y detectar problemas.
  • Mejor toma de decisiones entre áreas.

Valor del producto

Base escalable

Estructura lista para crecer con nuevas métricas sin perder foco.

Sistema consistente

Mismo patrón de lectura en todas las vistas para acelerar adopción.

Alineación entre áreas

Ventas, marketing y operación comparten una misma lectura del negocio.

Impacto en el producto

Orden de información

La estructura reduce dispersión y concentra la atención en lo relevante.

Conexión entre datos y decisiones

Cada bloque responde una pregunta concreta del negocio.

Sistema reutilizable

La arquitectura permite sumar nuevos módulos sin rehacer el sistema.