- Inicio
- Sistema de diseño Ati
Sistema de diseño Ati
Creando un sistema de diseño / Design System para plataforma de visualización contable
Contexto del Proyecto
Sobre Ati
Ati es una plataforma tecnológica enfocada en simplificar la gestión contable y financiera para pequeñas y medianas empresas. Su objetivo es transformar datos complejos en visualizaciones claras e intuitivas que permitan a emprendedores y equipos financieros tomar decisiones informadas sin necesidad de conocimientos técnicos avanzados.
El Desafío
Con el crecimiento acelerado de su base de usuarios, Ati enfrentaba desafíos importantes: interfaces fragmentadas entre diferentes módulos, falta de cohesión visual en gráficos y tablas, y dificultades para escalar el diseño de manera eficiente. Era necesario crear un sistema de diseño robusto que unificara la experiencia, mejorara la accesibilidad y acelerara el desarrollo de nuevas funcionalidades.
Responsabilidades:
- Auditoría de componentes y patrones existentes en la plataforma.
- Análisis de necesidades con stakeholders y equipos de producto.
- Entrevistas con usuarios PyME para entender contextos de uso.
- Definición de principios de diseño alineados con la misión de democratizar la gestión financiera.
- Diseño del sistema visual completo: tokens, paleta cromática, tipografía, iconografía y componentes.
- Creación de biblioteca de componentes en Figma con documentación detallada.
- Colaboración estrecha con desarrollo para implementación y validación técnica.
Detalles del Proyecto
Cliente
Ati
Duración
5 meses
Año
2024
Herramientas
Proceso de Diseño
Etapa 1: Investigación y Auditoría
- • Mapeo de componentes existentes y análisis de inconsistencias visuales.
- • Entrevistas con usuarios PyME para identificar puntos de fricción en la comprensión de datos financieros.
Etapa 2: Definición de Principios
- • Claridad: Los datos financieros deben ser comprensibles al primer vistazo.
- • Confianza: El diseño debe transmitir profesionalismo y seguridad.
- • Accesibilidad: La plataforma debe ser usable para usuarios con diferentes niveles de conocimiento contable.
Etapa 3: Diseño del Sistema
- • Foundations: Definición de tokens de color, tipografía, espaciado y grillas.
- • Componentes: Diseño de botones, formularios, tablas de datos, gráficos financieros y tarjetas informativas.
- • Patrones: Creación de layouts para dashboards, reportes y flujos de ingreso de datos.
Etapa 4: Documentación y Guías
- • Creación de biblioteca en Figma con especificaciones técnicas y casos de uso.
- • Documentación de buenas prácticas: jerarquía visual para datos, uso de color en gráficos, estados de componentes y responsive design.
Etapa 5: Implementación y Validación
- • Colaboración con equipo de frontend para traducir tokens a código.
- • Testing con usuarios reales en módulos críticos: flujo de caja, reportes financieros e ingreso de facturas.
- • Iteración basada en feedback para mejorar legibilidad de gráficos y jerarquía de información.
