Nueve áreas, cuatro públicos y ocho municipios en una sola portada.
El portal de la Caja de Compensación Familiar de La Guajira. Un wireframe completo antes de cualquier color, dos ejes de navegación para que nadie tuviera que conocer el organigrama, y un flujo de servicios en línea de seis pasos que verificaba la identidad antes de abrir la puerta.
- Cliente
- Caja de Compensación Familiar de La Guajira — Comfaguajira
- Rol
- Diseñador UI/UX · arquitectura de información, wireframe, dirección de arte y maquetación
- Periodo
- Julio – octubre de 2011
- Respaldo
- Contrato de prestación de servicios 726 de 2011
- Alcance
- Portal institucional, servicios en línea y capacitación del equipo de la Caja
- Ciudad
- Riohacha, La Guajira
- Públicos
- Afiliados, empresas, proveedores y equipo interno
- Herramientas
- Adobe Illustrator · maquetación web

El contexto
Una caja de compensación familiar no es una empresa de servicios: es varias a la vez. Comfaguajira —con personería jurídica desde mayo de 1968— administra el subsidio familiar en La Guajira y, al mismo tiempo, presta salud, vivienda, crédito social, recreación, turismo, educación y formación para el trabajo. Ocho municipios del departamento tienen Unidad Integral de Servicios: Barrancas, Maicao, Fonseca, San Juan del Cesar, La Mina, Villanueva, Urumita y El Molino.
Eso significa que un mismo sitio tiene que atender a una madre que busca el subsidio de su hijo, a una empresa que va a afiliar a su personal, a un proveedor que radica una factura y al propio equipo de la Caja. Cuatro conversaciones distintas, sobre nueve áreas de servicio, en un territorio disperso y con la conectividad de 2011.
El encargo llegó por contrato de prestación de servicios en julio de 2011, con tres meses de plazo. No era un rediseño estético: el objeto contractual pedía presencia efectiva en Internet, y ponía la capacitación del personal de la Caja dentro del alcance.
El reto
Un portal de caja de compensación no tiene un usuario: tiene cuatro, y ninguno sabe cómo está organizada la entidad por dentro.
- Nadie llega buscando un área. La gente llega buscando un trámite. El menú de una entidad casi siempre reproduce su organigrama, y el organigrama es información que el visitante no tiene ni necesita.
- El público define la ruta antes que el tema. Lo que un afiliado necesita del área de subsidio no se parece en nada a lo que necesita una empresa de esa misma área.
- El territorio importa. Ocho municipios, cada uno con su unidad de servicio. Un portal que hablara solo desde Riohacha habría dejado fuera a la mitad del departamento.
- Servicios en línea sin firma digital. Había que abrir consultas y trámites a un público sin credenciales previas, en un año en el que la autenticación fuerte no era una opción disponible.
Afiliados — trabajadores y sus familias. Buscan un subsidio, una cita, un cupo o un crédito.
Empresas — aportantes. Afilian, actualizan y consultan.
Proveedores — contratan y radican.
Equipo interno — la intranet de la Caja.
Los cuatro comparten las mismas nueve áreas de servicio. Esa doble entrada fue la decisión estructural del proyecto.
Del wireframe a la piel
El proyecto empezó por un wireframe completo de la portada: cajas grises, cruces donde iban las imágenes y todos los bloques en su sitio, sin una sola decisión de color. Ahí quedaron resueltas las pestañas por público, el menú de áreas, el carrusel de novedades, los servicios y trámites, las unidades integrales, los convenios, la galería, los videos y el bloque «Conoce la Guajira».
Discutir la estructura en gris tiene una ventaja práctica con un cliente institucional: la conversación no se desvía a los colores mientras todavía se está decidiendo qué va primero. Cuando la piel visual llegó encima, la arquitectura ya estaba aprobada y no se movió.


Decisiones de diseño
Dos ejes de navegación, no uno
La barra superior clasifica por público —afiliados, empresas, proveedores e intranet—. El menú lateral clasifica por área de servicio: Comfaguajira, Subsidio, Desarrollo Educativo y Social, Salud, Recreación, Turismo, Crédito Social, Vivienda y Servicio al Cliente.
Quien sabe quién es entra por arriba. Quien sabe qué necesita entra por el lado. Nadie tiene que aprenderse el organigrama para llegar a un trámite, y las dos rutas terminan en la misma página.
El menú lateral se mantiene desplegado en todas las internas, con el subnivel del área abierto. La orientación nunca depende de recordar por dónde se entró.

Una puerta con tres cerraduras
El problema: a la página de Servicios en Línea llegan tres personas distintas —la que ya tiene clave, la que es afiliada pero nunca se registró y la que ni siquiera está afiliada— y las tres ven un formulario de acceso que solo sirve para la primera.
La decisión: resolver los tres casos en la misma pantalla, con la misma jerarquía. Entrar al portal a la izquierda; «Solicita una clave» al lado, para el afiliado sin registrar; y abajo, separado, «¿Aún no estás afiliado?» con la invitación a conocer los beneficios.
Nadie choca contra una puerta cerrada sin saber qué hacer después.

Pedir poco, y en bloques que se entienden
El registro se agrupó en tres bloques con nombre propio —Personales, De Contacto y Sobre su Empresa— en lugar de una columna larga de campos. Cada bloque cabe de una mirada y el formulario completo entra en una pantalla, sin desplazamiento.
El envío no dice «Aceptar»: dice «Doy fe de que esta información es cierta». Es una declaración, no un botón. En un trámite que da acceso a subsidios, esa frase hace explícito lo que la persona está afirmando.

Verificar la identidad antes de abrir
El problema: dar acceso a datos de subsidio y salud a alguien que solo escribió su cédula, en un año sin firma digital ni doble factor.
La decisión: una verificación de cinco preguntas sobre datos que solo el titular puede reconocer, con el avance visible —«Pregunta 1 de 5»— y una sola pregunta por pantalla. Cuatro opciones, un botón, nada más.
Mostrar el contador no es un adorno: quien sabe que faltan cuatro preguntas no abandona en la segunda.

Un escritorio, no un menú más
Una vez dentro, el afiliado no vuelve al menú institucional: recibe un escritorio propio con las nueve áreas convertidas en píldoras de color y los servicios disponibles agrupados bajo el área que los presta.
El saludo con nombre y el enlace «Actualiza tus datos» ocupan un lugar fijo. La sesión iniciada cambia la portada entera —el encabezado deja de invitar a entrar y pasa a saludar—, de modo que el estado de la sesión se lee sin buscarlo.



La Guajira dentro del portal
El portal no se limitó a nombrar el departamento: lo puso en la interfaz. Una cenefa de tejido recorre el ancho de la página bajo el encabezado y vuelve a aparecer sobre el pie. El mapa de La Guajira encabeza el bloque «Conoce la Tierra Guajira», con los enlaces al tour virtual, los centros y la agencia de viajes.
Y las ocho Unidades Integrales de Servicio no son una lista: son ocho tarjetas, cada una con la fotografía del municipio —la plaza de Barrancas, la iglesia de Villanueva, el monumento de Urumita—. Un afiliado de Maicao encuentra su unidad por la imagen antes que por el nombre.
Esa decisión es la que hizo que el sitio envejeciera bien. La captura de abajo es del portal ya en operación, años después de la entrega, con contenido real de la Caja: la estructura sigue siendo la misma.




Resultados
El portal entró en operación y se quedó. Cuatro años después seguía en línea con la misma estructura, actualizado por el propio equipo de la Caja —que era exactamente lo que el contrato pedía al incluir la capacitación dentro del alcance—. Cuando por fin llegó su reemplazo, el sitio se archivó bajo la ruta /oldphp/: veinticuatro piezas de ese portal están hoy en nuestro archivo, del wireframe inicial a las capturas de producción.
Aprendizajes
Discutir la estructura en gris es la forma más barata de que el color no se convierta en la discusión.
El wireframe completo antes de cualquier decisión visual no fue una formalidad de método: fue lo que permitió cerrar la arquitectura con un cliente institucional en tres meses. Cuando la piel llegó encima, ya no había nada estructural que renegociar.
Y un portal público no se termina cuando se entrega. Se termina cuando el equipo del cliente puede sostenerlo sin llamar a nadie. Que la capacitación estuviera en el contrato, y no como un favor al final, es la razón por la que este sitio siguió vivo años después de que nos fuéramos.
¿Tienes una entidad con muchas áreas y muchos públicos? Hablemos