Servicios petroleros · Herramienta de gestión contable

Una hoja de cálculo con permisos, y sin la hoja de cálculo

Diseño del panel con el que una empresa de servicios petroleros lleva su contabilidad en dólares: balance, cobranzas, gastos, contratos por región con sus proveedores y fabricaciones con su estado de entrega.

UX/UI Design
Arquitectura de información
Sistema de diseño
Diseño de interacción

Portada del panel con las tarjetas de balance, contratos, cobranzas y fabricación

La portada resume el año en cuatro bloques y no deja escribir nada: es la única pantalla de la herramienta que solo se lee. Todas las capturas del caso están en tema oscuro, que es el que usa la mayoría del equipo.

Mi rol: Diseño de producto UX/UI: definición de funcionalidades, arquitectura y agrupación de los contenidos, diseño de interacción y sistema de diseño. La implementación la llevó el equipo de desarrollo.
Duración: Julio – septiembre de 2026. Es la versión 2.0 de una herramienta que ya estaba en uso, con meses de movimientos dentro que había que conservar.
Plataforma: Aplicación web instalable como webapp. Escritorio y móvil, con tema oscuro y claro como iguales, todo en español y todo el dinero en dólares.
Usuarios: Tres perfiles: quien teclea los movimientos del día, quien revisa y firma, y quien solo consulta. Gente que venía de trabajar en hojas de cálculo compartidas.
Alcance: 6 pestañas con una misma anatomía, 3 roles, 2 regiones de contrato, 5 estados de fabricación y un sistema de color construido sobre un solo tono.
Accesibilidad: Contraste mínimo de 4,5:1 en texto y 3:1 en controles, en los dos temas. El color nunca es la única señal: cada estado lleva icono y palabra.

01 — El desafío

Ordenar sin quitarle velocidad a quien teclea

La contabilidad de la empresa vivía donde vive la de tantas empresas medianas: en hojas de cálculo compartidas. Funcionaban. Lo que no funcionaba era todo lo que las rodea: cualquiera con el enlace podía editar una celda, nadie sabía quién había cambiado una cifra, y el saldo acumulado dependía de que nadie ordenase mal una columna.

Ya existía una primera versión de la herramienta, en uso y con meses de movimientos dentro. El encargo no era empezar de cero: era rediseñarla sin obligar a nadie a aprender otra forma de trabajar. La gente que la usa teclea rápido y de memoria; cualquier flujo que les hiciera parar a buscar un desplegable era una función que no se iba a usar.

De ahí la decisión que gobierna el producto entero: que se pareciera a propósito a una hoja de cálculo. Filas, búsqueda, un mes por defecto y todo escrito a mano. Lo que cambia respecto a la hoja no está en la pantalla, está en lo que la pantalla ya no permite: que cualquiera edite, que el saldo dependa del orden de las filas o que un dato se pierda al copiar una pestaña.

Una anatomía, cinco pestañas

tarjetas del año, barra de filtros, tabla y modal. Aprender una es aprender las cinco, y ese fue el objetivo de diseño desde la primera sesión.

Lo que había que resolver

Que escribir un movimiento siguiera costando lo mismo que en una hoja.
Que consultar y editar fueran cosas distintas, y que se notara en la interfaz.
Que una vista concreta se pudiera enseñar a otro sin exportar nada.

02 — Restricciones y alcance

Las reglas del negocio mandaban sobre las ganas de ordenar

Casi todas las decisiones raras de este producto son deliberadas, y casi todas vienen de cómo trabaja quien lo usa, no de cómo me habría gustado modelarlo.

De negocio

Todo en dólares, sin conversión. No hay tasas de cambio ni monedas. Meterlas habría sido un producto distinto y nadie las pidió.
Sin catálogos. Empresas y proveedores son texto libre. Un maestro de terceros obliga a darlos de alta antes de poder escribir, y aquí primero se escribe y luego se ordena.
Fabricación no se enlaza con Contratos. Guarda a qué contrato representa como texto. La relación real es más sucia que una lista cerrada, y forzarla habría bloqueado el registro del día a día.
Una versión anterior en marcha. Había usuarios acostumbrados a la v1, así que el rediseño tenía que reconocerse como la misma herramienta y no como otra.

De diseño y de equipo

Un solo diseñador. Sin equipo de diseño ni quien revise, así que el sistema tenía que ser pequeño y muy repetido: pocas piezas, usadas muchas veces.
Entrego a desarrollo, no maqueto. Cada componente había que dejarlo especificado con todos sus estados; lo que no estuviera dibujado se iba a resolver improvisando.
Densidad obligatoria. Son tablas largas de cifras. Aligerar la tabla era el impulso equivocado: lo que había que aligerar era la decisión, no el dato.
Oscuro y claro desde el principio. No como un extra al final: cada color tenía que nacer con su pareja, elegida contra la superficie que le toca y no calculada invirtiendo la otra.

03 — Proceso y decisiones clave

Escribir el sistema antes que las pantallas

El trabajo no empezó por maquetar: empezó por dejar escrito el sistema. Tokens de color, tipografía, espaciado, la anatomía que iban a compartir todas las pantallas y las reglas de tabla, cada uno con su porqué al lado de su valor. Solo después llegaron las seis pestañas, que se resolvieron casi sin decisiones nuevas.

Suena a burocracia para un proyecto sin equipo de diseño. Es justo al revés: cuando no hay nadie que revise tu trabajo, lo único que te impide contradecirte a las tres semanas es haber anotado qué decidiste y contra qué alternativa. Y como la implementación la llevaba otro equipo, lo que no estuviera escrito se iba a resolver por su cuenta.

La consecuencia más visible de ese orden es el color. Toda la herramienta gira sobre un solo tono: fondos, líneas, campos, contornos y la escala de las gráficas son el mismo azul en distintas saturaciones. Antes cada familia iba por su cuenta y el conjunto no se leía como un conjunto: eran cinco azules que casi coincidían, que es peor que cinco colores distintos. Los únicos colores que no siguen ese tono son los que significan algo: el verde y el rojo del dinero, el ámbar de un aviso y las cinco tintas de los estados de fabricación.

Trade-offs

Sin catálogos: se escribe primero y se ordena después

Descartado: un maestro de empresas y proveedores con su alta, su búsqueda y su mantenimiento.
Por qué: obliga a parar el registro para dar de alta a un tercero. Quien apunta un gasto a media mañana no va a abrir otra pantalla, va a volver a la hoja de cálculo.
Coste asumido: el mismo proveedor aparece escrito de tres maneras y no hay informes por tercero. Se sostiene porque el buscador es tolerante y porque nadie pidió esos informes.

La región es una pestaña, no un filtro más

Descartado: una sola tabla de contratos con la región como columna filtrable, que es lo consistente con el resto.
Por qué: Oriente y Occidente se llevan por separado y casi nunca se miran juntos. Tratarlos como dos vistas quita un clic al gesto más repetido de esa pestaña.
Coste asumido: es la única pestaña que rompe la anatomía común, y no hay forma de ver las dos regiones sumadas salvo en la portada.

El mes en curso, y los filtros en la dirección

Descartado: abrir en «todo el año», que enseña más datos y parece más generoso.
Por qué: lo que se consulta a diario es el mes en marcha. Y al vivir el filtro en la dirección, una vista concreta —marzo, gastos, buscando un proveedor— se pega en un mensaje y el otro ve exactamente lo mismo.
Coste asumido: quien busca algo de hace ocho meses tiene que cambiar el filtro antes de encontrarlo. La búsqueda trabaja dentro del filtro puesto, no fuera.

Consultar no es una versión recortada de editar

Descartado: esconderle pestañas al perfil de consulta, que es lo que suele hacerse para «simplificar».
Por qué: quien solo consulta necesita ver el producto entero para entender de qué se le habla en una reunión. Ve las seis pestañas completas; lo que no tiene es el lápiz ni el botón de agregar.
Coste asumido: dos versiones de cada pantalla que mantener en el sistema. A cambio, nadie descubre que existía una sección el día que lo ascienden.

Cómo se construyó

Arranque · Qué guarda cada pestaña. Antes de dibujar nada, la lista de qué se teclea y qué se calcula en cada una de las seis. Es el documento que evitó discutir pantallas sin saber qué había detrás.
El sistema, escrito. Color, tipografía, espaciado, anatomía de pantalla y reglas de tabla, con el porqué de cada token al lado de su valor.
La anatomía común. Tarjetas del año, barra de filtros, tabla y modal. Resuelta una vez y aplicada cinco, con Contratos como la única excepción razonada.
Los estados. Los cinco de fabricación con su tinta, su icono y su palabra; los tres roles y lo que cambia en la interfaz para cada uno.
Entrega a desarrollo. Cada componente con sus estados y las reglas escritas, para que lo que no estuviera dibujado no hubiera que inventarlo.

04 — Solución final

El mismo esqueleto, cinco veces

Todas las pestañas repiten la misma anatomía: tarjetas del año arriba, una barra de filtros idéntica, la tabla, y un modal para escribir. Las capturas son de la aplicación funcionando, con datos de ejemplo.

Portada con las tarjetas de balance, contratos, cobranzas y gastos, y fabricación — Portada: el año entero en cuatro bloques, con la fecha y la hora en la cabecera y ningún sitio donde escribir.

Pantalla de balance con las tarjetas del año, la barra de filtros y la tabla de movimientos — Balance: cada fila es un movimiento tecleado a mano, y a su derecha el saldo acumulado tras ese movimiento.

Pantalla de contratos con un registro desplegado y sus proveedores — Contratos: la región se elige arriba, y cada contrato despliega sus proveedores con lo abonado, el saldo y el total de cada uno.

Pantalla de fabricación con la tabla de procuras y sus estados — Fabricación: cada procura con lo pagado, lo pendiente, su avance y en qué punto del camino está, de fabricación a entregado.

Modal de alta de un movimiento sobre la tabla de balance — Escribir un movimiento: cuatro campos, el modal encima de la tabla y la lista de fondo para no perder el contexto.

El mismo panel en claro. No es una inversión automática del oscuro: cada color tiene su pareja elegida contra la superficie que le toca, y la exigencia era que al entrar nadie viera el cambio a mitad de carga.

Panel de usuarios con sus roles y estados

Tres roles: administrador, editor y consulta. «Pendiente» no es un estado más de la lista: describe a quien todavía no ha elegido contraseña. Tener acceso concedido y poder ejercerlo son dos cosas distintas, y mezclarlas en una sola columna confundía.

La entrada pide contraseña y después un código de seis dígitos por correo. Lo que había que diseñar aquí no era el formulario, sino qué se le dice a alguien que se ha quedado fuera: por eso el mensaje de recuperación es siempre el mismo, exista la cuenta o no.

Tres pantallas de la herramienta en móvil

En móvil las tablas dejan de ser tablas: cada registro se convierte en una ficha con sus cifras apiladas. Fue la parte que más iteraciones costó, porque una tabla de nueve columnas no se reduce, se reorganiza.

05 — Resultados y aprendizajes

Lo que se puede comprobar del diseño

El producto lleva poco desplegado, así que todavía no hay métricas de uso que valga la pena presumir. Lo que sí hay son propiedades del sistema que se pueden verificar una por una.

1 solo tono

gobierna fondos, líneas, campos y gráficas. Cambiar esa cifra reviste la herramienta entera sin tocar una pantalla.

4,5:1

de contraste mínimo en todo texto y 3:1 en todo control, en los dos temas y contra las superficies donde cada color aparece de verdad.

1 anatomía

para cinco pestañas: tarjetas, barra de filtros, tabla y modal. La sexta, Contratos, es la única excepción y está razonada.

2 temas iguales

desde el primer token, no como un añadido al final. Ninguno de los dos es la versión invertida del otro.

Reglas del sistema que sobrevivieron al proyecto

Ningún componente escribe un color literal: si lo hace, el tema oscuro se rompe. Todo sale de una variable.
El color nunca es la única señal. Cada estado lleva icono y palabra, y cada importe lleva su signo además de su color.
El perfil de consulta ve el producto entero. No se le esconden secciones, se le quita la edición.
La línea que separa filas pesa menos que el contorno de una caja: una raya entre filas no es información, y si pesa más compite con las cifras.

Retrospectiva

Escribir el sistema antes que las pantallas. Tener los tokens y sus porqués redactados hizo que las cinco pestañas se resolvieran casi sin decisiones nuevas. El documento es más largo que varias pantallas juntas y ha salido rentable.
Unificar el tono fue el cambio más barato y más visible. Mover cinco azules casi iguales a un solo tono, conservando la luminosidad de cada uno, no cambió ni un contraste y sí cambió la sensación de conjunto.
Las restricciones del negocio no son deuda. El texto libre en empresas y proveedores parece un descuido; es lo que permite registrar sin parar. Documentarlo como decisión evita que el siguiente que pase lo «arregle».
Lo que costó más de lo previsto. El móvil. Una tabla de nueve columnas no se reduce: hay que decidir qué tres cifras merecen estar en la ficha y dónde va el resto. Se resolvió tarde, y se debería haber diseñado a la vez que el escritorio.
Lo siguiente. Un histórico de cambios por registro. Hoy se sabe quién entra y qué puede hacer, pero no quién tocó una cifra concreta, que es la única pregunta de la hoja de cálculo que la herramienta todavía no contesta mejor.

Una herramienta que se reconoce sin explicarla

El resultado es un producto que se abre y se entiende: la misma anatomía en todas las pestañas, un color que significa siempre lo mismo, y una densidad que no estorba porque lo que se aligeró fue la decisión y no el dato. La hoja de cálculo se sustituyó sin pedirle a nadie que cambiara su forma de trabajar.