The Challenge

Metrobank, one of the Philippines’ largest financial institutions, operated on an Gatsby infrastructure that slowed down both development and content updates. The marketing team faced rigid templates that required developer intervention for routine updates. Component reusability was limited, and the site’s accessibility fell short of modern standards. The bank needed a complete technical overhaul, one that could modernize the platform without disrupting their digital presence during the transition.

The Approach

The migration strategy prioritized three objectives: empowering non-technical teams to manage content independently, building accessibility in from the start, and creating an architecture flexible enough to support rapid feature development.

Next.js was selected for its server-side rendering capabilities and developer experience. DatoCMS replaced the previous content system, giving marketing teams direct control over page creation and updates. Tailwind CSS provided a consistent styling foundation that would scale with the component library.

The Execution

The component library was built around standardized, reusable blocks that content teams could combine to create new pages without developer support. Each component implemented accessibility standards from the start, with keyboard navigation, screen reader optimization, and proper semantic markup baked into the base patterns.

A key deliverable was the Money Basics quiz, an interactive financial health assessment tool. The quiz guides users through personalized questions about their financial habits, delivering actionable insights tailored to their responses. It became a central piece of Metrobank’s financial literacy initiative.

The Outcome

The new platform fundamentally changed how Metrobank operates online. Content updates that previously required days of developer time now happen in hours through the CMS. The modular architecture accelerated feature delivery, and performance improvements increased engagement with financial education content. The accessibility work extended banking information access to thousands more Filipinos who rely on assistive technologies.