In just one year, can you migrate 170 consumer health brands covering 1,500 websites in multiple languages to a single CMS platform? Can marketers tailor the content in each and every instance? Can it be done without an army of Drupal devs and themers?
These were the questions a consumer-health pharmaceutical customer posed to Acquia. We at Coherence had immediate answers: a powerful enterprise cloud hosting platform for multisite management, unparalleled Drupal architecture capabilities, and a kit like Site Factory that gives command and control over multisite web-estates.
The publishing control question, though, still needed an answer. To tackle it, we needed a component-driven design system that could power multiple brand identities yet still keep best practice in markup, accessibility, user experience, SEO optimisation, and content design all in one place — in short, a master design system that the consumer health division could use to build site after site, brand after brand.
Enter Acquia Site Studio
We turned to Acquia Site Studio, the company's design system enabler and a key contributor to the Acquia Customer Experience stack. Site Studio plugs into Drupal and activates component-based pattern design with an easy to use drag-and-drop editing experience. This capability lets design experts build the platform and then hand it to content experts (with no specific technical expertise) to assemble and populate the pages.
As a web design agency focusing on design system approaches, this gives us the ability to provide enterprise-level solutions to our customers. We’ve worked with Site Studio and its predecessors for 4 years, and it underpins our work: delivering multi-market, multi-language, and multi-brand design customer-facing web platforms. We use Site Studio to build design-pattern-driven web platforms and then train our clients, their brand agencies, and their assembly/content agencies to get the most from it.
Critically for the delivery program, it broadens the development skillset from engineers and Drupal themers to digital designers and developers with core HTML skills but less Drupal theming understanding. Engineers can focus their skills where they're needed most — on robust Acquia Site Factory (ASF) architectures and value-add, bespoke coding rather than extensive theming that still delivers limited flexibility.
Building the Design Solution
Previously, our consumer health customer had developed a design guide for visual design agencies that charted the key component blocks, behaviors, and layouts for the web estate. Visual design had already been conducted for their leading consumer brands using the design guide — all by different agencies.
However, when the designs came back and the technical teams started assessing how to implement them in Site Studio and Drupal, it became clear an additional step was needed:
- First, while the design guide carried strong best practice principles, it's a guide and not a rule set. To build a single technical platform and then propagate it to many brands, you need a rule-set. Otherwise, each ASF instance becomes its own standalone platform powering the unique features of a single brand. This fragmentation drives cost, technical debt, design debt, and makes improvement less agile.
- Second, with each design interpreting the designs differently, user experiences vary and inconsistency across brands occurs due to slight variations in execution and constant reinvention. As a result, all the benefits of scale, flexibility, speed to market, and consistency that ASF and Site Studio offers aren't realized.
Building Design Systems as a Service with Acquia Professional Services
Acquia asked Coherence to work with its Professional Services division as a design system partner with experience using Site Studio to build multi-identity web estates. Professional Services’ deep understanding of ASF architecture ensured the web estate was architected with scalability in mind.
We worked with Professional Services to create an unbranded design system or master design system (MDS) that could be propagated through Site Factory to create each Brand Master and their market instances. We’re in the process of rolling this out now across their lead brand, with a roster of assembly agencies training to build out the brand and market sites based on the master we'll provide.
The process highlights important considerations:
Understand the design commonalities
If multiple brand designs already exist as they were in the consumer health estate — as produced by the design guide, we needed to break (some of) these down to find a balance between commonalities and divergences. Some element of redesign at the brand level is required.
Make your design system usable
To be effective, your platform must be usable for the business user as well as the end-user. The opportunity cost of publishing or testing must be reduced to the minimum so that the content publisher can move faster and, ultimately, learn more. Nothing kills creativity and learning like the friction caused by poor publishing workflows.
Finding the balance between usability and rich features in the MDS is key. It's tempting to make the MDS very feature-rich to capture every requirement each brand might have and make it a “must-have.” This creates richness but makes your MDS bloated with single-use-case (and brand-specific) components, which reduces reusability, creates design debt, and makes it harder for your assembly agency/end user to use the system. Above all, the design system must remain usable.
It’s also tempting to build extensive configuration options into each component to make them capable of fulfilling multiple content tasks. Site Studio provides powerful tools to support this. Again, though, over-use will make each component difficult to use.
Fix your errors in the Master Design System
Ultimately, the Master will drive multiple Brand Masters and propagate best practice in markup, user experience, accessibility, and content design across an estate of very different brand propositions. As a result, getting the Master right is imperative. When we spot errors here, we get to fix them before they impact the child instances. Allocating time and resources here speeds acceptance and rollout.
Plan for success and enjoy the rewards
Acquia Site Studio helps design-focused agencies amplify their output. In combination with ASF, we have the ability to create unbranded MDS clones and then apply branding at scale. Getting the fundamentals right is key to this success — both from the point of view of architecting ASF correctly and the perspective of rolling out effective design.
Once the planning and master build is complete, however, we start to see how powerful this combination of technologies and design techniques can be in rolling out multisite, multi-brand web estates. Ultimately, we're able to provide a design system as a service, an on-demand capability to spin-up and style a market instance.
Site Studio provides a powerful tool for agencies with strong design capabilities. It opens Drupal to the design community in a way that previously only themers and developers could access. It allows those agencies to focus on the high-value services (content design, user experience design, accessibility, etc.) while enabling brands to use rosters of assembly agencies — with great logistical capability but no specific Drupal or design competences — to assist with page assembly, content population, and rollout of the market instances. It also allows lean design-focused agencies like us to work with System Integrators at scale in collaborative projects that deliver huge customer value.