Banco Inter

A Super Design System for a Super App

Banco Inter
My Role

I led the delivery of the Super App design part, being responsible for maintaining the consistency, usability and experience of our users through all the bank's avaible products. Interacting with more than 50 Android and iOS developers for over 9 months, it was possible to deliver an app that offers more than an online bank experience, enabling users to go from ordering food to booking airplane tickets or buying home appliences.

Company

Inter

Role

Product Designer
Design System Ops, full time/remote

Period

Aug 2018 - Oct 2020

Skills

Product Design, Design System,
Team Play, User Testing & Interview

Discover

Establishing the boundaries

Banco Inter was reaching 1 million users when it decided to position itself as a Super App and face not only bank competition but also large marketplaces like Amazon, Magazine Luiza and Americanas. The sale of aesthetic products, for your home, car, electronics, among others, is not commonly found in Bank applications. Not only the commercialization of products but the flexibility to offer other types of services are also part of a Super App and it is in this context that Design Ops operates. Leaving the simple and coherent interfaces independent of the product or service that is being offered at any time on the journey.

Understand

Gathering all the information available

We had a quite large customer service team but little data to start the work. Even with the tight deadline we managed to base some data that we had available, the main ones being:

Opening an account

Reasons for compliance

Product revenue

Most used devices

Scenario

It would be necessary to sustain an old architecture and create a new one, maintaining the same components, fonts and structures, being reflected among the 2 white label applications of the group. Not to mention the lack of documentation of what already existed and fragmentation in almost 10 product teams with a total of 150 developers working towards the same goal.

Define

Super what? Super App?

The term Super App is associated with an application that has several features such as: ticket sales, electronics purchase, cell phone recharge, food delivery, investments, credit card, insurance, among others. For an ordinary user, these tasks would be complex enough in separate applications! Bring them all together as a single application and we reach at the main problem to be solved.

A Super App needs to be consistent enough to make any kind of product or service being offered with simple and effective navigation through the journey.

Design

The clock was ticking

A 9-month deadline was established for the project from the initial conception to the day of the launch event. To meet the deadline, an agile and integrated process between the teams was needed. As the layout restructuring would take up a lot of time, it was necessary to concentrate efforts on making specific improvements in the experience.

Mapping

A navigation and flow map was created for a general understanding of the platform and identification of improvements in the organization and layout of products.

Documentation is the key

I implemented a culture of component documentation that didn't exist before. This brought the development team a visibility of what they would have to develop and what they could reuse from other areas of the app.

Deliver

Solutions

After the 9 months of the project, the Super App was completed and along with it the first version of Banco Inter's Design System was delivered!

Banco Inter

Banco Inter's Design System

Banco Inter's Design System has about a thousand components and styles, supporting 4 applications of the Inter group in addition to websites, processes and rituals of the design team. In it were still documented icons, illustrations and photographs that were also consumed by the marketing team.

Creating and implementing Banco Inter´s Design System, BIDIS, I lead the Design Ops, empowering teams to work smarter, by providing eficient and useful resources, tools, and workflows.

At the date that I´m wrinting this, here are some numbers:

Around 1.000 components and 60 styles

Serving 20 Product Designers and more than 150 Devs

Provide resources for 4 Apps and 5 websites

COFRE - Portuguese word for Safe

The consolidation of visual components and codes, together with other solutions for composing interfaces such as writing and tone and voice manuals and brand branding. An internal and unique solution for the dissemination of knowledge within the company.

Learnings

Last but not least

All the experience I had at Banco Inter was very relevant to my career, but without a doubt the Super App project marked my history and made me understand the importance of Design Ops for a company and for the design and development team.

There were many lessons learned through the process:

A little more experience

Other works at Banco Inter

During the 2 years I was at Inter, I had the opportunity to work with all the products offered, including investment, exchange, credit cards, insurance, marketplace, among others. I worked as a Product Designer in the creation of cutting edge products and features for applications and websites and I also worked as a Design System Ops scaling the design team, composed of 20 designers in contact with many product, business and IT stakeholders.

Banco Inter

End to End Process

Working end to end through the Product Design process, most of the time with the double diamond model. I was responsible to research, design and deliver the best experience based on feedbacks from our user and some technical limitations

Design Thinking

Implementing DT techniques, based on the maturity of each product/feature/stakehoder. Applying usability testes to ensure the desired value is being delivered to the app or website users. The most used were Lightning Decision Jam, Value Proposition, CSD Matrix and Flux Analysis

Banco Inter