Design and consistency: it’s like money in the bank.


Front-End OutSystems

What we Delivered:

UI Assets

What we brought along:

Front-End OutSystems

BPI mobile app

The Briefing

Achieve Consistency and Improve Costs Efficiency

BPI has several OutSystems applications such as BPINet (homebanking), BPI Net Empresas (corporate banking) BPI App, Go Banking (branches) among other, divided through development teams. They needed Hi Interactive's collaboration to promote consistency across all applications and accelerate their development processes and maintenance.

The Gamechanger

Developing a Style Guide Structure

Hi Interactive's team was part of the Customer Team of Digital Banking Management. It was our responsibility to create patterns and styles to be implemented by the development teams. We delivered a few style guide structures to give support to the application's development and maintenance with customised samples pages, patterns and themes. The goal was to accelerate development and improve the user experience of the bank’s digital channels.

BPI application sample pages
BPI application - screen details

The Process

Redefining the Banking Digital Experience

When we started working at BPI there was only one small style guide, used by a team of three developers. In about two years it has grown to several style guides used by more than 10 teams of developers. One of Hi Interactive's goal at BPI was to build a solid basis of patterns and sample pages in order to reduce the work of the developers building new pages. This allowed BPI to scale both the design and the front-end areas and develop consistent B2C and B2E applications. Style guides are especially important in Agile environments, where enabling more efficient design workflows is critical to keeping the fast pace of development.

Daily Challenges

Hi Interactive’s front-end team works in a daily basis with several different BPI's development teams. This has been clearly the biggest challenge that we have surpassed, being part of an Agile process alongside with the changing of requirements and team members. Transferring seamless information, often across multiple development teams, is paramount for efficiency gains.

BPI application - components
BPI application - patterns

Reusing Patterns and Sample Pages

After months of hard work, our goal was achieved. Now developers just access the style guide, copy sample pages, reference patterns and reuse them with the embedded code to build pages. The style guide holds patterns, guidelines and sample pages that repeat across applications enabling developers quickly to reuse them on any product. The main benefits are scalability, time-to-market acceleration, and consistency.

The Deliverable

The Results

What the client got:

Themes, patterns and style guides for all the digital channels, to support a seamless service design experience.

How it worked out:

The implementation of the Style Guides brought several efficiency gains, reduction of the time-to-market, and deploy of the same functionality in multiple channels at the same time, such as the Go Banking, BPI Net, BPI Net Empresas, and BPI mobile app. BPI’s digital transformation has been distinguished with several industry awards.


Great experiences = happy clients.


Great experiences = happy clients.

"This allowed several gains such as time-to-market reduction, deploying the same functionality in multiple channels simultaneously, such as the branch application, the mobile app or the homebanking."

Rodolfo Graça

UX Lead

More Work

Keep exploring related projects

Website Experience


See Project ArrowSee Project Arrow

Website Product Experience


See Project ArrowSee Project Arrow
View All Projects