Flexi: Modular Framework for Design Systems & CMS Integration

Flexi is a modular framework that enables website content management using the design system in a user-friendly way, with a strong focus on user experience. It allows all components from the design system library to be integrated into the CMS, ensuring that content management follows the visual standards established in the Visual Identity Manual and adheres to usability best practices, while maintaining the personality and integrity of FGV’s visual communication.

The Challenge

FGV’s websites were developed in a rigid way. Every new page or content update required the involvement of the design and development teams, a time-consuming and costly process that reduced the autonomy of content administrators.
This dependency created a constant bottleneck:

Based on user research, interviews, and analyses of CMS solutions available in the market, it became clear that a more flexible, scalable and intuitive solution was needed.

The Solution

Flexi is a modular framework that transforms the way content is managed across FGV’s websites.
It enables all Design System components to be integrated directly into the CMS, making the content management experience simple, consistent, and visually aligned with the brand identity.
With Flexi, each page is built from modular blocks that can be freely moved, edited, and combined — all in a visual, user-friendly way, with no coding required.

How It Works

Flexi allows administrators to:

• Break pages into modular sections and reorganize them intuitively.
• Select the layout (from one to four columns) and control design options such as alignment, colors, backgrounds, images, and videos.
• Choose from more than 50 types of content blocks standardized by the Design System.
• Enter information in a structured and reusable way, ensuring that a single update automatically propagates across all areas of the site where that content appears.

The result is faster publishing, visual consistency, and full management autonomy.

Discovery & Delivery

The development of Flexi followed a continuous Discovery and Delivery methodology:

• Gathering feedback from real users.
• Conducting interviews to understand pain points and expectations.
• Benchmarking research with CMS solutions available in the market.
• Continuous testing and iteration in real environments.

Since its launch in 2019, Flexi has been continuously updated and improved, evolving alongside the needs of FGV’s schools and units.

The Impact

By restructuring the design-to-development workflow and implementing a high-velocity modular framework, I achieved a radical shift in our production capacity. This optimization directly transformed how we scale digital products:

More than just a framework, Flexi is a modular content management digital ecosystem that brings together usability, consistency, and efficiency, key pillars of modern digital communication.

• Timeline Optimization: Successfully compressed project delivery cycles from 18 months to just 3 months.
• Cost Efficiency: Reduced average project costs from R$ 150k to R$ 30k, achieving an 80% reduction in operational expenditure per project.
• Time-to-Market: Achieved an 83.3% reduction in lead time, enabling the team to ship features and respond to market demands in a fraction of the original time.
• Project Throughput: This transition from a rigid long-term cycle to an agile, iterative model resulted in a 6x increase in our annual delivery capacity.

Metric	Previous State	Optimized State	Improvement
Project Duration	18 Months	3 Months	-83.3% Time
Average Cost	R$ 150.000	R$ 30.000	-80% Cost
Delivery Velocity	~0.6 Projects/Year	4 Projects/Year	6x Increase

The Future

Flexi continues to evolve with new features and integrations, always returning to Discovery to listen to users and deliver solutions that increase the impact and efficiency of FGV’s digital experience.