Y llegó el día.. 💥 en BigBuy creamos nuestro sistema de diseño
Los sistemas de diseño son cada vez más conocidos y utilizados en el campo de la experiencia de usuario. Permite al equipo establecer patrones y contar con una serie de elementos que se deben reutilizar para crear funcionalidades. Aportan orden, consistencia y escalabilidad.
El sistema de diseño tiene que ser flexible y mantenerse vivo, nunca debe ser estático, sino dinámico. Evolucionando con el producto y su diseño.
Por eso en BigBuy nos pusimos en marcha para crear la coherencia y consistencia visual que tanto necesitábamos. Era necesario para poder construir mejor y más rápido.
🤷 Por qué necesitamos un sistema de diseño
BigBuy ha experimentado un gran crecimiento a lo largo de estos últimos años. Trabajamos en muchos proyectos de forma paralela, y empezábamos a vivir en un caos cada vez que teníamos que implementar un nuevo diseño o funcionalidad.
Aprovechando la migración al nuevo framework, vimos claro que necesitábamos definir un lenguaje común para poder escalar y crecer de una forma controlada.
De esta forma acortaríamos significativamente los tiempos de ideación, desarrollo y elaboración de productos. Dedicando menos tiempo a pensar en pequeños detalles y más a lo que aporta valor en nuestro negocio.
¡Los grandes cambios impulsan nuevos retos!
👩🏽💻 Empezamos a trabajar
El objetivo que establecimos para crear este sistema fue crear un lenguaje de diseño más atractivo y accesible. Consiguiendo una eficiencia a través de componentes bien definidos y reutilizables.
Para enfocar nuestros esfuerzos, comenzamos auditando el contenido visual que teníamos y creando una base. No quiero hacer spoiler de este proceso, lo veremos después… 🔜
La mejor manera de empezar, era abordar los problemas de frente, vivíamos en un auténtico caos, no solo el departamento de ux/ui sino también nuestro equipo de desarrollo y necesitábamos un cambio.
👆 Estableciendo principios
Para poder rediseñar estas páginas necesitábamos establecer algunos principios para poder guiarnos y asentar las bases de un buen producto.
- Unificado. Los diseños deben partir de patrones y reutilizar elementos. Esto da coherencia y cohesión, y agiliza los procesos de creación y mantenimiento.
- Reticular. El diseño debe utilizar un sistema de proporciones definido, para armonizar y organizar el conjunto.
- Racional. El diseño visual se debe basar en decisiones lógicas y razonadas.
- Estético. La calidad estética del diseño repercute directamente en la utilidad y usabilidad de los productos.
- Comprensible. Nuestro reto es realizar productos accesibles y claros. El usuario siempre deberá poder entender todo de manera fácil.
🎨 Referentes
Los sistemas de diseño más inspiradores para nosotros fueron:
- Carbon creado por IBM: https://www.carbondesignsystem.com/
- Human Interface de Apple: https://developer.apple.com/design/
- Polaris Shopify: https://polaris.shopify.com/
- Material Design de Google: https://material.io/
- Airbnb: https://airbnb.design/building-a-visual-language/
- Fluent Design System de Microsoft: https://www.microsoft.com/design/fluent/#/
- Atlassian: https://atlassian.design/
- Uber: https://brand.uber.com/es/es-es/
👩🎨 Asentando las bases
Como comentaba más arriba empezamos la auditoría de elementos visuales que teníamos ya definidos y comenzamos a crear una guía de estilos básica, con los elementos más importantes: layout, tipografía, colores, iconos y arquitectura de la información.
Esta base demostró ser esencial para poder guiar nuestro trabajo en una dirección unificada, dejándonos espacio para poder explorar soluciones creativas en cada uno de nuestros diseños.
De esta forma nos dimos cuenta que todos estábamos trabajando juntos, hacia una misma idea y solución a tantos de nuestros problemas.
Empezábamos a ver la luz…
🔚 Conclusión
La creación de nuestro Sistema de Diseño valdrá la pena, esta inversión de tiempo y esfuerzos, supondrá una gran evolución.
La implementación de estos nuevos diseños será mucho más rápida y tener un lenguaje común entre diseñadores y desarrolladores, la verdad, es que no tiene precio… 😏
Otra gran ventaja es la validación de los diseños, ya no entramos a aprobar colores o tipografías, las tenemos bien definidas, ahora mismo lo primordial es centrarnos en el concepto a transmitir y en la experiencia satisfactoria que debe sentir el usuario navegando por nuestra web.
Estamos intentando ser la empresa más feliz del mundo, y por supuesto trabajamos para que nuestros clientes también lo sean. ¡Queremos que disfruten navegando por nuestra web!
“La tecnología hace posible lo que antes era imposible. El diseño hace que sea real”
Michael Gagliano
