The SuperApp Project

The story of the Super App project started with a product called “Advantages”. The only purpose of the Advantages is to show to BB’s (Banco do Brasil or Bank of Brazil) clients partners coupons inside the app. It looks like a simple idea (and it is) but became a huge success with users. With that in mind, we started to think about what could we do, to improve the revenue in that area. We also started to think about how can we be present in all our customer’s moments, not only in financial ones. With that in mind, we started the idea of the Super App.

Advantages Bank of Brazil product.

The concept of a super app refers to an application that isn’t limited to a specific function. A super app offers several services and products in a unique platform creating an own ecosystem of apps, where the user doesn’t need to leave it in order to do some activities their need day-by-day. It’s like get together many apps into one.

So, we started to bring non-financial products and services for the 20 million customers that use the bank’s app. We started to build partnerships with companies and, through APIs, we implement those services/products inside the app. Each partner/journey is intern named a “mini-app“, and it has a specific designing work respecting the partner workflow and the design system of the Banco do Brasil.

Discovery & Research

The first mini-app that we needed to design is one that sells gift cards. We started the discovery process looking for our partner’s journey. Because we were building the app through APIs, we need to consider the user flow that already existed. We also did some benchmarking during the process.

During the process of discovery, we discovered that we had some different styles of users (personas) that buy gift cards. To list a few: there is a gamer user, an early adopter tester (person who tests only because it’s a new thing), users that use gift cards as a payment method (they don’t want to insert credit card data in suspicious sites, so they bought gift cards) and so on.

We arrive at that conclusion after a workshop with some potential users of our product.

Image of the discovery workshop.

We also research some ways to validate how we call the product gift cards (in Brazil the literal translation of it is cartão presente). And to our surprise, we discovered that even for portuguese speakers the english term “gift cards” is more popular. After all that process, we start to design the Super App.

A print screen of the Google Trends Brazil page, where the blue line is the search for gift cards term at Google in Brazil, and the red one is the search for cartão presente.

Design & Development

As I said at the beginning, the super app concept is to bring several products inside the app. With that in mind, we decided to create templates for the mini-apps’ “core” screen using the BB’s (Bank of Brasil) UI Kit components.

We did that because, even that we were bringing external products inside the app, we want them to feel that they are always using BB’s products. So the templates show up really useful for creating a pattern between all mini-apps that we’ve created.

The Super App project was also a pioneer using the Bank of Brazil Design System. Because of our project being something new in the BB’s culture (non-financial services at the app), we were forced to think about new ways to build interfaces and components. And that was valuable for the design system team and, because of that, some of our design was used to build the new design language system. Even before our launch, the SupperApp brought some gains to the Bank of Brazil.

Designs created at SuperApp that were reused by the Design System.

Testing

We started to develop the project just when the COVID-19 pandemic began. So we are forced to use new ways to test our design. For our usability tests, we were forced to use remote tools (for this situation, we use a platform named “Maze”), and it shows up really functional. We were able to test several journeys, and with the results we could rethink the design and improve it before we send it to the development team, avoiding them to redo the work.

That process was extremely important to validate (or invalidate) our design and ideas. Here is an example of a feature that was improved after we see the results of one usability test:

In the image we can see a screen of the Car Rent mini-app. We ask the users to find the opening hours of the rental store that they rented the car. After some design improvements, that we made looking into the test results, we increased our success rate.

To make sure that the gift card mini-app was launched exactly as the layout that we proposed and tested, we spent some hours certifying/ratifying the app before the release to customers. We used test environments and also a closed beta to do these testings.

Everything found that was different from the original layout and also some bugs were fixed before the final release.

Prototype vs released product.

Final Design

Results

Image of a woman using our app.

Seven months after the release, the Super App (with only one mini-app) have sold more than R$30 million in gift cards, generating a profit of more than R$1,2 million to BB.

We also had a great result when it comes to user experience. Several assessments in app stores, social media, and also at media (TV and newspaper).

But for me, one of the best results were an users’ report:

Before that app, I had to leave my house and went to a pharmacy or supermarket during the pandemic to buy a Google Play gift card for my son to play Minecraft. Now I can do that whenever I want.

Next steps

The next step of the Super App project is bringing more partners and mini-apps to production. I’ve already designed, tested, and validated more than 6 others mini-apps that can’t be shown here because of the business confidentially.