BBVA
"Design system" seems to be a buzzword in the design industry— everybody wants one, yet the reasons why organizations need one usually fall into oblivion.
When we're working on the design and development of digital products, if they are not built on a solid foundation, it's easy to lose the focus, being therefore forced to pay the technical and design debts accumulated over time. These are often caused by tight deadlines, implementation difficulties and/or the lack of a common language in increasingly large design teams.
But we don't have to fall into the error of considering that a design system can be built from a UI KIT by changing colors or that it has to stay in a Sketch file. It implies much more: a design system must influece the structures, processes and, especially, the culture of organizations, because organizations are not all the same, and without all that it is impossible to maintain and scale in the future.
BBVA is one of the largest banks in Spain and the most committed to the (spoiler-alert) digital transformation. Over the last few years, they have opted for the digitalization of their products and operations, as a means of bringing traditional banking into the pockets of their customers.
Both their web and mobile channels have been recognized by Forrester in 2018 —and for the second year in a row— as the best in Europe and around the world.But to get here, and above all to keep it in time, it is necessary to recapitulate and lay the foundations for the future.
The project was born as a need for BBVA Spain to shape and unify under a single tool the changes that were taking place in 2017.
The bank had opted for a total change in the visual language of their digital products with the Coronita project, when they decided to change the navigation and information architecture of the mobile application. Indeed, all of these innovations had to be applied and documented in order to be scalable in the future.
My role in the team was to help to create a system that would allow us to standardise the work they had already done up to that point, and lay the foundations for the future as part of BBVA's own design team.
One thing was clear to us from the beginning: the design system shouldn’t only be limited to one design deliverable, but also get integrated in the workflow of all the teams, as well as meet the day-to-day needs of the people involved in both the design and development of the application.
First, we began by auditing our—old and new— designs, hand in hand with the UI Development team, in order to analyze how the components should evolve, and also to identify where they were breaking or didn't meet the needs of the teams.
With all this information on the table, we created a set of rules to help us lay the foundations of the new system, being the core idea:
Normally when we think about the creation of components we resort to the categorization of atoms, molecules... However, when production working is concerned, it is more complicated to re-categorize it.
In our case, we opted for the golden middle way: we defined our own taxonomy in collaboration with the machining and development teams. This, along with the design bases, allowed us to spread the same language among all quickly.
As we created the components, we made a master file in sketch, which we called...BRITNEY!
Yes, why not? It's easier to remember a name rather than a series of numbers and, in this way, everyone knows where to look (for the information?).
As we grew, we organized the components into artboards, based on the taxonomy we had built-up, defining one by one their use, construction in development, visual style, interaction, accessibility and if required, tone of communication.
From the beginning the team knew that the project was going to be a challenge. A change of brand, plus a change of architecture and navigation, while laying the foundation for the new design system of an application with several years in the market and awarded as the best banking application in the world according to Forrester.
In short, we can draw the following conclusions:
This is for people. A design system is not only based on a sketch file or on the symbols of the components, it is also about people. You have to understand how organizations, and specially people, work; without that everything falls like a house of cards.
Not everything is forever. No matter how much we fall in love with our work, we have to understand that design system is is alive —very alive— and we have to prepare it so that any change or evolution is easy to implement.
Communication and more communication. It is vital that all teams are aligned; the responsibility is not only in the hands of the designers, as this is a task of coordination between all the teams involved.
First of all, my sincere thanks to Hugo Sierra, Product Design Lead at BBVA, for believing in me and giving me the opportunity to take part in this project as a part of his team.
Of course, I also want to thank all the Spain Design team and the GLOMO-Spain team. We must not forget that this is not the result of the work of one person, but of an entire team; and Secuoyas for being a great support during the whole project.
