CASE STUDY → DESIGN SYSTEM & ENGINEERING
12 brands. 12 independent squads. No shared system. Every campaign started from zero.
Design infrastructure that keeps tokens, components and delivery synchronized — across teams you don’t control.
01 — THE PROBLEM
Vocento's 12 editorial brands each operated their own subscription campaigns. Each brand had its own CSS files, its own component interpretations, its own way of handling paywalls and banners. There was no shared architecture — only informal reuse that generated inconsistencies faster than any team could fix them.
The consequence was structural. Designers worked in Figma. Developers read Figma manually and translated it to CSS by hand. Every token change required a full cycle of versioning, review, and correction. Every campaign brief meant starting from scratch across 12 brands simultaneously.
The system wasn't fragile by accident. It was fragile by default — because no system existed.
The system wasn't fragile by accident. It was fragile by default — because no system existed.
Diagnosis: three layers of the same failure — business, product/UX and engineering.
DIAGNOSIS GRID
The consequence was structural across the business, product/UX, and engineering layers.
VIABILITY
No consistent visual language across brands or campaigns. A/B testing was statistically unreliable — every variant was built differently, making comparison impossible. Time-to-market required 10+ days per campaign cycle. External teams were repeatedly contracted to cover capacity gaps that a shared system would have eliminated.
DESIRABILITY
Subscribers encountered different visual experiences depending on which brand they accessed. Paywalls, banners and checkout flows used inconsistent patterns, eroding trust at the moment of highest conversion intent. No design baseline meant no measurable UX improvement over time.
FEASIBILITY
No shared CSS architecture meant constant duplication, uncontrolled dependencies, and files so large they became unmaintainable. There was no Git versioning. Refactors were continuous. Every developer on every brand team was solving the same problems independently — and solving them differently.
02 — THE BASELINE
These weren't exceptional cases. This was the operational baseline every sprint.
Operational baseline Launching campaigns and running experiments required manual rebuilds across brands.
Baseline metrics
Launching a campaign across all brands: ~10.5 days.
Making a small visual change: ~1 full day.
Creating a new variant for A/B testing: 1+ hours.
Reusable components: none.
Documentation: none.
Shared versioning: none.
03 — THE DECISION
The obvious move was to create a component library in Figma and a corresponding CSS file. Most teams in this situation build exactly that — and within 12 months, it fragments again, because the problem isn't components. It's the gap between design and code.
Every manual handoff is a place where the system can break. Every token that exists in Figma but must be translated into CSS by a developer is a source of drift. A design system maintained through human discipline will always degrade faster than one maintained through automation.
The constraint I set: the system had to be self-maintaining. Not enforced through process — enforced through architecture.
RULED OUT
Would have reproduced the same fragmentation under a new visual layer. Teams would have adapted components independently within 18 months. The handoff gap would have remained.
RULED OUT
No authority to enforce it across 12 independent squads. Any solution depending on team compliance would fail on first contact with a regional campaign deadline.
COMMITTED TO
Figma as the single source of truth. MCP (Model Context Protocol) as the synchronization layer. CSS as the output — automatically generated, never manually translated. Consistency guaranteed by the system itself, not by process.
04 — THE SYSTEM · ARCHITECTURE
The system is built on a single principle: what exists in Figma must exist in CSS automatically. No human in between.
Problem
Design tokens existed in Figma, but had to be translated into CSS by hand — guaranteeing drift.
Implementation
Figma as the single source of truth
MCP synchronization to CSS variables
CSS output generated automatically (no manual translation)
Impact
Consistency guaranteed by the system itself — not by process.
Problem
Developers were building from mid-revision designs, creating rework and inconsistent outcomes.
Implementation
Model → research + behavioral insights (decisions behind components)
View → design + prototyping validated before code
Controller → traffic-light assets: Green / Yellow / Red
Impact
Developers receive only Green-state files — removing the biggest source of waste.
Problem
Brand identity required manual configuration: fonts, logos and color systems were rebuilt per brand.
Implementation
Eleven themes in production
One class config per container
Logo sets + typography + color system encoded in CSS
Impact
Adding a new brand theme became configuration — not a rebuild.
Problem
Without usage contracts, components drifted across squads and campaigns — and docs went stale.
Implementation
Markdown docs versioned in Git
Cheat sheets with copy-ready HTML
Traffic-light system + onboarding guides
Impact
When the system changed, the documentation changed in the same commit — no drift.
04 — THE SYSTEM · ECOSYSTEM
The regional bundle integrated Vocento's local newspapers into the same subscription architecture. Subscribers could combine ABC with regional titles — El Correo, Diario Vasco, Diario Montañés, El Comercio, La Rioja, Las Provincias, El Norte de Castilla, Hoy, Sur, Ideal and La Verdad.
The platform was deployed across all publications. One shared core. Local customization at the surface. Every brand team got the same foundation, with the ability to adapt tone and messaging without touching the underlying architecture.
The regional bundle let subscribers combine ABC with selected local newspapers, creating a unified national-regional subscription. Flagship national content plus trusted regional journalism — higher perceived value, preserved editorial identity.
The subscription architecture scaled across Vocento's full multi-brand ecosystem, integrating national and regional publications on the same platform while each brand kept its editorial identity and audience focus.
04 — THE SYSTEM · COMPONENTS
The subscription experience was built as a behavioral conversion system composed of coordinated entry points across the reading journey. Each component addresses a different conversion moment: persistent trigger, decision moment, or high-attention interruption.
A low-friction conversion trigger that runs alongside the reading experience. Continuous subscription visibility without interrupting article consumption.
Redesigned to simplify decision-making and create a clear offer hierarchy. Instead of fragmented subscription combinations, a simplified set of plans structured for fast comparison.
Designed as a focused conversion moment inside the reading flow. Unlike the persistent banner, the pop-up concentrates attention on a single offer and strips out any cognitive overhead.
04 — THE SYSTEM · STORE
The store was the highest-intent surface and the highest drop-off point. Its fragmented structure was the single biggest blocker to subscription conversion across the ecosystem.
The redesign was grounded in behavioral research: choice architecture, information hierarchy and perceived value. Every element was tied to a decision-theory reference — because every element had to be defensible across 13 brand teams.
Too many options without a clear hierarchy. Multiple offers competed for attention. Cognitive load made the purchase decision unnecessarily complex.
Clear hierarchy. Scannable structure. Strong visual emphasis. High-performing editorial content surfaced at the moment of decision to reinforce perceived value.
Learning
The store stopped being a product catalog and started being a guided decision. Scannability, hierarchy and editorial reinforcement turned the page into the highest-performing conversion surface in the system.
04 — THE SYSTEM · CHECKOUT
Checkout was the point of highest conversion intent and the point of highest drop-off. Progressive disclosure across desktop and mobile reduced cognitive load at the exact moment users decided whether to trust the transaction.
Total volume (ABC + Media)
149,493
+31,113 net subscribers from checkout friction reduction
ABC volume
54,461
+39.2% growth driven by simplified payment flows
ARPU (Media)
€110.64
Premium value maintained despite high-volume acquisition
Monthly churn (Media)
4.35%
Net reduction in post-sale friction
Monthly churn (ABC)
3.10%
−23.8% abandonment rate after checkout redesign
Billing churn (Group)
3.63%
Stabilized across the group under unified system
05 — THE SCALE PROBLEM
Adoption couldn't be mandated — it had to be earned. The strategy was simple: make the shared system easier to use than building independently.
The system had to work with independent brand teams, their own calendars, and their own constraints — without breaking consistency.
ADOPTION
The barrier to adoption was lower than the barrier to building anything custom.
ENFORCEMENT
Git versioning and explicit naming conventions made the system self-policing. Deprecated components are flagged red in Figma and in documentation simultaneously.
AUTOMATION
MCP eliminates the class of errors that comes from human translation. If a token exists in Figma, it exists in CSS.
06 — RESULTS
Campaign creation
2 days
Before: ~10.5 days across all brands. After: 2 days. ~85% reduction.
Small changes
Minutes
Before: ~1 full day. After: minutes. ~95% reduction.
Variant creation
5 min
Before: 1+ hours. After: 5 minutes. ~92% reduction.
Teams using the system
12+
12+ editorial squads + 3 corporate portals.
The system didn't just improve metrics — it changed how teams spend their time.
Campaign build time
Build vs strategy
A/B tests per month
Brief to live campaign
3 Weeks
5 Days
The clearest signal the system worked. Not a prototype metric — a production reality across 13 brands.
07 — REFLECTION
The most important insight from this project is the difference between a design system and design infrastructure. A design system is a collection of components. Infrastructure is the system that keeps components synchronized, documented, and deployable across teams that don't coordinate directly.
EVOLOK started as the former and became the latter. The shift happened when I stopped thinking about components and started thinking about the pipeline — the flow from design decision to shipped code, and every place that flow could break.
Manual translation between design and code is not a process problem — it's a structural one. The only reliable fix is to remove the manual step.
What I'd do differently
Implement MCP from day one, not as a later optimization. The manual translation phase cost months of drift that the automated pipeline would have prevented. Validate the synchronization pipeline with real teams before scaling — the technical architecture was sound, but adoption would have been faster with earlier real-world testing.
