Inicio
Sistema de diseño Ainwater

Sistema de diseño Ainwater

Creeando un sistema de diseño / Design System para plataforma de monitoreo

UX UI

Contexto del Proyecto

Sobre Ainwater

Ainwater es una empresa tecnológica dedicada a digitalizar el mundo del agua residual y de procesos, con el propósito de garantizar la seguridad hídrica. Su aplicación permite a plantas de tratamiento y empresas industriales monitorear en tiempo real la calidad del agua y los indicadores del proceso.

El Desafío

Con el crecimiento de la plataforma, Ainwater enfrentaba inconsistencias visuales y de interacción entre sus productos. Era necesario unificar la identidad visual y mejorar la eficiencia del desarrollo, garantizando una experiencia coherente y accesible en todas las interfaces.

Responsabilidades:

Auditoría visual y de componentes existentes.
Revisión del trabajo de investigación previo sobre la experiencia de los usuarios.
Entrevistas con expertos en tratamiento de aguas y stakeholders técnicos.
Definición de principios de diseño alineados a la misión de la empresa.
Creación del sistema visual (tokens, tipografía, color, iconografía).
Documentación y prototipado en Figma.
Validación con equipo de desarrollo e implementación inicial.

Detalles del Proyecto

Cliente

Ainwater

Duración

6 meses

Año

2024

Herramientas

Notion Miro Figma Adobe Illustrator

Proceso de Diseño

Etapa 1: Discovery

• Revisión de interfaces activas y librerías de diseño previas.
• Entrevistas con desarrolladores para identificar fricciones.

Etapa 2: Definición

• Creación de principios de diseño: claridad, coherencia, accesibilidad y sostenibilidad visual.
• Alineación con la misión de Ainwater: cada decisión debía comunicar precisión tecnológica y compromiso ambiental.

Etapa 3: Construcción

• Foundations (Color, Tipografía, Espaciado, etc.)
• Componentes UI: botones, inputs, tablas, gráficos, etc.
• Estados y accesibilidad: contraste y feedback visual.

Etapa 4: Documentación

• Creación de una guía en Figma con ejemplos de uso, buenas prácticas y versiones responsive.
• Secciones del documento: Foundations, Components, Patterns, Brand Assets, Contribución.

Etapa 5: Validación

• Pruebas con desarrolladores para asegurar consistencia de tokens.
• Validación con usuarios internos (operadores de planta y analistas de datos).
• Ajustes en microinteracciones y densidad visual según contexto de uso.

Resultados

• 40% menos de tiempo en el desarrollo de nuevas interfaces.
• Incremento del 25% en la consistencia visual según auditorías internas.
• Adopción del sistema por todas las áreas digitales de Ainwater.
• Mayor percepción de marca tecnológica confiable y sustentable.