Saltar al contenido
MenúCerrar
Caso de estudio · Portales de gobierno

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
Portada del Portal de Impuestos de la Alcaldía Distrital de Santa Marta
La portada del Portal de Impuestos de Santa Marta: cuatro impuestos, tres accesos de consulta y la firma electrónica, sin menú que abrir

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.

La secuencia

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.
Lo que no se podía tocar

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

01

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.

Primera versión del Portal de Impuestos de Santa Marta, 2019
2019 — la primera versión: dos impuestos grandes y cuatro accesos de servicio abajo
Segunda versión del Portal de Impuestos de Santa Marta, 2023
2023 — la misma estructura, con una columna lateral que recoge la firma electrónica, los actos administrativos y el portal de notarios
02

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.

Consulta del predial unificado por referencia catastral, cédula, matrícula, dirección o NIT
Cinco maneras de buscar, un campo a la vez
Selección de inmueble y modal de actualización de datos
Antes de pagar, el modal pide correo y teléfono: es el único momento en que la entidad puede capturarlos
Las seis modalidades de pago del predial, con la tabla de saldos por año
Seis modalidades a la izquierda, la distribución por vigencia a la derecha
Comprobante de pago en línea con número de factura, transacción y entidad bancaria
El comprobante: número de factura, transacción, entidad bancaria y código de servicio, todo en una pantalla imprimible
03

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.

Portal de Impuestos de Santa Marta en móvil: portada y opciones de pago
La portada y las modalidades de pago, en el ancho de un teléfono
Módulo de declaraciones y registro de contribuyentes
El módulo del contribuyente, en escritorio: inscribir, actualizar, consultar, reimprimir declaraciones y atender los pliegos de cargos
04

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.

Portal de Trámites en Línea de Santa Marta, con SISBEN y Ventanilla del Constructor
Dos públicos, dos columnas: beneficiarios del SISBEN y ventanilla del constructor
05

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.

Portal de Impuestos de la Gobernación del Magdalena, con diez trámites
Diez trámites departamentales, todos con el mismo peso
Consulta del impuesto de registro, facturación y recaudo del Magdalena
Solicitar liquidación, pagar e imprimir facturas y consultar el estado, en una sola vista
06

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.

Búsqueda de trámites en TramitFly para la Gobernación del Magdalena
La búsqueda: escribir el nombre del trámite, o la palabra asociada
Ficha de trámite en TramitFly, con canal de atención y enfoque diferencial
La ficha del trámite, con el enfoque diferencial en primera línea
Formulario de PQRSDF en TramitFly
El formulario de PQRSDF: peticiones, quejas, reclamos, sugerencias, denuncias y felicitaciones
07

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.

Sistema de íconos isométricos para trámites tributarios, en línea blanco y negro
El sistema en su versión de línea, antes del color
08

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.

Sitio del Observatorio de Mujer y Género del Distrito de Santa Marta
El tablero: cinco ejes de datos arriba, indicadores agrupados por fuente a la derecha
Remate del sitio del Observatorio con la Casa de la Mujer y sus líneas de atención
El remate: la dirección de la Casa de la Mujer, la línea de atención y la Patrulla Púrpura

Resultados

8Años de relación continua
4Entidades territoriales atendidas
2Generaciones del portal de Santa Marta
17Impuestos y trámites con interfaz propia

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 →