CONTEXT, CONSTRAINTS & GOALS
CONTEXT
When I joined Banco de Crédito BCP in 2016, the bank already had a growing digital ecosystem.
Online banking platforms.
Public websites.
Internal tools.
Emerging digital services.
Each product worked independently.
Each solved its own problem.
But together, they didn’t feel like the same bank.
Different vendors had designed different platforms over time.
Every project arrived with its own visual rules.
interaction logic, and style guide.
There was no shared language connecting them.
And in banking, inconsistency does something subtle but dangerous.
It breaks recognition.
CONSTRAINTS
The challenge wasn’t creating something new.
It was aligning systems already used daily by millions of customers.
- Multiple legacy platforms already in production.
- Independent teams and outsourced vendors.
- No centralized design governance.
- Repeated design and development efforts.
- Increasing phishing incidents driven by inconsistent visual cues.
- Growing delivery complexity across teams.
Without shared standards, each product evolved independently, creating fragmented experiences that weakened recognition and trust.
Independent
Guidelines
Fragmented
Experiences
The solution couldn’t replace the ecosystem.
It had to reorganize it from within.
Business Goals
The objective became clear:
- Establish recognizable trust across all digital channels.
- Standardize visual and interaction patterns.
- Reduce duplicated work across teams.
- Accelerate delivery speed.
- Lower security risk through consistent recognition signals.
The bank didn’t need another guideline.
It needed a shared foundation.
The issue wasn’t product quality, but the absence of a shared system connecting them.
Role & Scope
The initiative required aligning designers, frontend engineers, and product
teams around a shared operating model rather than isolated project workflows.
What began as a design initiative quickly became an organizational
transformation effort.
I led the creation and scaling of the system across design and engineering,
defining both the structure and the adoption model.
MY ROLE
- Defined the system vision and long-term strategy guiding cross-product consistency.
- Established design principles to ensure trust, usability, and consistency across products.
- Designed the initial architecture and component logic enabling reuse at scale.
- Built training programs that enabled adoption across design teams.
- Drove collaboration between design and frontend to ensure consistent implementation.
- Promoted system adoption across the organization, aligning teams around a shared standard.
This wasn’t assigned as a roadmap initiative.
It started as a response to an obvious gap: teams were solving the same problems repeatedly without shared knowledge.
Scope of Work
- Initial UI Kit creation.
- Evolution into a shared style guide.
- Development into a scalable Design System.
- Cross-platform component libraries (Web, Android, iOS).
- Design tokens foundation.
- Governance and contribution workflows.
- Organizational onboarding and education.
The work wasn’t about designing interfaces.
It was about designing how interfaces would be designed moving forward.
Fragmented Experiences
THE KEY SHIFT
Different colors. Different buttons. Different layouts.
But the real issue wasn’t aesthetics.
It was trust recognition.
Users couldn’t easily tell whether a platform truly belonged to the bank and phishing exploited exactly that gap.
The shift was clear: This wasn’t about making products look similar. It was about standardizing trust signals across the entire digital ecosystem.
Design stopped being decoration.
It became risk mitigation.
The issue wasn’t aesthetics.
It was trust recognition.
HUMAN & SYSTEM INSIGHTS
Across projects, the same patterns appeared again and again:
Designers rebuilt identical components.
Developers implemented similar functionality multiple times.
Every new initiative restarted foundational decisions.
The organization wasn’t inefficient.
It lacked shared memory.
Insight 1: Inconsistency weakens trust
In financial environments, consistency functions as a security signal.
Recognition reduces hesitation.
Insight 2: Reinvention creates invisible cost
Time wasn’t lost designing features.
Time was lost rebuilding foundations.
Insight 3: Systems succeed through adoption
Documentation alone doesn’t change behavior.
People do.
Education became as critical as design.
DESIGN PRINCIPLES
Three principles guided how the system was designed, adopted, and governed across the organization.
One Language, Many Products
Every interface should feel unmistakably BCP.
Shared visual patterns reinforce recognition, trust, and consistency across all digital channels.
Reuse Before Reinvention
Components are long-term investments, not project deliverables.
Reusable foundations reduce duplication and accelerate product delivery.
Contribution Over Control
The system evolves through shared ownership.
Teams contribute improvements instead of depending on centralized control.
SYSTEM THINKING FOUNDATION
Before defining components or libraries, one question changed the direction of the work: what actually makes something a system?
A system is not a collection of assets, but a set of interconnected elements working together toward a shared goal. Understanding this shifted the initiative from creating visual guidelines to designing coordination across teams.
Like a nervous system coordinating movement across the body, the Design System would later connect principles, documentation, components, and workflows, allowing independent teams to move consistently without centralized control.
SYSTEM EVOLUTION
The system didn’t emerge fully formed. It evolved through several stages as the organization matured in how it structured and reused design decisions.
What began as isolated visual guidelines gradually evolved into a structured design system with semantic foundations, reusable components, and cross-platform scalability.
2016 - UI KIT
Tool: Adobe Illustrator
Early attempts to standardize visual elements across projects.
- Color styles defined as static values rather than semantic tokens.
- Visual guidelines documented but not connected to reusable foundations.
- Interaction states inconsistently defined across components.
- Components recreated manually across projects.
2018 - STYLEGUIDE
Tool: Sketch
The first effort to organize visual rules into a shared reference for design teams.
- Shared UI styles introduced across multiple projects.
- Component patterns documented but still loosely connected.
- Design decisions centralized in guidelines rather than reusable structures.
- Interaction states still inconsistently applied across products.
2020 - Design System (Conecto)
Tool: Sketch → Figma
The evolution into a scalable design system supporting multiple products.
- Semantic color tokens replacing static color values.
- Reusable component libraries shared across teams.
- Consistent interaction states defined system-wide.
- Foundations structured to support cross-platform implementation.
ATOMS
MOLECULES
ORGANISM
PRODUCTS
ITERATION UNDER REAL
ORGANIZATIONAL CONSTRAINTS
The system could not succeed through design alone. Its adoption depended on coordinated participation across design, engineering, and product teams, transforming how decisions were made and shared across the organization.
Adoption required more than tools. Teams first needed to understand how systems function and evolve, which led to structured training programs across the organization.
I designed and led structured training programs that onboarded:
130 UX, UI, Research, and Service Designers across the organization.
- Centralized standards ensuring consistency.
- Federated contribution allowing teams to evolve components collaboratively.
The Design System became a living ecosystem continuously improved by its users.
Design System Adoption &
Leadership Model
This model describes how design system adoption evolves across three stages:
craft, contribution, and leadership.
Adoption does not happen at once.
Designers first learn to work within the system, then contribute to its evolution, and eventually help scale it across the organization.
Design system adoption follows a clear progression:
Craft Practice → Contribution → Leadership
Adoption, not creation, became the real challenge.
To support this progression, I defined a simple maturity model that helps teams understand how to engage with the system over time.
1 . Craft Practice
System Usage
Measures how designers use the design system in their daily work.
— Level 3
Scalable Thinking
Design for reuse
Reduces component entropy
Optimizes component variants
— Level 2
Structured Design
Uses states/variants
Avoids duplication
Atomic hierarchy
— Level 1
Compliance
Uses components
Applies tokens
Follows grid systems
2. Contribution
System Participation
Measures how designers contribute to the evolution of the system.
— Level 3
System Steward
Audits system usage
Maintains component health
Defines contribution workflows
— Level 2
Contributor
Proposes improvements
Adds components
Documents patterns
— Level 1
Responsible User
Uses latest libraries
Reports issues
Documents implementation
3. Leadership
Organizational Impact
Measures how designers help scale the system across the organization.
— Level 3
System Architect
Defines system vision
Establishes governance
Aligns with strategy
— Level 2
Integrator
Aligns design & engineering
Connects product teams
Identifies reuse
— Level 1
Advocate
Promotes system usage
Supports onboarding
Encourages adoption
When design systems reach the leadership stage, the impact becomes measurable.
Example outcomes:
- +75% delivery speed.
- 60% reduction in phishing risk through visual consistency.
IMPACT AT SCALE
Impact based on delivery performance and component reuse.
Measured Outcomes:
- 28 digital products aligned.
- Millions of dollars in cost avoidance.
- Faster onboarding across design and development teams.
- Improved cross-team collaboration.
2016 EXPERIENCE:
Legacy system: Pre-design system fragmentation
View legacy experience →
2026 EXPERIENCE
Design system applied across digital ecosystem.
View Actual experience →
Design shifted from production activity to strategic infrastructure.
View system across live digital channels →SCALABLE SYSTEM
The strongest validation didn’t happen at launch.
It happened over time.
New products appeared.
Teams evolved.
Technologies changed.
The system adapted without requiring redesign.
Components scaled.
Knowledge persisted.
Consistency held.
What started as a UI initiative became organizational infrastructure.
FINAL INSIGHT
Design systems are often described as libraries.
But libraries organize assets.
More importantly, they align the people making those decisions.
Systems organize decisions.
At BCP, the Design System unified how teams designed, built, and scaled digital products.
It allowed growth without fragmentation.
Because at scale, consistency is not about visual polish.
It is about confidence.
And confidence is what creates trust.
