Pagar el predial sin ir a la Alcaldía.
Ocho años diseñando las pantallas por donde un ciudadano del Magdalena declara, liquida y paga. Dos portales tributarios, una ventanilla única de trámites, un observatorio de datos públicos y un sistema de íconos que los une a todos.
- Cliente
- SitiApp — plataformas de gestión tributaria para entidades territoriales colombianas
- Interlocutor
- Yian Manjarrés — gerente
- Entidades
- Alcaldía Distrital de Santa Marta, Gobernación del Magdalena, Observatorio de Mujer y Género del Distrito, Alcaldía de Maicao
- Rol
- Diseño de interfaz, sistema de íconos e ilustración, y entrega de maquetación HTML y SCSS
- Periodo
- 2018 – 2026
- Productos
- Portal de Impuestos, Portal de Trámites en Línea, TramitFly, Observatorio de Mujer y Género
- Herramientas
- Adobe XD e Illustrator para el diseño; HTML y SCSS para la entrega

El contexto
SitiApp construye el motor tributario que usan alcaldías y gobernaciones colombianas para liquidar y recaudar. El motor funciona. El problema es el otro lado: la pantalla donde un contribuyente que no es contador, y que probablemente entró desde el celular, tiene que entender qué debe y cómo pagarlo.
Ese lado se diseñó aquí. La relación empezó en 2018 con el portal de servicios tributarios de la Alcaldía de Maicao y no se ha interrumpido: en 2026 seguía abierto el rediseño del portal de la Gobernación del Magdalena.
Es un encargo de intermediario. El cliente que firma es SitiApp; el que aparece en el encabezado de cada pantalla es un ente territorial, con su escudo, su eslogan de gobierno y su calendario político. Cada entidad trae su propia identidad y ninguna quiere parecerse a la de al lado, pero todas corren sobre el mismo sistema.
2018 — Portal ServiTributarios, Alcaldía de Maicao
2019 — primera versión del Portal de Impuestos de Santa Marta
2021 — flujo de pago completo, web y móvil, con entrega de maquetación
2022–2023 — el sistema de íconos y la segunda versión del portal
2023 — Observatorio de Mujer y Género
2024–2026 — TramitFly y la Gobernación del Magdalena
El reto
El trámite tributario es la interfaz que más gente odia y menos gente puede evitar. No se compite por preferencia: se compite contra la fila del banco.
- Nadie entra por gusto. El usuario llega con una obligación y una fecha límite. Cualquier paso que no entienda lo devuelve a la ventanilla presencial, que es exactamente el costo que la entidad quería quitarse.
- El vocabulario es del Estado, no del ciudadano. «Sobretasa», «estampilla», «degüello de ganado», «autoavalúo», «pliego de cargos». Son los nombres legales y no se pueden cambiar; lo único que se puede diseñar es qué acompaña a cada uno.
- Cada entidad quiere su cara. Santa Marta y el Magdalena usan el mismo motor, pero el escudo, el eslogan de gobierno y hasta la paleta cambian con cada administración. El diseño tiene que absorber esa capa sin rehacerse.
- El dinero exige certeza. Una pantalla de pago que deje dudas sobre cuánto se está abonando y a qué año genera una llamada, un reclamo o una transacción abandonada.
La lógica tributaria. Los impuestos, sus nombres, sus modalidades de pago y sus vigencias vienen del estatuto de cada entidad. El diseño trabaja sobre reglas que no se negocian: la libertad está en el orden, la jerarquía y la ilustración, no en el contenido.
Las líneas de trabajo
El portal de impuestos, dos generaciones
La primera versión, de 2019, ya tenía la idea central: los dos impuestos que mueven el recaudo ocupan la mitad superior de la pantalla —predial e industria y comercio, en naranja y azul— y todo lo demás se ordena debajo, en tarjetas de menor peso.
Cuatro años después la estructura se conserva y lo que cambia es la densidad. Las tarjetas grandes se estrechan para dejar entrar una columna lateral fija con lo que la gente busca sin saber cómo se llama: consultar un acto administrativo por número de identificación, gestionar la firma electrónica, entrar al portal de notarios por un paz y salvo.
Abajo, tres accesos de una línea —descuentos especiales, calendario tributario, normatividad— que en la versión anterior competían con los impuestos y ahora ya no.


De la consulta al comprobante
El problema: un contribuyente no sabe por dónde le van a encontrar su deuda. Unos tienen a mano la referencia catastral, otros solo la cédula, otros la dirección del inmueble.
La decisión: preguntar primero por cuál de los cinco datos quiere buscar —referencia catastral, cédula, matrícula inmobiliaria, dirección o NIT— y recién después pedir el número. Un solo campo visible a la vez, en lugar de un formulario de cinco.
El flujo continúa con la selección del inmueble —una persona puede tener varios—, un modal que obliga a actualizar correo y teléfono antes de pagar, las opciones de pago y el comprobante.
Las seis modalidades de pago del predial son la pantalla más difícil del portal: pago total, vigencia actual, deudas vencidas, cuota de acuerdo de pago, abono a un año específico y pago total a un año. Se resolvió con una columna de radios a la izquierda y, a la derecha, la tabla de saldos por año con el monto que se está aplicando a cada uno. La cifra grande de arriba siempre dice lo mismo que la suma de abajo.




El mismo flujo en 375 píxeles
El portal se diseñó dos veces: para escritorio y para el ancho de un teléfono. No es una adaptación responsiva del mismo archivo, son maquetas distintas, porque las decisiones cambian.
En escritorio los datos del inmueble van en una banda horizontal sobre el contenido. En móvil esa banda se convierte en una tarjeta de etiquetas apiladas —propietario, referencia catastral, dirección— que ocupa media pantalla y es lo primero que se lee.
Las seis modalidades de pago, que en escritorio caben en dos columnas, en móvil se vuelven una lista vertical con el valor debajo de cada opción, y la tabla de saldos por año queda anidada dentro de la opción que la necesita.


La ventanilla de trámites
Junto al portal tributario, Santa Marta necesitaba una puerta para los trámites que no son impuestos. Dos públicos muy distintos comparten la misma pantalla: el hogar que gestiona su SISBEN —inclusión, retiro, categorización de beneficiarios— y el constructor, que pide nomenclatura, condición de riesgo, uso de suelo, estratificación y concepto de norma.
Se resolvió con dos columnas de identidad cromática opuesta, azul y rojo, cada una encabezada por un ícono que dice de quién es la columna antes de leer una palabra. A la derecha, el inicio de sesión y una lista corta de servicios transversales: estado de trámites, firma electrónica y hoja de vida de trámites.

La Gobernación del Magdalena
El nivel departamental cobra otros impuestos y son muchos más: vehículo, registro, estampillas departamentales, degüello de ganado, sobretasa a la gasolina, contribución especial y el registro a cargo de las cámaras de comercio, además de verificación de autenticidad de documentos y el módulo de tránsito y transporte.
Diez tarjetas iguales, sin jerarquía. Es la decisión opuesta a la de Santa Marta y es deliberada: en un departamento no hay un impuesto que domine el recaudo ciudadano como el predial en un distrito, y quien entra ya sabe qué viene a hacer. Lo que distingue una tarjeta de otra es la ilustración, no el tamaño.
La consulta del impuesto de registro es el trámite más pesado del portal —requiere adjuntar documentos— y se separó en su propia pantalla, con la solicitud de liquidación a la izquierda y las tres consultas de seguimiento a la derecha.


TramitFly: buscar el trámite por su nombre
TramitFly es el producto que generaliza todo lo anterior: un portal de trámites donde la entidad publica su catálogo y el ciudadano busca por lo que quiere hacer, no por la dependencia que lo atiende. El filtro por dependencia existe, pero está plegado al lado del campo de búsqueda, no antes.
La ficha de cada trámite responde en un orden fijo: para qué sirve, por qué canal se atiende, a quién está dirigido, con qué enfoque diferencial, en qué fechas, qué requisitos tiene, cuál es su ruta y con qué otros trámites se relaciona.
El enfoque diferencial —étnico, LGBTIQ+H, desplazado, en condición de discapacidad— aparece con el mismo peso visual que el canal de atención. Es una obligación de la política pública colombiana y en la mayoría de los portales queda enterrada en un PDF; aquí es una columna de la ficha.



Los íconos que sostienen todo
Un portal tributario tiene un problema de repertorio: hay que representar «estampilla», «degüello de ganado», «sobretasa a la gasolina» y «contribución especial» sin caer en la carpeta genérica ni en el billete.
Se construyó un sistema isométrico de línea, en blanco y negro primero y coloreado después con la paleta de cada entidad. La gramática es constante: una edificación o un objeto que nombra el impuesto, más un documento con sello. La casa es el predial, la fábrica es industria y comercio, el surtidor es la sobretasa, la urna es el portal de denuncias ciudadanas.
Esa segunda pieza —el documento con sello— es la que hace que catorce dibujos distintos se lean como una familia, y es la que permite añadir un impuesto nuevo sin rediseñar el conjunto.

Un portal que no cobra nada
El Observatorio de Mujer y Género del Distrito de Santa Marta rompe la serie: no hay impuesto, no hay pago, no hay trámite. Es un sitio de datos públicos creado en el marco del Plan Distrital de Desarrollo 2020–2024, que publica estadísticas de violencia de género y equidad.
La estructura es la de un tablero, no la de un artículo. Cinco ejes de datos arriba —servicios y atenciones, perfil sociodemográfico, participación, autonomía económica, vida libre de violencias— y a la derecha una columna de indicadores agrupados por fuente: Policía Metropolitana, Fiscalía Seccional Magdalena, Medicina Legal.
Nombrar la fuente al lado del dato no es un detalle editorial: en un observatorio de violencias, un número sin procedencia no se puede citar. La paleta morada y el remate con la Casa de la Mujer y sus líneas de atención cierran la página en lo único accionable que tiene.


Resultados
El indicador real de este caso no es una pieza: es que el mismo cliente vuelva durante ocho años con entidades distintas. Cada portal nuevo se monta sobre las decisiones del anterior —la jerarquía de la portada, el flujo de consulta a comprobante, la gramática del ícono— y por eso el cuarto costó menos que el primero.
Aprendizajes
En un trámite obligatorio, el diseño no compite por atención. Compite contra la ventanilla presencial, y pierde en cuanto el usuario duda.
La jerarquía de la portada es la decisión más rentable. En Santa Marta, dos impuestos ocupan la mitad de la pantalla porque concentran el recaudo ciudadano; en el Magdalena, diez tarjetas iguales porque ninguno domina. Es la misma plataforma y la respuesta correcta es opuesta: el dato que manda es cómo se reparte el recaudo, no la preferencia estética.
Un sistema de íconos es infraestructura, no decoración. Fijar una gramática —objeto que nombra el impuesto, más documento con sello— permitió que cada entidad nueva entrara sin rediseñar nada y que un impuesto añadido después se dibujara solo.
Y diseñar para un intermediario obliga a separar lo que es marca de lo que es sistema. El escudo, el eslogan y la paleta cambian con cada administración; la estructura, no. Ese corte es lo que ha hecho que ocho años de trabajo sigan sirviendo.
¿Un portal que la gente abandona a mitad de camino? Hablemos →