Visor es una empresa mexicana del sector financiero y tecnológico que ofrece información en financiamiento para Pymes por medio de diversas herramientas online.
Por lo anterior, requerían de un sistema de diseño para homologar todas las plataformas existentes ya que existía discrepancia en la mayoría de los productos de Visor.
Lo primero que me tocó hacer en el equipo de UX/UI fue revisar el material gráfico con el que se basaban para diseñar las interfaces de la empresa. Posteriormente, tuve una sesión con los desarrolladores frontend para saber el material que usaban para la programación de los diseños entregados por el equipo de UX/UI.
En consecuencia, pude detectar diferencias entre los materiales que usaban ambos equipos tanto para diseñar como para desarrollar. Así pues, decidí partir con esos materiales y hallazgos para iniciar el proyecto a mi cargo.
Para crear el sistema de diseño me basé en la metodología de Brad Frost llamada Atomic Design. Esta metodología está compuesta por 5 etapas:
Átomos
Moléculas
Partículas
Plantillas
Páginas
Estas etapas sirven para crear el sistema de diseño de una manera mejor estructurada y jerárquica.
Debido a lo anterior, pude desglosar los componentes hasta lo más mínimo como el color, sombra, tipografía, espacios, etc. Hasta homologar la composición ideal para cada una de las secciones que compondrían los productos de Visor.
Al final, entregué un sistema que servirá para rediseñar los productos ya existentes de Visor así como los nuevos.
Resultados
Se entregó un sistema de diseño que permite definir las características de los componentes, sus usos correctos e incorrectos y las estructuras que tendrán los productos de Visor. Esta herramienta servirá para los equipos de TI y UX/UI.