Sector salud · Herramienta profesional de uso diario

Cuando la pantalla es el puesto de trabajo

Rediseño de una aplicación profesional que se usa durante toda la jornada: mucha información por pantalla, vocabulario especializado y varias personas distintas mirando lo mismo con intenciones distintas.

Product Design
Sistema de diseño
Accesibilidad
Densidad de información

Mi rol: Diseñador de producto independiente. Me contrataron para rediseñar la herramienta y para conceptualizar las funcionalidades nuevas que se iban incorporando.
Alcance de mi trabajo: Sistema de diseño, arquitectura de la interfaz, diseño de interacción y especificación de componentes para que el equipo del cliente los implementara.
Duración: Marzo de 2025 – agosto de 2026, sobre un producto que ya estaba en producción y en uso diario.
Plataforma: Aplicación web de escritorio, con tema claro y tema oscuro tratados como iguales.
Contexto: Herramienta profesional de uso continuo en entorno sanitario: pantallas densas, vocabulario especializado y varios perfiles trabajando sobre la misma información.
Confidencialidad: El proyecto está sujeto a un acuerdo de confidencialidad. Este caso describe mi trabajo de diseño; no muestra pantallas, datos ni el funcionamiento interno del producto.

01 — El desafío

Una herramienta que funcionaba y no se dejaba leer

El producto estaba en producción y resolvía su trabajo. Lo que no resolvía era la lectura. Había crecido por acumulación: cada necesidad nueva había llegado con su pantalla, y cada pantalla había resuelto por su cuenta las tablas, los botones, los espacios y los colores. Vistas de una en una, todas eran razonables. Vistas juntas, no parecían el mismo producto.

Es el problema típico de las herramientas profesionales, y no se arregla haciéndolas más bonitas. Quien las usa no entra a mirarlas: entra a resolver algo, muchas veces al día, y la interfaz solo le importa cuando le estorba. Mi trabajo no era seducir a nadie, era quitar de en medio todo lo que hacía dudar.

Había además una tensión que condiciona el resto: estas pantallas son densas por necesidad. Quien trabaja aquí necesita ver mucho a la vez, porque su tarea consiste precisamente en comparar y decidir. La tentación de «aligerar» quitando información era la respuesta equivocada, y la más fácil de vender.

Lo que se aligera es la decisión

no el dato. Ese fue el criterio que gobernó cada pantalla: la misma cantidad de información, menos esfuerzo para encontrar la que importa.

Lo que había que resolver

Que el producto se leyera como uno solo y no como una suma de pantallas.
Que la densidad dejara de ser ruido sin perder ni un dato.
Que el equipo pudiera seguir construyendo sin tener que preguntar cómo se hace cada cosa.

02 — Restricciones

Rediseñar algo que no se puede parar

El rediseño se hizo sobre un producto vivo, con gente usándolo cada día y con desarrollo de funciones nuevas en marcha. No hubo versión paralela ni fecha de corte: los cambios entraron por partes, y cada parte tenía que convivir con lo que todavía no se había tocado.

Del contexto

Uso continuado, no visitas. Son pantallas que se tienen abiertas la jornada entera en monitores de escritorio. Lo que en una web es un detalle, aquí se repite cientos de veces al día.
Vocabulario especializado. La terminología del sector no se traduce ni se simplifica: es el idioma en el que piensa quien la usa, y cambiarlo genera dudas en lugar de quitarlas.
Densidad obligatoria. La tarea consiste en comparar. Reducir lo que se ve a la vez habría hecho el producto más bonito y menos útil.
Varios perfiles sobre lo mismo. Distintas especialidades miran la misma información buscando cosas distintas, y ninguna puede quedar servida a costa de otra.

De diseño

Deuda heredada. Una base construida sobre una plantilla de administración genérica, con estilos globales y un tema oscuro resuelto pantalla a pantalla.
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 meses después.
Sin congelar el producto. Nada de rediseñar en paralelo y desplegar de golpe. Cada pieza tenía que poder entrar sola y convivir con la anterior.
Claro y oscuro 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.

03 — Decisiones de diseño

Primero los fundamentos, después las pantallas

El trabajo no empezó maquetando. Empezó por dejar escrito el sistema: tokens de color, escala tipográfica, espaciado, las reglas de tabla y la anatomía que iban a compartir todas las pantallas, cada regla con su porqué al lado de su valor. Solo después llegó el rediseño pantalla a pantalla, que se resolvió casi sin decisiones nuevas.

Suena a burocracia. Es justo lo contrario: cuando la implementación la lleva otro equipo y el producto no se puede parar, lo único que impide que cada pantalla vuelva a inventarse a sí misma es haber anotado qué se decidió y contra qué alternativa.

Trade-offs

Una sola anatomía, repetida

Decidido: todas las pantallas comparten el mismo esqueleto —cabecera, barra de filtros, contenido y panel lateral— y las mismas piezas.
Por qué: aprender una pantalla tenía que ser aprenderlas todas. En una herramienta que se usa a diario, la familiaridad vale más que la originalidad de cada vista.
Coste asumido: alguna pantalla encaja con calzador y hay una excepción razonada. Se prefirió eso a tener varias lógicas distintas que mantener.

El color nunca va solo

Decidido: todo lo que se comunica con color lleva además icono y palabra, siempre en el mismo orden.
Por qué: una parte real de los usuarios no distingue bien ciertas tintas, y en pantallas densas el color se lee de reojo. Si es la única señal, se falla en silencio.
Coste asumido: cada indicador ocupa más ancho, que es justo lo que más escasea. Se ganó espacio en otros sitios para poder pagarlo aquí.

Dos temas que nacen juntos

Descartado: calcular el tema oscuro invirtiendo el claro, que es como estaba resuelto antes.
Por qué: una inversión automática rompe los contrastes justo donde más importan, en los textos pequeños y en los bordes de los controles.
Coste asumido: el doble de decisiones de color y una revisión de contraste por cada pareja. A cambio, cada pantalla nueva nace ya en los dos temas.

Aligerar la lectura, no el contenido

Descartado: esconder columnas o repartir la información en más pasos para que «respire».
Por qué: quien usa esto necesita comparar. Partir la comparación en dos pantallas convierte una tarea en dos y una decisión en un recuerdo.
Coste asumido: hay que trabajar mucho más fino la jerarquía —peso de las líneas, agrupación de cabeceras, alineación de cifras— para que la densidad no se convierta en ruido.

Cómo avanzó

Auditoría. Inventario de pantallas y de piezas repetidas, para saber cuánto producto había de verdad y cuánto era la misma cosa resuelta de cinco maneras.
Fundamentos. Color, tipografía, espaciado y estados, documentados antes de tocar ninguna pantalla.
Componentes. Las piezas que más se repiten, especificadas con todos sus estados y sus reglas de uso.
Pantallas. Rediseño progresivo, en bloques que pudieran entrar solos a producción.
Ajuste fino. Densidad, contraste y los casos límite que solo aparecen con datos reales delante.

04 — Resultados y aprendizajes

Lo que se puede comprobar del diseño

Las métricas de uso son del cliente y no me corresponde publicarlas. Lo que sí puedo describir son propiedades del sistema que diseñé, y son las que sostienen todo lo demás.

1 anatomía

compartida por todas las pantallas. Aprender una es aprenderlas todas, y construir la siguiente ya no empieza de cero.

2 temas iguales

claro y oscuro desde el primer token, no como una capa añadida al final. Ninguno es la versión invertida del otro.

0 colores literales

en los componentes. Todo sale de una variable, que es la única forma de que el tema oscuro no se rompa con cada pantalla nueva.

0 señales solo de color

cada indicador lleva icono y palabra junto a su tinta, en el mismo orden en todo el producto.

Reglas del sistema que sobrevivieron al proyecto

Ningún componente escribe un color literal: si lo hace, el tema oscuro se rompe.
El color nunca es la única señal.
El vocabulario del usuario no se traduce ni se abrevia. La claridad se consigue con la estructura, no cambiando sus palabras.
Las pantallas nuevas se montan con piezas que ya existen. Si hace falta una pieza nueva, primero se justifica.
La línea que separa filas pesa menos que el contorno de una caja: una raya entre filas no es información.

Retrospectiva

Fundamentos antes que pantallas. Sin tokens, el tema oscuro se había hecho dos veces. Con ellos, cada pantalla nueva nació en los dos y dejó de ser un trabajo aparte.
Diseñar con el vocabulario del usuario. Cada intento de simplificar la terminología del sector generó más dudas que ayuda. La claridad venía de ordenar, no de renombrar.
La densidad no se arregla quitando datos. Se arregla con jerarquía: peso de líneas, agrupación de cabeceras, alineación de cifras y espacio puesto donde se decide, no repartido por igual.
Documentar es el entregable. Cuando implementa otro equipo y el producto no se puede parar, lo que no esté escrito se resuelve improvisando. El documento de sistema fue tan entregable como las pantallas.
Lo que costó más de lo previsto. Convivir con lo viejo. Rediseñar por partes obliga a que cada pieza nueva se entienda al lado de una que todavía no lo es, y eso se diseña: no basta con que la pieza nueva sea mejor.

Un producto que se reconoce sin explicarlo

El resultado es una herramienta que se abre y se entiende: la misma anatomía en todas las pantallas, un color que significa siempre lo mismo y una densidad que deja de estorbar porque lo que se aligeró fue la decisión y no el dato. Y un sistema escrito, que es lo que permite que el equipo siga construyendo sin volver a empezar en cada pantalla.