Agroalimentaria · 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 Valle Alba —que cultiva, envasa y exporta fruta y hortaliza fresca— lleva su contabilidad en euros: balance, cobranzas, gastos, contratos por zona con sus proveedores e importaciones de maquinaria 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 gastos, e importaciones

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. Las capturas 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 claro, oscuro y automático, todo en español y todo el dinero en euros.
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 —más Usuarios, solo para el administrador—, 3 roles, 2 zonas de contrato, 5 estados de pedido 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. No se estima: hay un script que mide la paleta entera contra las superficies donde cada color aparece de verdad.

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 —en campaña, un día son treinta apuntes entre albaranes, portes y liquidaciones—; 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 euros, sin conversión. La empresa exporta y compra maquinaria fuera, pero factura y paga en euros. 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.
Importaciones no se enlaza con Contratos. Son dos libros distintos y así se quedan: un pedido de maquinaria guarda su proveedor y su pedido 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. Y la base de datos vieja no se podía migrar encima: se archiva aparte y se empieza con el esquema nuevo.

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.
Sin librerías de interfaz. Ni CSS ni componentes de terceros. Todo lo que se dibuja —desplegables, gráficas, calendario— había que diseñarlo y especificarlo, incluidos sus estados raros.

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 verde en distintas saturaciones. Antes cada familia iba por su cuenta y el conjunto no se leía como un conjunto: eran cinco verdes que casi coincidían, que es peor que cinco colores distintos. Se conservó la luminosidad de cada token al moverlos, así que ni un contraste cambió. 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 un pedido.

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 porte 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 zona es un interruptor, no un filtro más

Descartado: una sola tabla de contratos con la zona como columna filtrable, que es lo consistente con el resto.
Por qué: la Zona Norte y la Zona Sur se llevan por separado —fincas distintas, interlocutores distintos— y casi nunca se miran juntas. Tratarlas como dos vistas quita un clic al gesto más repetido de esa pestaña.
Coste asumido: es la única pestaña que añade un control de ámbito sobre la anatomía común, y no hay forma de ver las dos zonas 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.

La portada no se filtra

Descartado: un selector de año y un filtro de mes en el resumen, como en las demás pantallas.
Por qué: de las cuatro tarjetas, dos se miden por fecha, una necesita los doce meses para tener forma y la cuarta no tiene fecha ninguna —un pedido no «ocurre» un día, avanza—. Un resumen que hay que manejar deja de ser un resumen.
Coste asumido: para mirar otro periodo hay que entrar en la pestaña. El año que se está viendo lo dice cada rótulo («Ingresos en 2026», «Total 2026»), que es donde hace falta.

La apariencia son tres opciones, no un interruptor

Descartado: el icono que rota entre claro y oscuro, que es lo barato.
Por qué: «claro» y «oscuro» son «quiero siempre esto»; «automático» es «lo que diga mi dispositivo». Con dos estados no hay forma de volver a esa tercera intención, y el interruptor puede estar mintiendo porque el sistema le cambia el tema por debajo.
Coste asumido: un desplegable en vez de un botón. A cambio, el icono enseña el tema que se está viendo y el menú dice de cuál de los tres modos viene.

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 que añade algo encima.
Los estados. Los cinco de un pedido con su tinta, su icono y su palabra; los tres roles y lo que cambia en la interfaz para cada uno; los cuatro estados de una cuenta —activo, pendiente, bloqueado y cancelado— y por qué no son lo mismo.
El móvil, al final y a destiempo. Las tablas se convierten en fichas por debajo de 720 px y la navegación baja al pulgar. Se resolvió tarde, y es lo que más iteraciones costó.
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, e importaciones — Portada: el año entero en cuatro bloques, con el saludo y la fecha 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 de la Zona Norte con el segmentado de zona y la tabla de contratos — Contratos: la zona se elige arriba, y cada contrato anuncia cuántos proveedores esconde antes de desplegarlos con su abonado, su saldo y su total.

Pantalla de importaciones con la tabla de pedidos de maquinaria y sus estados — Importaciones: cada pedido de maquinaria con lo pagado, lo pendiente, su avance y en qué punto del camino está, de fabricación a entregado.

Modal de alta de un contrato abierto sobre la tabla de contratos — Escribir un contrato: el modal se abre encima de la tabla, con 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. Son tres opciones y no dos —claro, oscuro y automático—, porque «lo que diga mi dispositivo» es una intención que un interruptor no sabe recoger.

Panel de usuarios con sus roles y estados

Tres roles: administrador, editor y consulta. Y cuatro estados que no son lo mismo: «pendiente» describe a quien todavía no ha elegido contraseña, «bloqueado» a quien agotó los intentos, y «cancelado» a quien ya no tiene acceso. 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, que es un paso de la misma tarjeta y no un diálogo encima. 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: portada, balance y contratos

En móvil las tablas dejan de ser tablas: cada registro se convierte en una ficha con sus cifras apiladas, y la navegación baja a una barra fija al alcance del pulgar. 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 no hay un año de métricas de uso que presumir. Lo que sí hay son propiedades del sistema que se pueden verificar una por una —de hecho, hay un script que las mide— y lo que se observó en el piloto antes de abrirlo a todo el equipo.

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. Lo mide un script, no el ojo.

1 anatomía

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

3 temas

claro, oscuro y automático, desde el primer token. Ninguno de los dos primeros es la versión invertida del otro.

Lo que se midió en el piloto

Tres semanas con seis personas de administración y los movimientos de la campaña de octubre dentro. Son cifras pequeñas y de una muestra pequeña: valen como señal, no como prueba.

De 41 s a 24 s para dar de alta un movimiento, cronometrado contra la v1. Casi todo el ahorro está en no tener que elegir empresa en un desplegable.
El 78 % de las consultas se resolvieron sin tocar el filtro de periodo: el mes en curso por defecto era la apuesta correcta.
Cero incidencias de «he perdido un dato» en las tres semanas, contra las dos o tres al mes que se daban por hojas pisadas entre sí.
Dos de las seis personas se quedaron en tema claro habiendo entrado en oscuro. Fue el argumento para no tratar ninguno de los dos como el tema «de verdad».

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. La única excepción son los correos, que no cargan la hoja de estilos.
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. Y ocultar un botón es cortesía: quien protege es el servidor.
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.
Si en una gráfica conviven dos unidades, o cada cifra dice la suya, o una de las dos se va.

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 verdes 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.