How do you migrate 170 consumer health brands, covering 1,500 market websites in many languages, in a year, to a single CMS platform and give publishing control to marketers to tailor the content in each and every instance? How do you achieve this without an army of Drupal devs and themers?
This was the question posed by a consumer-health pharmaceutical customer to Acquia. Acquia had some answers to this question straight off the bat: a powerful enterprise cloud hosting platform for multisite management, unparalleled Drupal architecture capabilities and kit like SiteFactory that gives command and control over multi-site web-estates.
The publishing control question, though, still needed an answer. This called for a component-driven design system that could power multiple brand identities and yet still keep best practice in markup, accessibility, user experience, SEO optimisation and content design all in one place: in other words, a Master Design System that the consumer health division could use to build site-after-site, brand-after-brand.
Enter, Acquia Site Studio
Acquia Site Studio is Acquia’s design system enabler and recent addition 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 let’s design experts build the platform, and then hand-off 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 at Coherence the ability to provide enterprise level solutions to our customers. We’ve worked with Site Studio, and its predecessors, for 4 years now, and it underpins everything that we do: 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, their assembly/content agencies to get the most from it.
Critically for the delivery programme, it broadens the development skillset from engineers and Drupal themers to digital designers and developers with core HTML skills but less Drupal theming understanding. The engineers can focus their skills where they are needed most: on robust Acquia Site Factory (ASF) architectures, and value-add bespoke coding, rather than extensive theming, which still delivers limited flexibility.
Building the Design Solution
Previously, our consumer health customer had developed a design guide; a guide for visual design agencies charting the key component blocks, behaviours 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 into Site Studio and Drupal, it became clear an additional step was needed:
Firstly, while the design guide carried strong best practice principles, it is a guide and not a rule set. To build a single technical platform and then propagate it to many brands, a rule-set is needed. 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 lack of agility for improvement.
Secondly, with each design interpreting the designs differently, we have varying user experiences, and a lack of consistency across brands driven by slight variations in execution and constant re-invention of the wheel. Either way, all the benefits of scale, flexibility, speed to market and consistency offered by ASF and Site Studio are not realised.
Building Design Systems as a Service with Acquia Professional Services
Acquia asked Coherence to work with Professional Services 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 in training to build out the brand and market sites based on the Master we are providing.
The process highlights some 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, it will be necessary to break (some) of these down to find a balance between commonalities and divergences. Some element of redesign at the brand level will be needed.
Make your design system usable
Your platform must be usable for the business user as well as the end-user to be effective. The opportunity cost of publishing something, or testing something, 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 feature richness in the MDS is key. It is 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. This reduces re-usability, builds-in design debt and makes it harder for your assembly agency/end user to use the system. The design system must remain usable.
It’s also tempting to build extensive configuration options into each component - making 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
The Master ultimately 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.
This makes getting the Master right critical. 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 multi-site multi-brand web estates. Ultimately, we are 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 have been able to access. It allows those agencies to focus on the high-value services (content design, user experience design, accessibility, etc) while providing brands with the ability to use rosters of assembly agencies - with great logistical capability but no specific Drupal or design competences - to assist with the 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.