Design Systems

Dentro de mis habilidades como diseñadora está la construcción de componentes para sistemas de diseño. En esta oportunidad, realicé distintas ilustraciones que se utilizaron dentro del sistema de diseño de varias empresas para pantallas de feedback, empty states, acciones de éxito, errores y acciones en proceso.

Cliente: Instaleap y PrOffice

Servicio:
Product Design - User Interface

Año:
2020

Instaleap y PrOffice

Estas empresas no contaban con un sistema de diseño, por lo que no tenían  recursos gráficos como ilustraciones para pantallas de feedback de acciones.

Una vez clara esta necesidad, diseñé distintas ilustraciones para este sistema de diseño, en donde se contemplaron casos de uso como feedbacks de éxito, error, productos especiales, acciones como envío de productos y empty states.

El proceso

01.

Definición y benchmark

Una vez identificadas las ilustraciones necesarias, realizamos un benchmark de estos recursos visuales, analizando las soluciones implementadas por distintos competidores clave.

Dashboard mockup
Dashboard mockup
02.

Bocetado y definición conceptual

Iniciamos el proceso con el bocetado de las ilustraciones para cada uno de los estados definidos. Los bocetos fueron revisados y validados con el equipo, donde se recolectó feedback esencial para proceder con el diseño en alta fidelidad.

03.

Diseño final e implementación

Se finalizaron las ilustraciones aplicando los comentarios de la retroalimentación. Posteriormente, se procedió con la implementación en las pantallas del producto, preparándolas para la fase de desarrollo.

Dashboard mockup
Dashboard mockup
04.

Desarrollo

Durante la etapa de desarrollo, desde diseño hubo un acompañamiento constante. Esto permitió verificar la correcta implementación y asegurar que el producto final estuviera completamente alineado con las definiciones de diseño originales.

El resultado

La disponibilidad de estas ilustraciones dentro del sistema de diseño nos permitió enriquecer la experiencia del usuario. Estos recursos visuales se utilizaron estratégicamente para comunicar los distintos estados de respuesta a las acciones realizadas por el usuario en sus interacciones.

< Anterior Proyecto