Mario
Welcome
1 item
173K available

Hi!

It’s a me,
Mario!
Product designer at‍
Paint
Projects
3 items
173K available
Lana
2019-2022
BBVA
2016-2018
Yaquevas
2015
BBVA
Product designer
Design system
2016 - 2018

Creating the puzzle pieces

Creating the puzzle pieces

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.

BBVA

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.

First steps

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.

Creating the components

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.

The library

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.

Lessons

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.

Big thanks!

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.

Status
Product designer
Mobile | Design system
2022 - 2024

Jump to Web3

Creating the puzzle pieces

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.

BBVA

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.

First steps

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.

Creating the components

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.

The library

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.

Lessons

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.

Big thanks!

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.

Lana
Product designer
App | Web | No-code
2019 - 2022

From fintech to superapp

What's Lana?

Lana is a fintech whose objective is to give access to financial products to people who, due to the conditions of their work, have been excluded from the systems created by traditional banks.People who live day to day, whose goal is not to buy the cell phone that just came out, or to make their dream trip.

They need the money to pay their bills, the gas for their vehicle with which make more trips and to take even better care of their family. For them it's Lana.

What is it’s origin?

Lana was born in the year 2018 from Cabify's new business area. The reason? They saw that their drivers often didn't have a bank account where they could deposit their earnings. They gave family accounts or asked to receive their income in cash.

1 app · 3 countries · All kind of products

During the first steps of Lana, the products we offered were quite limited. Like any other fintech it was an account linked to a card, and with it, the traditional operation: transfer, deposit...

Step by step we added more and more products that could be interesting for our users, such as loans, insurance, a telephone operator, equipment for their daily life, sale and financing of motorcycles or bikes...

We no longer had in our hands a traditional fintech, it becomes to be something more...

Where to start?

One of the problems we had encountered during all this time was the user experience after contracting a service. Let's take a loan for example: How does the user relate to the loan while he is paying it? Where and how do we show them the information about the next payments? Or how to advance or cancel the loan?....


With all these questions and many more, we started to think about the idea that the home page should evolve and not only be a contracting experience, but also an information consumption experience.

We created the first designs and we tested it little by little in different interviews with users. The idea worked, the users understood that what they were contracting had a reflection in the home page, which gave us new ideas...

The Market , where it all starts

To bring together all Lana's services and to be able to add any other that could arrive, we created the concept of Lana Market. It's function, be the place where users be able to find all kinds of services they might need in their daily lives, from loans, to finance vehicles and all under the Lana experience.

We categorized the products and created sections where the user could consume the products directly. We created a visualization of the market in which Lana is the pre-scriptor of the products, regardless of who is the partner that sells them.
The numbers were positive, we achieved an increase in requests for product financing, payment of invoices and most importantly, users understood that in the market they could find anything they needed for their work.

From the implementation side we decided to build it with no-code tools (webflow in this case) in order to have the ability to iterate it in an easy and fast way, empowering the business teams to build their own experiments. In my case, I led the implementation and the different iterations that it has been placed, taking care of both the design and the code.

Trust points, the game to discover Lana

One of the challenges we faced with the new design of the super app was that the user could discover all the features of Lana. To do it, we developed a small 5-level game for users and Lana, with the objective to gain mutual trust, getting to know the platform, and at the same time, unlocking functionalities.

We divided it into two parts, a first one of mutual learning and a second one of engagement.

The first three levels are for the user to discover Lana: make their first deposit, request and activate their card, make their first bill payment.... In the meantime we're able to get to know them better, learn their app usage habits and thus in the following levels, be able to offer them better products.

In the next two levels of engagement, the user gains access to more exclusive benefits. For example, they can apply for larger loans, access to product financing or higher cashback for their purchases with the card. In return, the missions they have to complete are a bit longer and require a higher level of engagement on their part.

The results were very positive. In one hand, we achieved to get users to play the game and feel challenged to level up. Also we managed to significantly increase the level of engagement and active users per month, and finally, it helped us to better understand the consumption habits and use of the application of our users.

Home belongs to user, not to Lana

We completely transformed the Home. It's no longer a list of buttons that lead to functionalities, it's a reflection of the products that the user would have contracted in the Market.


It could have an account and a loan, or just a loan, or a loan and a cellular line... no two homes are the same, it belongs 100% to the user. For that we designed a set of widgets per product to serve as a quick information point for the user to control the details of the products. We tried to make them as simple, clean and functional as possible, so that there was not an overwhelming feeling of information as soon as you enter the app.

All this gave us at the same time a very wide modularity to scale and play with different scenarios in different countries.

The achievements

Scale.
We managed to make a product constrained in a traditional fintech experience to scale to infinity, being able to absorb any new product that came from the business teams.

Personalization.
No two Lana apps are the same, each user can make it their own depending on the products they need from our Market. A market that evolves and learns from our users, adapting and anticipating their needs.

Super app experience.

Evolve the app to stop being a fintech and be able to host any type of product that app workers may need.

Users love Lana.
One of the most rewarding things when you design for people is their recognition and gratitude.

Big thanks!

First of all I would like to thank Sam Lown and René Galindo for the opportunity they gave me to join Lana, believing in me to help with this amazing project.

Also to Pablo Muñiz (CEO) and Sara Diez (CPO) for supporting me during all this time and giving me the space to think and execute the projects in the best way.

Yaquevas
Product designer
Web | App
2015

Running errands

Running errands

You need that lamp. It's the perfect complement for your living room.... or maybe, you've fallen in love with that couch, because it's sooo cozy!
BUT you live downtown, you don't have car, you've got no time and they don't give you an option for home delivery.But imagine there is someone in a big department store out of the city. While they walk down the aisles, they remember a neighbor told them he needed a lamp. Or maybe what he needed was that cozy couch... so how about letting to  know him you are going to buy it.
Yaquevas tries to provide a solution to the need to bring the large shops that are on the outskirts of the cities, to the centre, minimising travel and increasing the number of people who have access to them.

How it works

If you need something, all you need to do is to look for the product you want in the application and set the reward you would be willing to pay the other user to take it home to you. Once published just wait for a user around you to agree to do the errand or ask you to do so on a published trip.If, on the other hand, you are going to spend Saturday morning in Ikea and you want to run an errand to a neighbor and earn money for your purchase, all you have to do is to publish your trip and the car space you have to transport errands.

Design process

For 6 months we were trying the idea of yaquevas looking for the best way to connect neighbors with errands to neighbors who will go shopping. We evolved the visual style and interaction while defining the business model.For 6 months we were trying the idea of yaquevas looking for the best way to connect neighbors with errands to neighbors who will go shopping. We evolved the visual style and interaction while defining the business model.

This is it!

And this is the final result!
We can't show the complete product, but if you have any questions or suggestions do not hesitate to contact us ;)

Big thanks!

I would like to thank Jana Gonzalez, CEO, and creator of the idea, who gave me the opportunity to participate in the design of yaquevas as a partner, depositing all her confidence to make a great product!
Also special thanks to Sergio de Pazos, developer of both the technical part and the idea, you do not know how much I learned from you :)

Welcome
Projects
Paint
no-code