Project Overview
AFC Chile (Administradora de Fondos de Cesantía) is the institution that manages Chile's unemployment insurance fund — a mandatory system that protects workers during periods of unemployment. The Sucursal Virtual Empleadores is the employer-facing portal where companies manage their workers' contributions, enrollment, termination, and certificate generation.
This project, carried out at Amable, involved updating and expanding an earlier prototype (2015) into a fully responsive, production-ready front-end. The goal was to modernize the employer dashboard experience — making it easier for HR departments and small business owners to manage their unemployment insurance obligations.
The Challenge
The existing employer portal presented several usability and technical challenges:
- Outdated Prototype: The 2015 Axure prototypes needed significant updates to reflect current functionality and modern UI patterns
- Complex Financial Dashboard: Employers needed to track multiple financial states — overdue payments, contribution errors, refunds, and payment history — in a single coherent view
- Worker Management Complexity: Individual and bulk onboarding/termination flows required careful UX attention to prevent errors in a process with legal implications
- Responsive Requirements: The portal needed to work across devices, from desktop workstations to tablets used by small business owners
Process
Phase 1: Prototype Review & Update
We began by auditing the existing 2015 Axure prototypes, mapping them against current platform functionality:
- Information Architecture Review: Analyzed the existing navigation structure and identified gaps between the prototype and live platform
- Flow Mapping: Documented all employer-facing workflows — from login to contribution payment, worker management, and certificate generation
- Updated Wireframes: Revised the interaction design to reflect 2019 functionality requirements and modern UX patterns
Phase 2: Visual Design & Front-end Development
With updated flows approved, we moved into visual design and implementation:
- Sketch Design Files: Created high-fidelity visual designs for all portal screens, establishing a consistent design language
- Bootstrap 4 Implementation: Built responsive HTML/CSS/JS templates using Bootstrap 4 as the foundation, ensuring cross-device compatibility
- Component Library: Developed reusable UI components for financial data display — summary cards, data tables, status indicators, and alert patterns
- Interactive Prototyping: Implemented functional front-end prototypes with JavaScript interactions for form validation, tabbed navigation, and dynamic content loading
Key Features
- Employer Dashboard: Financial summary with cards showing overdue payments, contribution errors, pending refunds, and recent activity at a glance
- Worker Management: Individual and bulk onboarding/termination flows with form validation and confirmation steps
- Contribution Tracking: Tabbed views for monthly contributions, payment history, and detailed breakdowns by worker
- Certificate Generation: Online generation and download of employer compliance certificates
- Payment Processing: Guided payment flows for overdue contributions with error resolution steps
- Responsive Design: Fully functional experience from desktop to tablet, built on Bootstrap 4's responsive grid
Key Deliverables
- Updated Prototypes reflecting current platform functionality and improved user flows
- Sketch Design Files with complete visual design for all portal screens
- 20+ Responsive HTML/CSS Pages built on Bootstrap 4 with JavaScript interactivity
- UI Component Library with reusable patterns for financial dashboards, data tables, and form elements
Project Artifacts
A sanitized sample of the responsive front-end templates delivered for the employer portal:
- Front-end templates (GitHub) — Bootstrap 4 responsive HTML pages including employer dashboard, worker management flows, contribution tracking, and certificate generation
Note: This repository contains a sanitized front-end prototype/template set with no sensitive data.
