UI Assets
Front-End OutSystems
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.
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.
.png)
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.
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.
.png)
.png)
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.
Themes, patterns and style guides for all the digital channels, to support a seamless service design experience.
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.
UX Lead
