Bank of the Philippine Islands
Scaling Design Through Flexible, Themeable Components
Role
UI Designer
Client
Bank of the Philippine Islands
Project Date
2023
The Challenge
Building Templates Fast Without Losing Quality
Bank of The Philippines Island was seeking to migrate their corporate website CMS while refreshing the website.
With a substantial number of existing pages—totalling in the hundreds—on top of the diverse needs of multiple business units and tight deadline, manually crafting every single page is an impossible task.
The Solution
Designing for Scale with Flexible, Theme-Ready Components
To address this challenge, we focused on adopting a component-based design approach. We built flexible components that could adapt to different themes and branding needs, and used them to create reusable templates. This made it easier to scale the product across various brands and markets, each with its own colour palette, while keeping behaviours and structure consistent.
The design system was built with scalability at its core, covering everything from typography and colour tokens to a full set of UI components. This approach not only sped up development, but also ensured a consistent and cohesive user experience.
Thinking in Components
Instead of directing our attention towards designing complete pages, we focused on creating modular components with variants and customisation.
Not only it speeded the design and template delivery, it also offered Content Authors the flexibility they needed when building pages.
Same Component, Different Theme
Considering the unique colour and imagery preferences of different business units, we conducted a meticulous exercise in colour mapping for each component. This ensures that all components align with the distinct colour of the respective business units, effectively representing their individual branding identities.
Meticulously crafted components from design to code
Each components were designed with UX considerations and pixel perfect UI. These designs were validated by Product Owners and Developers to ensure practicality and usability. Additionally, each component underwent thorough stress-testing during the Quality Assurance stage by both QA and Designer to catch any issues before being released to Production.
Comprehensive Image Guidelines for Content Authors
We created comprehensive image guidelines that serve as guardrails for Content Authors. It specified the types of imagery, the types of treatments that are permissible, as well as dimension and aspect ratios for images for each components in the page.
