2019Banco BS2

Finance Super App

This project launched a suite of financial apps for BS2 Banco, starting with Internet Banking and credit card acquiring services for SMBs, built on top of their existing payment solution. We had 45 days to deliver two core products and lay the foundation for future features and partner integrations.

Role

Product Designer

Timeline

~2 months

My role

As the main designer for this project, I covered the project from end-to-end including Discovery, Research, Mapping, Prioritization, Illustration, UI e Design QA. Some other areas that helped me in executing some tasks were: Sales, CX, Marketing, Stakeholders.

Branding and color were already established by the marketing team.

Approach

This project was an initial MVP, with planning for future iterations. So we decided to take an Agile Dual-track approach. The first step was to find a solution to connect all those apps and make it effortless for the user to change from one product to another.

Project's Prerequisites

Focused on scalability

Discovery stage for backlog generation

Product backlog for future iterations

Support multiple products and partners

Process

Process

Research

We conducted both qualitative and quantitative research—interviews and surveys—to better understand our target users and identify their core needs. These insights helped shape the MVP and highlight opportunities to differentiate the product from competitors.

Research Conducted

Surveys to understand and map user profiles and create personas.

Analysis of quantitative data from the existing payment product

Face-to-face and phone interviews to uncover user needs and prioritize MVP features

Collaboration

To map the product its user journey's some facilitation workshops were conducted. Those workshops included everyone from users to developers.

Tools Used

CSD Matrix

Service Blueprint

Collaboration workshop session 1
Collaboration workshop session 2
Collaboration workshop session 3

Research and collaboration workshop artifacts

Mapping

In order to map all the MVP features I used some tools and techniquies - which also helped put everyone at the client's office on the same page.

Tools Used

Mind-mapping

User story mapping

User journey mapping

User journey mapping session 1
User journey mapping session 2
User journey mapping session 3
User journey mapping session 4

User journey and feature mapping sessions

Prioritization

Since it was an ambitious project and the approach was to work through iterations, the research and facilitation outcomes were brought to meetings with the board where we separated the user stories in big releases aligning the user interests with the stakeholder's view.

Feature prioritization matrix and roadmap planning

Feature prioritization and roadmap planning

Reference & Benchmark

This step of the ideation stage was taken to help perfect the concept. Desk research is a cheap and fast way to gain a broad understanding of the field, through benchmarking we can learn with solutions already on the market.

Competitive analysis and benchmark research

Competitive analysis and benchmark research

UI Concept Exploration

At this step, some preliminary concepts were created to help sell the vision of the product.

UI concept exploration and ideation

UI concept exploration and visual ideation

Wireframes

Wireframes were very important to rapid prototype and validate stakeholders ideas, some sketches were made through workshops, others were only digital wireframes to consolidate ideas.

Digital wireframes and user flow validation

Digital wireframes and user flow validation

Solution

The solution we found was to connect all the services in one place, with one login, making it easier to manage the financial life of a company. In order to make this vision of a financial super app become a reality - where others could connect their API and create an interface inside this app for their services, we prepared a good foundation and started with two products Internet Banking and BS2Pay.

The time frame of 45 days was set to create two products and the foundation for partners and other products to come.

Foundation Items Required for the Products

App Drawer

SSO Login

Modular onboarding

Modular app-building tools for the partners

Solution

The solution we found was to connect all the services in one place, with one login, making it easier to manage the financial life of a company. In order to make this vision of a financial super app become a reality - where others could connect their API and create an interface inside this app for their services, we prepared a good foundation and started with two products Internet Banking and BS2Pay.

Solution overview - Main interface
Solution overview - Core features
Solution overview - User flow

Login

For this idea of a Financial super app to work, we developed an SSO solution, so with one login and in one place the user could take care of all the financial needs of their company.

Login interface - Main login screen
Login interface - Authentication options
Login interface - Security verification

Side Menu & App Drawer

To make it easier for the user to change from one app to another a fixed side menu was created. This drawer of apps and services was also created so the user could easily opt-in in new products without the need to insert all their data again.

Side menu - Navigation structure
Side menu - App drawer functionality
Side menu - Menu states
Side menu - Full interface

Modular Onboarding

With so many apps and products coming we designed a solution that made it easy for the user to start using new products, so we came up with a modular onboarding system.

Onboarding - Welcome screen
Onboarding - Account setup
Onboarding - Feature introduction
Onboarding - Security setup
Onboarding - Preferences
Onboarding - Completion

Style Guide & Design System

The need for scalability and speed made it that we needed to start creating a strong base for a future design system. To achieve that, we decided to use the Atomic design as a method to create the components and establish our initial styleguide.

Style guide - Design tokens
Style guide - Grid system
Style guide - Component library

Development

Handoff & Design QA

The handoff to the development team was made trough Zeplin, but since they had already coded all the components for the styleguide the effort for it was greatly reduced, giving the development the speed necessary.

After every flow coded I as the designer went to validate if the design was right.

Key Deliverables

Component library coded in advance

Design specifications through Zeplin

Quality assurance for each coded flow

Ongoing design validation support

Metrics

Success metrics were established to measure the effectiveness of the design solution and business outcomes.

Indicators Used to Measure the Product Success

Account opening rate

How and which features the user was using daily.

The goals directly aligned with the business unit OKRs.

The motivation to open an account or stop during the process of it and if it was aligned without value proposition.

Conclusion

Takeaways

This project could have been better executed if we had the chance to understand better the scope of the project. This way the sales team could ask for a better time frame to deliver.

For the next project, we started to map first what we have to do, the initial scope before accepting the deadline. Another lesson learned is that even a product is a commodity there is a lot of room for improvement, and I should have made benchmarking in different markets.