Impact story: Enabling coherent content, UX and design at scale with the Visual Framework
Architected and led a component library adopted across 50+ scientific properties, accelerating delivery and standardizing UX.
tl;dr
- 50+ properties adopted framework across EMBL's international network (Drupal, WordPress, static sites, React)
- 40% reduction in implementation time for sites using full framework adoption
- Improved accessibility, performance, and UX consistency through quality defaults and shared patterns
- Flexible integration (full adoption, partial, visual-only, or inspiration mode) enabled organic adoption without mandates
- Delivered through light governance with contribution process, semantic versioning, and cross-team collaboration
At EMBL, dozens of teams across six international sites shipped digital properties with different stacks (Drupal, WordPress, static sites, React apps), timelines, and constraints. Each team was solving the same UI problems independently: navigation, cards, grids, form patterns. The result was duplicated effort, fragmented brand experience, and slow delivery. A research group launching a new microsite would spend weeks rebuilding patterns that already existed elsewhere.
Our goal was to create a shared component library that worked across all those environments without forcing teams into a single technology stack or slowing them down with heavyweight tooling.
We started small with patterns that respected accessibility, performance, and editorial realities. The framework spread because it reduced rework and shortened delivery time — not because we mandated it.
Problem#
Dozens of properties were duplicating UI effort, fragmenting brand and UX, and slowing delivery across a pan-European scientific organization spanning Heidelberg, Hinxton, Hamburg, Grenoble, Rome, and Barcelona.
Specific pain points:
- Duplicated effort: Every new site rebuilt navigation, cards, buttons, and layout grids from scratch
- Inconsistent UX: Similar content types (events, news, people profiles) looked and behaved differently across properties
- Fragmented brand: EMBL's visual identity was interpreted inconsistently without shared design tokens
- Slow delivery: Teams spent weeks on UI fundamentals instead of content and features
- No shared knowledge: Best practices for accessibility, performance, and responsive design weren't propagating across teams
Approach: building for adoption, not compliance#
Start with real patterns from production sites
We didn't design in a vacuum. We audited existing EMBL properties, identified common patterns (mastheads, navigation, content cards, page grids), and codified the best versions. This gave teams confidence that the framework solved their actual problems.
Choose tooling for flexibility, not lock-in
- Fractal: Component development environment with live documentation
- Nunjucks templates: Framework-agnostic markup that could be adapted to Drupal (Twig), WordPress (PHP), static sites, or React
- Sass with design tokens: Shared color, typography, and spacing variables that could be imported into any project
- Eleventy for static demos: Fast, dependency-light static site generator for documentation and examples
- npm for versioning: Semantic versioning with clear changelogs; teams could upgrade at their own pace
Make adoption easy, not mandatory
We provided multiple integration paths:
- Full adoption: Install via npm, import components and styles, use the full design system
- Partial adoption: Cherry-pick individual components (just the grid, just the navigation)
- Visual-only: Just import design tokens and rebuild components in your own stack
- Inspiration mode: View documentation and implement patterns in your own way
This flexibility was critical. A team with a mature Drupal site wouldn't rebuild everything, but they might adopt the navigation component and design tokens. A new static site could use the full framework.
Build trust through quality
Every component was:
- Accessible by default: WCAG AA compliance, keyboard navigation, ARIA labels, semantic HTML
- Performance-tested: Minimal CSS and JS, lazy-loading where appropriate, no framework dependencies
- Responsive: Mobile-first design with tested breakpoints
- Documented: Live examples, code snippets, integration guides, and design rationale
We demonstrated that using the framework made teams' work better, not just "more standardized."
Governance without gatekeeping
We established light governance:
- Contribution process: Teams could propose new components or improvements via GitHub
- Versioning discipline: Semantic versioning, clear changelogs, deprecation warnings before breaking changes
- Quarterly sync: Cross-team meetings to share usage patterns and discuss priorities
- Support channel: Slack workspace where teams could ask questions and share solutions
This kept the framework evolving without creating bottlenecks.
Adoption story: how it spread#
Early adopters (first 6 months)
We started with two friendly teams: EMBL.org (the flagship site) and EMBL-EBI (the bioinformatics institute). These were high-visibility properties with committed partners. We worked closely with them to ensure the framework solved real problems, not theoretical ones.
Seeing the framework work on major sites gave other teams confidence to try it.
The tipping point (months 6-18)
Adoption accelerated when teams saw concrete benefits:
- A research group launching a new microsite used the framework and delivered in 3 weeks instead of 8
- The careers site redesign adopted the navigation and card components, cutting development time by 40%
- Multiple teams reported improved accessibility audit results after switching to framework components
Word spread organically through EMBL's communications network. We didn't need to sell it — teams asked to use it.
Scale (18+ months)
By 18 months, the framework was adopted across:
- 50+ properties: From major sites (EMBL.org, EMBL-EBI) to project microsites and event pages
- Multiple stacks: Drupal, WordPress, static sites, React applications
- Distributed teams: Six international sites, multiple languages, varying technical skill levels
Key adoption accelerators:
- Reducing maintenance burden: Teams using the framework got accessibility, performance, and responsive improvements "for free" through version updates
- Faster delivery: New sites launched in weeks instead of months
- Consistent UX: Users moving between EMBL properties encountered familiar patterns
- Shared problem-solving: Teams contributed improvements back to the framework, benefiting everyone
Outcomes#
Adoption and reach:
- 50+ properties using the framework across EMBL's international network
- Multiple technology stacks supported (Drupal, WordPress, static sites, React)
- Ongoing contributions from distributed teams improving components and documentation
Development efficiency:
- 40% reduction in implementation time for sites using full framework adoption (based on reported delivery timelines)
- Reusable patterns eliminated duplicated UI work across teams
- Faster iteration through shared component updates
Quality improvements:
- Improved accessibility through framework defaults (WCAG AA compliance)
- Better performance via optimized, tested components
- Consistent UX across EMBL's digital ecosystem
Knowledge sharing:
- Cross-team collaboration through contribution process and quarterly syncs
- Best practices propagation via documented components and rationale
- Reduced tribal knowledge by codifying design and development decisions
What made this work#
The framework succeeded because we optimized for adoption, not perfection. We didn't try to force teams into a single stack or workflow. Instead, we made it easier to do the right thing by providing high-quality, flexible components that solved real problems.
Key factors:
- Starting with real patterns from production sites, not theoretical ideals
- Flexible integration that met teams where they were
- Quality defaults that made teams' work better, not just standardized
- Light governance that encouraged contribution without creating bottlenecks
- Patience: letting teams adopt at their own pace rather than mandating compliance
The result was organic adoption that sustained itself through demonstrated value rather than institutional mandate.