Giave
Fer prou clar un sistema complex de gestió de maquinària perquè s’hi pugui actuar — per a la gent que el fa servir cada dia.
- Dissenyadora UX/UI
- 2025
- Projecte per a client · 100x100net
- Admin intern + portal de client
- Recerca · Arquitectura de la informació · UI · Traspàs a dev · QA
Una eina operativa, no una web.
Giave ven i fa el manteniment de maquinària industrial. El seu equip necessitava un sol lloc per veure cada client, cada màquina, els paquets de servei contractats i les hores que hi queden — i els clients necessitaven la seva pròpia finestra a les mateixes dades. Vaig treballar en totes dues parts: l’admin intern i l’àrea de client, des de la recerca i el benchmarking fins a la interfície, el traspàs a front-end i back-end i el QA del desenvolupament.
Set coses connectades, una decisió.
Cada pregunta d’un treballador creua diverses entitats alhora. El problema real de disseny no era fer pantalles més boniques — era fer que aquestes relacions es llegissin prou ràpid per poder actuar.
- ?Quines màquines té aquest client?
- ?De quin tipus de màquina es tracta?
- ?Està en servei ara mateix?
- ?Qui és el tècnic?
- ?Quin paquet ha contractat el client?
- ?Quantes hores contractades queden?
- ?Hi ha res que requereixi atenció?
- ?Què és urgent — o està a punt d’arribar?
Dues portes a les mateixes dades.
L’equip i els clients miren les mateixes màquines, paquets i intervencions — però en necessiten coses diferents. L’admin s’organitza al voltant de gestionar molts clients; l’àrea de client, al voltant de la flota d’un sol client. Dins de cada fitxa de client, unes pestanyes deixen la informació relacionada a un clic en lloc d’escampada per diverses pantalles.
- Tauler
- Clients → General · Paquets · Màquines · Sol·licitants · Documents
- Paquets → Fitxa · Tasques
- Tècnics
- Configuració
- Tauler
- Les meves dades
- Sol·licitants
- Màquines
- Paquets → Fitxa
- Documents
- Intervencions
Filtra, no facis scroll.
En lloc de mostrar-ho tot alhora, els llistats fan servir filtres progressius: tipus de client (empresa o particular), tipus de paquet (5 h, 10 h, garantia), estat del paquet, pagament i tècnic — i un únic cercador que entén noms, NIF, números de comanda i màquines. Els filtres seleccionats queden marcats, així sempre saps què estàs mirant.
Hores que es llegeixen d’un cop d’ull.
Els clients contracten paquets de servei — 5 hores, 10 hores o garantia — i cada intervenció consumeix temps. La interfície ho converteix en una barra de progrés i una etiqueta d’estat. L’estat clau és «<2 h»: quan un paquet està a punt d’esgotar-se s’ha de veure, perquè algú ha d’actuar. Per això el vermell es reserva per a això — no s’escampa per totes les etiquetes.
Compacte, tranquil i honest amb la urgència.
Barlow Condensed dona caràcter als títols i estalvia espai en una interfície plena de dades; Raleway manté el text llegible. Taules, targetes i filtres comparteixen un sistema d’espais i un petit conjunt de components reutilitzables. El color només aporta significat: verd per a actiu, gris per a tancat, ambre per a pagament pendent, vermell per a la urgència real.
L’admin i l’àrea de client, l’un al costat de l’altre.
26 pantalles entre els dos portals, fetes amb els mateixos components — perquè l’equip i els seus clients llegeixin les mateixes dades de la mateixa manera.
Complexitat → estructura → claredat.
Dissenyar un producte B2B ple de dades em va ensenyar a començar per les decisions que pren la gent, no per les dades que té. Treballar dins d’un ecosistema real de negoci i tecnologia — amb responsables, desenvolupadors i QA — volia dir equilibrar el que necessitava el negoci amb el que els treballadors podien captar d’un cop d’ull.
- 2
- 26
- 7
- <2h