Portal Tributario Corporativo
Rediseño UX/UI y Sistema de Diseño
01
Contexto del Proyecto
una firma multinacional de auditoría y consultoría tributaria en Chile requería unificar y modernizar el ecosistema de herramientas internas de cumplimiento tributario en un solo portal seguro denominado Portal Tributario. Como Lead UX/UI Designer, el desafío consistió en diseñar un sistema de diseño corporativo robusto en React, TypeScript y CSS Modules, documentado en Storybook, que sirviera como base coherente para tres repositorios independientes (tax-portal-frontend, tax-portal-backend y celery-k8s).
02
El Desafío
La plataforma gestiona gran densidad de información financiera: grillas complejas de impuestos (F22, F29, F50), monitores de bots en tiempo real y asignación de grupos de sociedades. El reto principal era lograr que información tributaria compleja se sintiera clara y accesible siguiendo los principios de la Apple HIG (Human Interface Guidelines). Además, el sistema requería un esquema rígido de permisos (RBAC) y la capacidad de exportar reportes a PDF (vía WeasyPrint) y correos electrónicos (Mailing) con layouts planos especiales sin soporte moderno de CSS.
Vista manager
La capa ejecutiva: el cumplimiento de todas las sociedades de la cartera, las alertas del equipo y quién tiene acceso a qué. Datos ficticios de demostración.
Ingreso único
Acceso con Enterprise SSO mediante Microsoft o Google: el equipo no administra contraseñas nuevas.
Dashboard ejecutivo
Cumplimiento de IVA y Renta, observaciones abiertas y clientes activos de un vistazo, con un mapa mes a mes del estado de las declaraciones por sociedad.
Centro de notificaciones
Citaciones del SII, rectificaciones y declaraciones aceptadas llegan a un solo panel, ordenadas por urgencia.
Cumplimiento de IVA mensual
El año tributario del F29 en una tabla: lo declarado, lo observado y lo pendiente, con multas e intereses destacados.
Renta anual (F22)
La declaración aceptada, base imponible, impuesto determinado y saldo a pagar, junto a acciones rápidas y el historial de cambios.
Credenciales y accesos
Claves del SII y la TGR por sociedad, cifradas, con registro de auditoría y permisos asignados por analista.
Vista analista
La capa operativa: el día a día de quien declara, revisa y responde al SII por sus clientes asignados.
Dashboard operativo
Clientes prioritarios con su avance, formularios recientes y la descarga en ZIP de todos los F29 del año tributario.
Notificaciones SII
Todos los avisos legales del SII, filtrables por riesgo, tipo y canal, con el detalle siempre junto a la lista.
Detalle de notificación
Nivel de riesgo, impuesto, período clave y un extracto del documento oficial, para asignar una tarea o marcarla como revisada.
IVA mensual (F29)
Arriba, el avance del año, las observaciones y la deuda; abajo, cada período con su estado y acciones.
Detalle del período
Débitos, créditos e impuesto determinado desglosados por documento, junto a la información del pago y las observaciones del SII.
Año tributario en curso
Cuando aún no hay nada que declarar, la pantalla explica por qué y muestra cuánto falta para el plazo.
Años anteriores
Una alternativa al estado vacío que separa preparación y declaración, y lista el historial con acceso directo a cada formulario.
Extensión Companion
Una extensión de navegador que detecta al cliente e ingresa al SII o la TGR con credenciales cifradas, sin guardar contraseñas en el equipo.
Sistema de Diseño Portal Tributario Corporativo
Un sistema de componentes profesional, accesible y adaptativo basado en la estética nativa de Apple HIG, combinando los colores corporativos oficiales de una firma tributaria corporativa con directrices optimizadas para interfaces web y exportación a PDF/Mailing.
Tokens de color
Paleta primaria, secundaria y neutros definidos para garantizar contraste y consistencia.
Color de marca primario para botones principales (CTAs), estados activos y elementos interactivos clave de la plataforma.
Color de acento secundario para enlaces de texto, botones secundarios, navegación activa y acciones de soporte.
Avisos de advertencia, llamadas de atención críticas y resaltado de penalizaciones tributarias.
Fondo general agrupado detrás de las tarjetas y elementos del portal para dar profundidad visual (estilo iOS).
Superficies elevadas de tarjetas, formularios de datos e inputs de texto que flotan sobre el fondo gris.
Texto principal de alta legibilidad en pantallas claras.
Subtítulos, etiquetas secundarias, iconos desactivados y bordes de inputs.
Indicadores de cumplimiento tributario completado sin errores y procesos exitosos.
Estados de error en validaciones y acciones destructivas del sistema.
Escala tipográfica
Tipografía principal: Inter & SF Pro Text (Google Fonts / Apple Native) (Cumplimiento Corporativo y Accesibilidad)
Componentes y estados
Primitivas interactivas construidas con los tokens de color, radios y jerarquía.
Botones
Propuesta de Valor
Diseñamos una librería de componentes atómicos interactivos centrada en el cumplimiento corporativo y la legibilidad:
- Arquitectura de Diseño Atómico: Estructuración rigurosa de componentes en Átomos, Moléculas, Organismos y Páginas de demostración interactiva en Storybook.
- Estética Apple HIG Adaptativa: Paneles flotantes sobre fondos agrupados (#F2F2F7), bordes redondeados limpios de 16px, sombras sutiles y efectos de desenfoque de fondo (glassmorphism).
- Mapeo de UI Especializado para Exportación: Modos alternativos en Storybook que descartan esquinas redondeadas, efectos de desenfoque y transformaciones interactivas para una renderización perfecta en PDF e emails corporativos.
- Sistema de Permisos Integrado (RBAC): Componentes de control como 'PermissionGuard' y hooks reactivos para mostrar y ocultar de forma segura opciones de menú y acciones basados en los privilegios del usuario.
Proceso de Diseño y Desarrollo
Establecimiento de Fricción Cero en Finanzas
Mapeo de los complejos flujos de trabajo de los contadores y analistas tributarios para agrupar las métricas de renta anual, IVA mensual e impuestos adicionales de manera lógica.
Creación del Sistema de Componentes en Storybook
Desarrollo y testeo interactivo de cada componente (botones, grillas avanzadas, inputs de fecha, cargadores OCR) con controles en Storybook para garantizar consistencia y accesibilidad WCAG 2.1 AA.
Optimización para Entornos sin CSS Moderno
Investigación y desarrollo de layouts alternativos sin transformaciones ni sombras, específicos para el motor de generación PDF (WeasyPrint) y plantillas de correo para Outlook.
Seguridad e Integración Front-End
Diseño de la navegación dinámica que se oculta según roles del usuario, y estados de carga (skeletons) para mitigar la percepción de demora al procesar reportes pesados.
Resultados y Beneficios
Consistencia de marca en los 3 repositorios mediante la librería compartida
Cumplimiento en contraste tipográfico y accesibilidad del sistema
De renderizado de layouts en exportaciones a PDF (WeasyPrint) y plantillas de email
El Sistema de Diseño de Portal Tributario demuestra que la rigurosidad técnica de los componentes en React/TS, combinada con una estética nativa premium inspirada en Apple HIG, puede transformar herramientas corporativas tradicionalmente áridas en portales eficientes, seguros y de uso agradable.
¿Un reto parecido?
¿Tienes un sistema complejo que necesita claridad?
Conversamos directo y vemos qué conviene atacar primero.