Giave
Hacer lo bastante claro un sistema complejo de gestión de maquinaria como para poder actuar — para la gente que lo usa cada día.
- Diseñadora UX/UI
- 2025
- Proyecto para cliente · 100x100net
- Admin interno + portal de cliente
- Investigación · Arquitectura de la información · UI · Traspaso a dev · QA
Una herramienta operativa, no una web.
Giave vende y mantiene maquinaria industrial. Su equipo necesitaba un solo lugar para ver cada cliente, cada máquina, los paquetes de servicio contratados y las horas que les quedan — y los clientes necesitaban su propia ventana a los mismos datos. Trabajé en ambas partes: el admin interno y el área de cliente, desde la investigación y el benchmarking hasta la interfaz, el traspaso a front-end y back-end y el QA del desarrollo.
Siete cosas conectadas, una decisión.
Cada pregunta de un trabajador cruza varias entidades a la vez. El problema real de diseño no era hacer pantallas más bonitas — era que esas relaciones se leyeran lo bastante rápido como para poder actuar.
- ?¿Qué máquinas tiene este cliente?
- ?¿Qué tipo de máquina es?
- ?¿Está en servicio ahora mismo?
- ?¿Quién es el técnico?
- ?¿Qué paquete ha contratado el cliente?
- ?¿Cuántas horas contratadas quedan?
- ?¿Hay algo que requiera atención?
- ?¿Qué es urgente — o está por llegar?
Dos puertas a los mismos datos.
El equipo y los clientes miran las mismas máquinas, paquetes e intervenciones — pero necesitan cosas distintas de ellas. El admin se organiza alrededor de gestionar muchos clientes; el área de cliente, alrededor de la flota de un solo cliente. Dentro de cada ficha de cliente, unas pestañas dejan la información relacionada a un clic en lugar de repartida por varias pantallas.
- Panel
- Clientes → General · Paquetes · Máquinas · Solicitantes · Documentos
- Paquetes → Ficha · Tareas
- Técnicos
- Configuración
- Panel
- Mis datos
- Solicitantes
- Máquinas
- Paquetes → Ficha
- Documentos
- Intervenciones
Filtra, no hagas scroll.
En lugar de mostrarlo todo a la vez, los listados usan filtros progresivos: tipo de cliente (empresa o particular), tipo de paquete (5 h, 10 h, garantía), estado del paquete, pago y técnico — y un único buscador que entiende nombres, NIF, números de pedido y máquinas. Los filtros seleccionados quedan marcados, así siempre sabes qué estás mirando.
Horas que se leen de un vistazo.
Los clientes contratan paquetes de servicio — 5 horas, 10 horas o garantía — y cada intervención consume tiempo. La interfaz lo convierte en una barra de progreso y una etiqueta de estado. El estado clave es «<2 h»: cuando un paquete está a punto de agotarse tiene que verse, porque alguien tiene que actuar. Por eso el rojo se reserva para eso — no se reparte por todas las etiquetas.
Compacto, tranquilo y honesto con la urgencia.
Barlow Condensed da carácter a los títulos y ahorra espacio en una interfaz llena de datos; Raleway mantiene el texto legible. Tablas, tarjetas y filtros comparten un sistema de espacios y un pequeño conjunto de componentes reutilizables. El color solo aporta significado: verde para activo, gris para cerrado, ámbar para pago pendiente, rojo para la urgencia real.
El admin y el área de cliente, uno al lado del otro.
26 pantallas entre los dos portales, hechas con los mismos componentes — para que el equipo y sus clientes lean los mismos datos de la misma manera.
Complejidad → estructura → claridad.
Diseñar un producto B2B lleno de datos me enseñó a empezar por las decisiones que toma la gente, no por los datos que tiene. Trabajar dentro de un ecosistema real de negocio y tecnología — con responsables, desarrolladores y QA — significaba equilibrar lo que necesitaba el negocio con lo que los trabajadores podían captar de un vistazo.
- 2
- 26
- 7
- <2h