A call to consistency: creating style guides for Fidelidade.


Front-End OutSystems

What we Delivered:

UI Assets

What we brought along:

Front-End OutSystems

Expert Services

Augmented Reality


The Briefing

Spreading Joy With Consistent Designs Across all Channels

Fidelidade owns the world’s largest OutSystems factory. They have been using the OutSystems platform to grow their digital channels and support their digital strategy since 2008.
With over 200 applications and dozens of developers, it was hard for Fidelidade’s IT team to develop new applications that ensured a great user experience while maintaining visual consistency across all groups of applications.

The Gamechanger

The Design System Methodology

Hi Interactive’s role was to create a front-end development team able to develop style guides, a set of patterns and themes to address the needs of Fidelidade’s ongoing projects. We conducted a UI architecture and promoted the adoption of a design system methodology to reuse existing components. The design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Fidelidade_mobile app
Fidelidade_application omnichannel

The Process

Defining User Interface Architecture in the Insurance Sector

We analysed the web and mobile app factory to understand the complexity and organisation of the applications, ensuring their alignment with the business needs. Then we created a new organisational UI architecture for application modules, following OutSystems best practices.

Team Building and Training

Hi Interactive, OutSystems and Fidelidade got together to create a brand new front-end development team. The team received specific training on the job, to share the requirements, the most common pitfalls and how to overcome them.

Fidelidade_mobile app

Reducing Maintenance Costs

Along the way we merged ideas from existing style guides with modern UI development thinking, resulting in a component-oriented approach to UX design and UI design. We also prepared a roadmap to interact with several development teams at the right time. Then we started to implement the first style guides and we taught developers how to reuse the components. Currently, we share the know-how of Hi Interactive's team to optimise the experience, significantly reducing Fidelidade's development maintenance costs. The benefits are clear: fast and efficient implementation, consistency and. scalability of the applications.

The Deliverable

The Results

What the client got:

New My Fidelidade mobile app with 50,000 users; new Independent Agent Portal with 5,000 users. Increased up-sell, cross-sell, and efficiency in sales and operations.

How it worked out:

The proposed solution provides consistency across all channels, increases productivity and accelerates the development process. Fidelidade was able to reduce training and maintenance costs. Fidelidade was recognized with the OutSystems Innovation Award.


Great experiences = happy clients.


Great experiences = happy clients.

"We have been able to evolve and accelerate our development. We are reducing our app maintenance efforts and thanks to Hi Interactive we are encouraging our developers to properly use the live style guide."

Cristina Arbues

IT Architect

More Work

Keep exploring related projects

Industrial Experience


See Project ArrowSee Project Arrow

Tolling Experience


See Project ArrowSee Project Arrow
View All Projects