Project overview
Alva Design System
El ecosistema digital de Edison carecía de coherencia visual y funcional, dificultando la escalabilidad y la experiencia de usuario. Sin un sistema de diseño estructurado, la interfaz presentaba inconsistencias en componentes, tipografía, color y accesibilidad, lo que afectaba la eficiencia en el desarrollo y el reconocimiento de marca.
Alva Design System propone una solución integral para estandarizar la experiencia digital de Edison, facilitando la escalabilidad del producto y mejorando la eficiencia en diseño y desarrollo.
mi rol
Design System Designer
UX Research & Benchmarking: Investigación de usuario, análisis de mercado, auditoría de componentes y evaluación de estándares de la industria.
Arquitectura de Diseño & Atomic Design: Implementación de Atomic Design para la estructuración modular de componentes UI, facilitando la escalabilidad y consistencia.
Color System & Tonalización: Desarrollo de una paleta de colores accesible, definición de tonalización para estados y optimización del contraste para mejorar la legibilidad.
Componentización UI & Design Tokens: Creación de botones, formularios, tarjetas, navegación y layouts responsivos, utilizando design tokens para garantizar coherencia visual en múltiples plataformas.
Accesibilidad & Usabilidad | WCAG 2.2: Aplicación de los principios de accesibilidad (WCAG 2.2), mejora en contraste, tipografía, jerarquización visual y pruebas de usabilidad para optimizar la experiencia del usuario.
Documentación & Guías de Estilo: Desarrollo de guías de diseño y uso de componentes, documentación de reglas de iconografía, tipografía y lineamientos para desarrollo frontend.
Pruebas & Iteración: Auditoría del sistema de diseño, pruebas A/B, test de usabilidad y mejoras continuas basadas en análisis de datos.
📅 Duración: 7 semanas
Sistema Unificado de Componentes
Creación de una librería modular en Figma con componentes reutilizables, asegurando coherencia visual y funcional.
Tokens de Diseño
Implementación de variables globales para tipografía, color, spacing y estados interactivos, optimizando la consistencia.
Accesibilidad
Aplicación de estándares WCAG 2.2 y validaciones de contraste y usabilidad en todos los elementos del sistema.
Optimización para Escalabilidad
Uso de Atomic Design para estructurar componentes, permitiendo un crecimiento ordenado y adaptable.
Eficiencia en Desarrollo
Documentación clara y detallada que mejora la colaboración entre equipos de diseño y desarrollo, reduciendo tiempos de implementación.
Desafíos encontrados
Inconsistencia Visual: Variabilidad en componentes, botones y esquemas de color.
Falta de Estandarización: No existían principios sólidos para UI ni documentación centralizada.
Accesibilidad y Usabilidad: Algunos elementos no cumplían con WCAG 2.2, afectando la experiencia de usuarios con discapacidades.
Escalabilidad: El crecimiento de Edison requería un sistema modular adaptable a nuevas necesidades sin comprometer identidad ni funcionalidad.
Objetivos y logros de Alva
Consistencia Escalable: Implementación de un sistema de tokens y componentes reutilizables que garantizan coherencia visual y funcional.
Accesibilidad y Usabilidad: Aplicación de principios basados en datos y estándares WCAG 2.2 para optimizar la experiencia de usuario.
Modularidad y Eficiencia: Uso de Atomic Design y variantes en Figma para facilitar el desarrollo ágil y la escalabilidad.
Identidad Visual Unificada: Definición de tipografías, colorimetría y componentes alineados con los valores de Edison.
Si deseas conocer más sobre éste caso de estudio contáctame a través de axel@unchamo.art
Llevemos tu producto al siguiente nivel
Da el primer paso hacia una experiencia digital de alto impacto