Descripción del Proyecto
AFC Chile (Administradora de Fondos de Cesantía) es la institución que administra el seguro de cesantía de Chile — un sistema obligatorio que protege a los trabajadores durante períodos de desempleo. La Sucursal Virtual Empleadores es el portal para empresas donde gestionan las cotizaciones de sus trabajadores, inscripción, desvinculación y generación de certificados.
Este proyecto, realizado en Amable, consistió en actualizar y expandir un prototipo anterior (2015) a un front-end completamente responsivo y listo para producción. El objetivo era modernizar la experiencia del dashboard para empleadores — facilitando a departamentos de RRHH y dueños de pymes la gestión de sus obligaciones de seguro de cesantía.
El Desafío
El portal de empleadores existente presentaba varios desafíos de usabilidad y técnicos:
- Prototipo Desactualizado: Los prototipos Axure de 2015 necesitaban actualizaciones significativas para reflejar la funcionalidad actual y patrones UI modernos
- Dashboard Financiero Complejo: Los empleadores necesitaban rastrear múltiples estados financieros — pagos atrasados, errores en cotizaciones, reembolsos e historial de pagos — en una vista coherente
- Complejidad en Gestión de Trabajadores: Los flujos de inscripción/desvinculación individual y masiva requerían atención cuidadosa de UX para prevenir errores en un proceso con implicancias legales
- Requisitos Responsivos: El portal debía funcionar en múltiples dispositivos, desde estaciones de trabajo de escritorio hasta tablets usadas por dueños de pymes
Proceso
Fase 1: Revisión y Actualización de Prototipos
Comenzamos auditando los prototipos Axure existentes de 2015, mapeándolos contra la funcionalidad actual de la plataforma:
- Revisión de Arquitectura de Información: Analizamos la estructura de navegación existente e identificamos brechas entre el prototipo y la plataforma en producción
- Mapeo de Flujos: Documentamos todos los flujos orientados al empleador — desde login hasta pago de cotizaciones, gestión de trabajadores y generación de certificados
- Wireframes Actualizados: Revisamos el diseño de interacción para reflejar los requisitos de funcionalidad 2019 y patrones UX modernos
Fase 2: Diseño Visual y Desarrollo Front-end
Con los flujos actualizados aprobados, avanzamos al diseño visual e implementación:
- Archivos de Diseño en Sketch: Creamos diseños visuales de alta fidelidad para todas las pantallas del portal, estableciendo un lenguaje de diseño consistente
- Implementación Bootstrap 4: Construimos plantillas responsivas HTML/CSS/JS usando Bootstrap 4 como base, asegurando compatibilidad entre dispositivos
- Biblioteca de Componentes: Desarrollamos componentes UI reutilizables para visualización de datos financieros — tarjetas de resumen, tablas de datos, indicadores de estado y patrones de alertas
- Prototipado Interactivo: Implementamos prototipos front-end funcionales con interacciones JavaScript para validación de formularios, navegación con pestañas y carga dinámica de contenido
Funcionalidades Clave
- Dashboard del Empleador: Resumen financiero con tarjetas mostrando pagos atrasados, errores en cotizaciones, reembolsos pendientes y actividad reciente de un vistazo
- Gestión de Trabajadores: Flujos de inscripción/desvinculación individual y masiva con validación de formularios y pasos de confirmación
- Seguimiento de Cotizaciones: Vistas con pestañas para cotizaciones mensuales, historial de pagos y desglose detallado por trabajador
- Generación de Certificados: Generación y descarga en línea de certificados de cumplimiento del empleador
- Procesamiento de Pagos: Flujos de pago guiados para cotizaciones atrasadas con pasos de resolución de errores
- Diseño Responsivo: Experiencia completamente funcional desde escritorio hasta tablet, construida sobre la grilla responsiva de Bootstrap 4
Entregables Principales
- Prototipos Actualizados reflejando la funcionalidad actual de la plataforma y flujos de usuario mejorados
- Archivos de Diseño en Sketch con diseño visual completo para todas las pantallas del portal
- 20+ Páginas HTML/CSS Responsivas construidas sobre Bootstrap 4 con interactividad JavaScript
- Biblioteca de Componentes UI con patrones reutilizables para dashboards financieros, tablas de datos y elementos de formulario
Artefactos del Proyecto
Una muestra sanitizada de las plantillas front-end responsivas entregadas para el portal de empleadores:
- Plantillas front-end (GitHub) — Páginas HTML responsivas con Bootstrap 4 incluyendo dashboard del empleador, flujos de gestión de trabajadores, seguimiento de cotizaciones y generación de certificados
Nota: Este repositorio contiene un prototipo/set de plantillas front-end sanitizado sin datos sensibles.
