Dashboard de ConfiguracionesSettings Dashboard
Rediseñé la entrada al módulo de configuración de facturación: de un árbol de menús multinivel a un único dashboard operativo. La navegación pasó de 20 pasos a 5.I redesigned the entry point to the billing configuration module: from a multi-level menu tree to a single operational dashboard. Navigation went from 20 steps to 5.
El retoThe challenge
Configurar la facturación en un ERP de construcción no es una tarea opcional: sin esa configuración no se emite una orden ni una factura. Pero toda la configuración vivía en una estructura de tres niveles anidados —F&C › Facturación › Config. facturación › Config. resoluciones › Agregar › Cards › Resoluciones— donde opciones de producto y opciones de sistema convivían en el mismo plano, sin jerarquía.Setting up billing in a construction ERP is not optional: without that configuration no order and no invoice can be issued. Yet the entire configuration lived in three nested levels —B&R › Billing › Billing config › Resolution config › Add › Cards › Resolutions— where product options and system options shared the same plane, with no hierarchy.
Para el negocio: fricción en cada implementación nueva y dependencia constante del consultor. Para el usuario —un contador o auxiliar contable con conocimiento básico del sistema— entrar y salir de varios botones para llegar a una funcionalidad, sin saber de antemano qué contenía cada opción.For the business: friction in every new implementation and constant dependence on the consultant. For the user —an accountant or accounting assistant with basic system knowledge— entering and leaving several buttons to reach one feature, with no way to know beforehand what each option contained.
El procesoThe process
No había presupuesto ni acceso para research con usuario final, así que la fuente de verdad fue la consultora funcional del módulo — la persona que acompaña cada implementación y ve los mismos tropiezos decenas de veces.There was no budget or access for end-user research, so the source of truth was the module's functional consultant — the person who walks every implementation and sees the same stumbles dozens of times.
Mapeo del estado actualMapping the current state
Levanté la estructura completa "como está", cruzando cada rama del árbol con su pantalla real y clasificando cada nodo por profundidad. El mapa hizo visible el problema: funcionalidades críticas enterradas a la misma profundidad que configuraciones que se tocan una vez al año.I documented the full "as is" structure, matching every branch of the tree to its actual screen and classifying each node by depth. The map made the problem visible: critical features buried as deep as settings touched once a year.
Hipótesis previas a la sesiónHypotheses before the session
Cinco hipótesis por escrito antes de hablar con nadie: entre ellas, que modelos de negocio, conceptos de facturación y resoluciones eran la línea vertebral del flujo, y que existía una doble línea de configuración redundante.Five written hypotheses before talking to anyone: among them, that business models, billing concepts and resolutions were the backbone of the flow, and that a redundant double configuration path existed.
Sesión con la consultora funcionalSession with the functional consultant
Validé y corregí. Los hallazgos que más movieron el diseño:I validated and corrected. The findings that moved the design most:
- El perfil varía por empresa —contador o auxiliar— pero comparte un conocimiento básico apoyado en asesoría.The profile varies by company —accountant or assistant— but shares basic knowledge backed by consulting.
- Los usuarios necesitan saber qué hace cada botón antes de hacer clic: la descripción es indispensable, no decorativa.Users need to know what each button does before clicking: the description is essential, not decorative.
- Roles y permisos casi nunca se modifica → no merece jerarquía visual alta.Roles and permissions is almost never edited → it does not deserve high visual hierarchy.
- Notificaciones del sistema se usa poco, pero se usa → no se puede esconder del todo.System notifications is rarely used, but it is used → it cannot be hidden away.
- Pedían indicación visual de campos obligatorios y gráficas de los datos importantes.They asked for visual marking of required fields and charts for the important data.
Nueva arquitectura de informaciónNew information architecture
Tres ramas con propósitos distintos: Configuración de facturación (lo operativo y diario), Configuración de sistema (lo transversal y esporádico) e Informes de configuración (auditoría y consulta).Three branches with distinct purposes: Billing configuration (daily, operational), System configuration (cross-cutting, occasional) and Configuration reports (audit and lookup).
Exploración de wireframesWireframe exploration
Seis versiones lo-fi antes de fijar el layout. La discusión no fue estética sino de jerarquía: qué merece ocupar el centro de la pantalla y qué se resuelve con un enlace.Six lo-fi versions before settling the layout. The discussion was not aesthetic but hierarchical: what deserves the centre of the screen and what a link can solve.
De la forma
a la funciónFrom form
to function
Un menú te dice a dónde puedes ir. Un tablero te dice dónde estás parado.A menu tells you where you can go. A dashboard tells you where you stand.
Los números son el contenido, no el adornoThe numbers are the content, not the ornament
Impuestos y retenciones dejó de ser una lista de enlaces: es una retícula donde cada casilla muestra el nombre y la cantidad configurada. El usuario ya no navega para averiguar cuántos IVA tiene — lo ve.Taxes and withholdings stopped being a list of links: it is a grid where each cell shows the name and how many are configured. The user no longer navigates to find out how many VAT rates exist — they see it.
Cada tipo de dato pide su propia formaEach kind of data asks for its own shape
Conteos absolutos → tarjetas numéricas con icono. Resoluciones con rango y consumo → medidores semicirculares con valor actual, límites y días de vigencia. Modelos de negocio → filas con badges por tipo de concepto. Una sola forma para todo habría sido más limpia; también menos legible.Absolute counts → large numeric cards with an icon. Resolutions with a range and consumption → semicircular gauges with current value, limits and days left. Business models → rows with badges per concept type. One single shape for everything would have been cleaner; it would also have been less legible.
La jerarquía codifica la frecuencia de usoHierarchy encodes frequency of use
Lo diario ocupa el cuerpo principal, con peso tipográfico y color. Lo esporádico —convenios, roles, notificaciones, formatos— vive en una columna lateral de enlaces con flecha: presente pero silenciosa. Es el hallazgo de la consultora traducido a layout.Daily work occupies the main body, with typographic weight and colour. The occasional —agreements, roles, notifications, formats— lives in a side column of arrow links: present but quiet. It is the consultant's finding translated into layout.
Tres versiones de la misma pantalla: primer ingreso, con poca información y poblada. En el primer ingreso los contadores marcan 00, aparecen ilustraciones y los botones cambian de "Ver todos" a "Crear modelo" / "Crear resolución". La pantalla enseña qué hacer en lugar de mostrarse rota.Three versions of the same screen: first login, sparse and fully populated. On first login the counters read 00, illustrations appear and the buttons change from "See all" to "Create model" / "Create resolution". The screen teaches what to do instead of looking broken.
Con Usetiful se montó un modal de bienvenida y un recorrido guiado: la primera exposición al nuevo panel fue acompañada, no un cambio abrupto respecto a lo que el usuario ya conocía.With Usetiful we built a welcome modal and a guided tour: the first exposure to the new panel was accompanied, not an abrupt break from what the user already knew.
La soluciónThe solution
Un dashboard único que reemplaza la pantalla-menú de entrada al módulo.A single dashboard that replaces the menu screen at the module entrance.
El resultadoThe result
Las tres configuraciones vertebrales quedaron a un clic desde la entrada del módulo, y la información de estado dejó de requerir navegación para ser consultada.The three backbone configurations ended up one click from the module entrance, and status information no longer requires navigation to be read.
La arquitectura resultante se convirtió en la base sobre la que se rediseñaron los flujos internos del módulo — entre ellos el de Modelos de negocio (caso 02).The resulting architecture became the base for redesigning the module's internal flows — among them Business models (case 02).