How Multisite Design Systems Helped a Global Pharma Brand

Big Pharma has had a rough few years. 

Global pandemic notwithstanding, one of the bigs had to move a staggering 170 brands from their legacy systems to a modern cloud platform, a migration known as replatforming. Add quick turnarounds, anxious teams, and a market gone wild, and you’ve got the ingredients for a heavy lift. 

Yet the company made it work. It took the visual aesthetics from 23 brands and created a common design system using underlying patterns these brands shared — kind of like a shared foundation for a building with many tenants. Using that singular design system, the organization deployed 437 sites in more than 50 languages in 18 months. 

The company proved it possible, but behind the scenes, there were agents puppet-mastering the feat. Let’s meet them.

Behind the curtain

A Big Pharma client came to Acquia burdened with this problem of launching numerous sites in a compressed timeline. At Coherence, we had solutions for such dilemmas, and our partners at Acquia had the tools. Naturally, we joined forces. 

We at Coherence knew that the customer needed a technological juggernaut: an enterprise cloud-hosting platform for multi-site management, unparalleled Drupal architecture capabilities, and a central hub to control a crowd of web estates.

Acquia had that tech juggernaut with Site Factory. The platform is great for having tons of websites in one place, a single source of truth from which to govern, observe, and manage. But, before we can see all those sites in one place, we have to build them. 

How’s that possible without a legion of Drupal developers? That’s where Coherence took hold of the strings. To achieve this, we needed a component-driven design system that could act as the design foundation of multiple brand identities while keeping accessibility, UX, SEO, and content design best practices in one place — a central design system that the consumer health division could use to build tons of different sites for tons of different brands.

Something common enough to reuse but flexible enough to repurpose. 

Component-based design in Site Studio

We also turned to Acquia Site Studio, the company's site builder. Site Studio plugs into Drupal and activates component-based design with a user-friendly, drag-and-drop editing experience. This allows design experts to build the components in the design system and content experts to  take those components and assemble pages, much like designers creating Lego bricks and content experts assembling them. Something like this:

As an agency focusing on design system approaches, these components allowed Coherence to provide enterprise-level solutions to our customers. And Site Studio underpins that work by delivering multi-market, multi-language, and multi-brand customer-facing web platforms (and our love of hyphenated compound words). We use Site Studio to build design-pattern-driven web platforms, then train our clients and their brand and assembly/content agencies to get the most from it.

Delivering all this in a component-based design framework frees engineering and content teams up. Engineers and developers can focus on building the architecture of the design system to ensure it’s user-friendly. When they’re done, their colleagues in content can build sites within an approved design system without needing an extensive technical background. 

Building the design solution

With that many brands and websites cooking, it’s easy to have mixed messaging, layouts, looks, and so on. The pharma customer had developed a design guide for outside visual design agencies that charted the key components, behaviors, and layouts for a website. Then the customer used several different agencies to execute visual design for their leading consumer brands with the aforementioned design guide directing the work. 

That’s a lot of agencies making a lot of sites. Scalable? Not especially.

It swiftly became clear that something needed to be done to rein in the variability so the customer could scale. Its in-house design guide was effective but only offered guardrails, not rules. To build a unified technical platform and deploy it to a crowd of brands, you need rules.

Image

Otherwise, each instance becomes its own standalone platform powering the unique features of a single brand. Fragmentation like this drives cost, time, technical debt, design debt — basically every debt — and makes site updates and improvements more difficult.

Unconstrained by foundational rules, every designer can interpret designs differently, leading to disparate brand representation and user experience. That means the pharma company would be saddled with inconsistent branding, haphazard UX across a portfolio of brands, and extended timelines. Not good.

Building design systems as a service with Acquia Professional Services

To build design systems, collaboration was a must. Acquia asked Coherence to work with the company’s Professional Services division as a design-system partner using Site Studio to build multi-identity websites. Professional Services’ deep understanding of Site Factory architecture ensured the web estate was architected with reusability and scalability in mind. 

Together, we created an unbranded design system — a master design system (MDS) — that could be propagated through Site Factory to create each brand’s master site and their market websites. We’re in the process of rolling these master and market sites out now across the client’s portfolio with a roster of assembly agencies training to build out sites based on the MDS we created.

The process highlights a few key considerations.

Understanding design commonalities

If multiple brand designs already exist  — as they did for our consumer health customer — find a balance between commonalities and divergences in those designs. Take advantage of commonalities and use them to your benefit. Minor brand changes to website feel and architecture are a small cost compared to strictly adhering to something that would require a six-month rollout. 

Making design systems usable and reusable 

It may seem obvious, but your platform has to be usable by internal and end users. A design system with a clunky, confusing workflow or user experience (back and front end) is time you could’ve saved your content team. Nothing kills creativity, learning, and content cruise control like friction caused by poor publishing workflows.

Finding a balance between usability and rich features in the MDS is key. It's tempting to make the MDS super feature-rich to capture every tiny request that brands deem a must-have. Sure, the request may be cool, but it bloats your MDS with brand specific, single-use-case components that are tough to reuse, create design debt, and impede universal usability. Keep things balanced between complex and simple, and you’ll see just how quickly you can put a site together. Check it out:

It’s tempting to build extensive configuration options into each component so that they fulfill multiple content tasks or what we call “doing-too-much syndrome.” The more you pack into a component, the more specific the use case becomes, which leads to a library of unusable components except in a handful of cases. Finding a balance between interoperability and personalization is the name of the game.

Design systems — always a work in progress

Because the MDS drives many design foundations, it has to be good. Nobody builds a design system and lets it sit forever. First-try perfection, as the tech industry reminds us, is a pipe dream. When we spot errors in an MDS (and you better believe we’re looking), we fix them before they impact production instances. Perfection? Not possible. Iteration? Constant.

Planning for success, reaping the rewards

Acquia Site Studio helps design-focused agencies amplify their output. In combination with Site Factory, we can create unbranded MDS clones and apply branding at scale. From architecting Site Factory correctly to design system rollout, getting the fundamentals right is key.

Once planning and the master build is done, however, we see just how powerful this combination of technologies and design techniques is. Ultimately, we're able to provide a design system as a service, an on-demand capability that allows us to spin-up and style a market instance — or, in our client’s case, 430+ instances.

Too good to be true? That’s what our Big Pharma customer thought, too. If you want to see similar success, we know a thing or two about how to get you there. Check out our free e-book, Component-Based Design with Acquia Site Studio. Better yet, let us show you.