© 2023 AARDesign. All rights reserved.
El camino hacia la consistencia, eficiencia y flexibilidad de producto
Año: 2022-2023
Mi rol: diseñadora UX/UI
Compañía: Proyecto interno para AssessFirst.
Equipo: Éste era un proyecto enorme en el que varios equipos se vieron envueltos en su definición. Trabajé mano a mano con el resto del equipo de diseño durante todo el proceso. También trabajamos con el equipo de Marketing, el CEO y el jefe de producto en la revisión de la marca previa. Para la definición y diseño del sistema de diseño trabajamos con el equipo de desarrollo Front-end.
Un sistema de diseño trae uniformidad y consistencia a la experiencia de usuario, y eficiencia en el diseño y desarrollo del producto. Tanto la aplicación como el equipo de AssessFirst había crecido y un sistema de diseño ayudaría a resolver los problemas que ese crecimiento había traído.
Falta de coherencia entre el diseño de producto y los materiales de marketing
Falta de consistencia entre los elementos de diseño y el código
Problemas en el código y en los fundamentos de diseño como los colores o la tipografía
Pérdida de tiempo en el diseño y desarrollo del mismo elemento repetidas veces
1. Revisión de marca: Con el equipo de marketing, el CEO y la jefa de producto trabajamos en actualizar y redefinir la marca.
2. Definición técnica: El equipo de desarrollo definió el nuevo framework a usar, lo que estableció ciertas pautas y requerimientos de diseño.
3. Fase de diseño: El equipo de diseño trabajamos en el diseño de componentes, cuidando las necesidades de la aplicación y la accesibilidad, y creando la correspondiente documentación.
4. Fase de desarrollo: Durante el desarrollo de los componentes, el equipo de diseño pudimos testearlos, discutiendo y resolviendo cualquier limitación técnica que surgiese.
Antes de crear el sistema de diseño era importante revisar la marca, actualizarla y unificarla con el equipo de marketing. También había algunos problemas de accesibilidad de algunos de los colores que aprovechamos a resolver. La idea no era cambiar la marca completamente, sino mejorarla y reflejar mejor la personalidad de la compañía.
En aquel momento la marca era muy colorida y necesitaba ser más sofisticada y profesional. Decidimos reducir el uso de los colores definiendo los colores principales a un único color principal, un único color de acento y un color de fondo.
Por supuesto, aún era necesario una paleta de apoyo para los colores de las puntuaciones y otras categorías. Hasta el momento la paleta de los colores de puntuación estaba construida sobre el sistema del semáforo, que estaba creando problemas de accesibilidad, además de reacciones negativas hacia el color rojo. Tras una profunda investigación, decidimos cambiar esta paleta por una basada en el sistema del termómetro, pero manteniendo cierta variedad de tonalidades en los colores de la progresión para reflejar el dinamismo, la innovación y la frescura de la marca.
También revisamos los recursos gráficos utilizados. El producto usaba varias ilustraciones de estilo flat, mientras que marketing usaba fotos de personas no definidas. Con el fin de alejarnos de infantilismos, decidimos dejar de usar ilustraciones en el producto, sólo usaremos icono de línea y animaciones en el mismo estilo. Para los materiales de marketing se determinó usar fotos profesionales pero naturales de personas y mockups del producto.
Una vez la marca había sido actualizada, nos reunimos con los jefes de producto y los jefes de desarrollo para discutir los requerimientos técnicos del sistema de diseño.
Como el lenguaje de programación ya utilizado era Vue.js, la decisión técnica tras una exhaustiva investigación fue usar el framework Vuetify para la nueva estructura de las pantallas y los componentes.
Este framework incluía su propio sistema de diseño que necesitaríamos reusar y adaptar a nuestras necesidades y marca. Este framework reforzaría la consistencia del código en las diferentes plataformas. Pero editar los atributos de los componentes implicaba ciertos requerimientos y limitaciones a lo que tendríamos que ajustarnos.
En aquel momento comencé a trabajar en el diseño con el resto del equipo de diseño. Revisamos toda la aplicación e identificamos los componentes necesarios y en qué contexto eran usados.
Era el momento para ajustar el estilo de los elementos, como las formas y los colores. También aprovechamos la oportunidad para asegurar la accesibilidad de los componentes.
Seguimos la perspectiva del diseño atómico, empezando por los elementos más pequeños y simples para, con éstos, construir otros más complejos.
Primero, definimos los fundamentos: grids y espaciados, colores, tipografía, elevación y controles de teclado. Éstos son atributos globales que afectan a la construcción de los componentes.
Seguimos con el diseño de los componentes átomos, los elementos UI más básicos.
Entonces diseñamos las moléculas. Las moléculas son grupos relativamente simples de átomos funcionando juntos como uno solo.
Después pudimos definir los organismos, grupos relativamente complejos de átomos, moléculas y otros organismos.
Finalmente, establecimos ciertos patterns o plantillas de algunas de las pantallas del producto, como las tablas y los formularios, objetos a nivel de página que colocan los componentes en el diseño y articulan la estructura del contenido subyacente del diseño.
También se crearon la correspondiente documentación y pautas para asistir al desarrollo y al futuro mantenimiento del sistema de diseño.
Durante la fase de desarrollo, que aún está en progreso, los desarrolladores prepararon un entorno donde ellos podrían desplegar los componentes y nosotras podríamos testear los estilos, comportamientos y accesibilidad. La idea era poder testear los átomos antes de que los desarrolladores empezasen a usar estos componentes para desarrollar las moléculas y testear las moléculas antes de que desarrollasen los organismos.
También tuvimos la oportunidad de testear los componentes en contexto durante el testeo de la refactorización de algunas funcionalidades de la aplicación, para garantizar que funcionaban tal y como estaba planeado.
Un sistema de diseño es un proyecto sin final, está destinado a evolucionar y mejorar con el tiempo. Necesita ser sólido y consistente pero también flexible, para que pueda crecer. Aunque la creación del sistema de diseño estaba casi terminada, seguiría creciendo, por lo que su mantenimiento es esencial.
Mirando atrás, podría identificar algunas cosas que podríamos haber hecho mejor. El mayor problema era que el equipo de diseño era pequeño y, mientras trabajabamos en el sistema de diseño, también teníamos que seguir trabajando en otros proyectos. Un sistema de diseño es un proyecto grande y fundamental para un producto, y habría sido mejor centrarse en el sistema de diseño durante algunos meses.
Sin embargo, creo que hicimos un buen trabajo que seguirá mejorando. Incluso antes de publicar la primera versión del sistema de diseño, ya empezamos a notar los beneficios. El rediseño de las funcionalidades del producto usando el sistema de diseño ha sido más rápido y eficiente, y mantiene la consistencia entre las diferentes funcionalidades.
© 2023 AARDesign. All rights reserved.