Construyendo un sistema de ilustraciones para (el nuevo) Bnext

Bnext Design Team
Bnext.design
Published in
3 min readJul 13, 2020

Con el proyecto del rebranding entre manos y viendo cómo estaba madurando la app, pensamos que era un buen momento para cambiar las ilustraciones. Queríamos crear un sistema a la altura de lo que venía, que tuvieran sentido y que le dieran ese “je ne sais quoi” que tanto nos gusta a todos.

El punto crucial fue decidir con quién queríamos trabajar. En el equipo en ese momento no teníamos capacidad de abordar el trabajo que suponía crear todas las ilustraciones, así que decidimos pedir ayuda fuera.

Seguíamos desde hace mucho tiempo a Miguel Camacho de Sensa y nos gusta mucho todo lo que hace y su capacidad de dejarse llevar por el cliente para crear ilustraciones 💖. Hace un par de años le hicimos el primer tanteo, pero no ha sido hasta que llegó 2019 que pudimos empezar a trabajar juntos.

Lo que no sabíamos (pero intuíamos) era que nos llevaríamos tan bien con el y que nos ayudaría tanto en este camino. Mano a mano hemos conceptualizado e ilustrado más de 60 piezas en varios tamaños que estarán repartidas por toda la app y web.

¿Qué cómo ha sido nuestro proceso de trabajo?

Nos arremangamos y empezamos a identificar todas las ilustraciones que se estaban usando, viendo su nivel de importancia, qué concepto ilustraban, si serían realmente necesarias o no, qué tamaño tenían…

A partir de ahí, Miguel desaparecía. De vez en cuando entraba al Slack y nos hacía alguna pregunta, y cuando ya tenía un estilo / concepto para validar nos pasaba sus bocetos.

Aquí podemos ver varios de los bocetos iniciales para “Pide tu tarjeta”.

Una vez validado el concepto ya pasaba a la creación de la ilustración. Donde se representaban las formas geométricas del imagotipo y la nueva paleta de colores, guardando coherencia con el resto de recursos gráficos.

A veces nos proponía distintos usos de color, otras distintas composiciones, y íbamos iterando hasta que estábamos conformes.

Detalle de una ilustración que finalmente no pasó el corte y sus variaciones de color.

Algunas, si nos gustaba la ilustración pero no del todo cómo acompañaba al concepto, la aprovechábamos para otro lugar.

Detalle de una ilustración pensada para un concepto (luz en casa) que nos gustó tanto que acabamos adaptando a Hipotecas.

Cuando las ilustraciones estaban listas, las incorporábamos a nuestro nuevo Sistema de Diseño lo que nos permitió compartirlas con todo el equipo y poder usarlas en todos los proyectos.

Y como todo esto nos parecía poco, nos animamos y nos pusimos a darles vida y animarlas, para que la experiencia del usuario cuando se encuentre con las ilustraciones tenga esa chispita de alegría que tanto nos gusta 💖.

Para terminar, en el roadmap de maduración del Sistema, pretendemos añadir guías de animación que apliquen a las ilustraciones así como al resto de la interfaz. También planeamos mejorar el uso de la librería con la construcción en base a fragmentos, que nos permita crear composiciones para llevar la estética de Bnext a otro nivel.

--

--

Bnext Design Team
Bnext.design

@yourbnext product design, copy and graphic design team