User Interface System

Este caso de estudio explora cómo, en colaboración entre equipos de España y Argentina, unificamos criterios y optimizamos la experiencia en distintos productos. Tras un proceso de investigación, creamos un inventario de componentes y desarrollamos la primera versión de nuestro sistema de diseño, con más de 60 componentes reutilizables. Con principios claros, garantizamos consistencia, eficiencia y accesibilidad en interfaces aplicadas en más de 8 países.

Nuestro proceso

Research

Encuentro con la problemática y definimos el alcance de la solución.

UX

Conocimiento y entendimiento de la realidad del negocio.

UI

Diseño de componentes, interacciones y prototipos, mejorando la usabilidad.

Implementación

Acompañamiento y soporte a los equipos de desarrollo.

Mejora continua

Análisis de los resultados y propuesta de iteraciones para seguir mejorando.

Beneficios de un sistema de diseño

Experiencia unificada

Encuentro con la problemática y definimos el alcance de la solución.

Escalabilidad

Ecosistema adaptable y evolutivo en diversos contextos.

Predictibilidad

Mismos comportamientos y estética lo que reduce la curva de aprendizaje para los usuarios.

Robustez

Coherencia y calidad en el diseño.

Bases

Tokens & variables

Una base sólida garantiza la coherencia visual del diseño, facilita el mantenimiento y la escalabilidad, y mejora la colaboración con desarrollo mediante especificaciones claras y actualizaciones eficientes.

Moléculas

Construcción de componentes

Cada variante se configura con propiedades ajustables en Figma, garantizando flexibilidad, coherencia visual 
y un mantenimiento eficiente.

Átomos

Componentes

Se crearon 117 alias interconectados a los componentes permitiendo mostrar sus variantes en vista Light / Dark Mode y personalizaciones 
de marcas definidas.

Básicos

Botones, inputs, checkboxes, radio buttons, cards, dropdowns, chips, toggles, grilla y espaciados.

Navegación

Barras de navegación, pestañas, menús desplegables, breadcrumbs, paginación.

Comunicación

Notificaciones, tooltips, alertas, banners de mensajes, stepper, progress bar.

Interactivos

Sliders, carousels, date picker, 
time picker, date/time picker.

Átomos

Especificaciones y documentación

Informamos el uso y variantes de los componentes, incluyendo detalles como tamaño, color, tipografía y comportamiento interactivo. Esto asegura consistencia y facilita la colaboración entre los miembros del equipo.

Implementación

Guía de uso y aplicación del sistema

Generamos elementos para la implementación, incluyendo ilustraciones para errores, templates y pantallas finales. El objetivo es garantizar una aplicación coherente y eficiente del diseño en distintos contextos, proporcionando recursos visuales y guías prácticas para diseñadores y desarrolladores.

Mensajes de error

Mensajes acompañados por ilustraciones con la misma estética.

Templates

Uso de componentes y organismos en templates disponibles para desarrolladores.

Todo sistema es un proyecto a largo plazo, su implementación es un proceso gradual que debe alinearse con los objetivos de negocio y de cada equipo. Es clave planificar su adopción en conjunto con los equipos de desarrollo y acompañarlos en su integración.

¡Gracias!

¡Déjanos tu consulta!

Nuestro equipo de expertos responderá todas tus dudas.

    Abrir Whatsapp
    1
    Hola 👋
    ¿Cómo podemos ayudarte?