Saltar al contenido
MenúCerrar
Caso de estudio · Cajas de compensación

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
La portada del portal, en producción
La portada del portal, en producción

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 encargo formalDesarrollar una «solución de software en plataforma web que permita lograr presencia efectiva de la Corporación en Internet». El mismo contrato obliga a designar un responsable para el cargue inicial con el equipo de comunicaciones y sistemas, y a capacitar al personal en el funcionamiento de las aplicaciones.

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.
Los cuatro públicos

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

Lo que cambió entre uno y otroLa estructura se sostuvo casi entera. Lo que creció fue el territorio: las unidades integrales pasaron de una fila genérica a tarjetas con la fotografía de cada municipio, y el mapa del departamento se quedó con el pie de página.
Wireframe de la portada, antes de cualquier decisión de color
Wireframe de la portada, antes de cualquier decisión de color
La misma portada con la piel visual resuelta
La misma portada con la piel visual resuelta

Decisiones de diseño

01

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

El área de Subsidio Familiar, con el menú lateral desplegado
El área de Subsidio Familiar, con el menú lateral desplegado
02

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.

Servicios en Línea: entrar, solicitar clave o afiliarse
Servicios en Línea: entrar, solicitar clave o afiliarse
03

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.

Registro en línea, agrupado en tres bloques
Registro en línea, agrupado en tres bloques
04

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.

Verificación de identidad, una pregunta por pantalla
Verificación de identidad, una pregunta por pantalla
05

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.

El escritorio del afiliado, con las áreas como píldoras
El escritorio del afiliado, con las áreas como píldoras
La confirmación ofrece cuatro salidas, no un callejón
La confirmación ofrece cuatro salidas, no un callejón: volver a la portada, conseguir ayuda, buscar o leer noticias
El archivo de trabajo: las internas maquetadas en Illustrator
El archivo de trabajo: las internas maquetadas en Illustrator, revisadas en sesión compartida con la Caja

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.

Adaptar la innovación a la realidad culturalFue la manera de trabajar con Comfaguajira desde el primer acercamiento, en 2010. Un portal institucional puede ser correcto y ajeno al mismo tiempo; la diferencia está en si la gente se reconoce en él.
El portal en operación, con contenido real de la Caja
El portal en operación, con contenido real de la Caja: las ocho unidades integrales con la fotografía de cada municipio, y el mapa del departamento en el pie
Desarrollo Educativo y Social
Desarrollo Educativo y Social
Cursos Técnicos Laborales
Cursos Técnicos Laborales
Formación para el trabajo y el desarrollo humano
Formación para el trabajo y el desarrollo humano

Resultados

9 + 4Áreas de servicio y públicos, en dos ejes de navegación
8Unidades integrales de servicio con página propia
6Pasos del flujo de servicios en línea, de la puerta al escritorio
3Meses de contrato, capacitación del equipo incluida

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