Scalable System Foundations
Strategic Intent
Create a scalable, multi-brand design system for Grupo Petersen’s four banks, aligning their digital experiences while supporting each brand’s visual identity and product roadmap.
Context
Each bank operated independently, with its own brand, legacy products, and internal teams. Over time, this produced inconsistent UI patterns, duplicated work, and fragmented collaboration between design and engineering.
Understanding the Need
Through audits and stakeholder interviews, we identified the need for a shared, flexible system. Teams required a unified design language that accelerated delivery, improved consistency, and supported modernization across multiple products.
Pain Points
Visual and structural inconsistency across banks and channels
Redundant component variations and inefficiencies
Limited accessibility standards
Fragmented handoffs and collaboration
No shared naming or system conventions
Approach
We designed a foundational system serving all four banks, extending it with brand-specific layers. This included system tokens, type scales, spacing, grids, accessibility rules, component architecture, and cross-team alignment. We validated patterns through audits, benchmarking, workshops, and engineering collaboration.
Core Capabilities
Shared foundational system for all banks
Brand-layer architecture (colors, expression, accents)
Accessible, scalable components
Consistent cross-platform patterns
Semantic nomenclature for design and engineering
Comprehensive documentation and usage guidelines
Outcome
The system delivered a cohesive yet flexible foundation across the four banks, reducing inconsistencies, strengthening team alignment, and accelerating product development while preserving brand individuality.