Think Locally, Build Globally - How Drupal is powering headless omni-channel web platforms

A presentation at Florida Drupal Camp in February 2023 in Orlando, FL, USA by John Picozzi

Slide 1

Slide 1

Think Locally, Build Globally How Drupal Can Power A Headless Omni-Channel Web Platform February 2023 CONFIDENTIAL. Copyright © 1

Slide 2

Slide 2

01 Who - Introduction 02 What - Is a Headless Omni-Channel Web Platform 03 When - Do I need such a solution 04 Where - Has this been used before 05 Why - Is it so effective 06 How - Do I get started CONFIDENTIAL. Copyright © 2 2

Slide 3

Slide 3

Who… ★ Am I? ★ Is this talk for? CONFIDENTIAL. Copyright © 3

Slide 4

Slide 4

PRESENTER John Picozzi Solutions Architect I believe strongly in contributing to the Drupal community and supporting open source in any way I can. I’m the organizer of the Drupal Providence Meetup, an Acquia-certified Site Builder, a co-host on Talking Drupal, and a co-organizer of the New England Drupal Camp. Throughout my career I have crafted Drupal solutions for many organizations like CVS Caremark, Leica Geosystems, Blue Cross Blue Shield, Marriott International, Rhode Island School of Design, and Getty Images. 4

Slide 5

Slide 5

Who Is This Talk For? Anyone who needs to build a web platform. 5

Slide 6

Slide 6

What… ★ Is a headless omni-channel web-platform? ★ can these systems consist of? CONFIDENTIAL. Copyright © 6

Slide 7

Slide 7

Is it a website? Definition: A set of related web pages located under a single domain name, typically produced by a single person or organization. A single connection point to your users/customers. CONFIDENTIAL. Copyright © 7

Slide 8

Slide 8

SECTION TITLE Let’s Break it Down! Headless / Headless CMS Omni-Channel Web Platform What is it!? Headless software is software capable of working on a device without a graphical user interface. A high-quality customer experiences that occur within and between contact channels like websites, email, in-store kiosks, and more. A Web Platform is a Web 2.0 concept that goes beyond simply editing your website through a CMS and delivers you a full online communications and management system. A Web Platform brings together many different tools all through the central system. A platform or system that combines many tools to effectively and efficiently streamline customer experience and personalization through multiple touch points & methods A headless Content Management System, or headless CMS, is a back end-only web content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front end or presentation layer. 8

Slide 9

Slide 9

Design System CMS 3rd Party Tools PIM / CRM / Etc A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. A content management system is computer software used to manage the creation and modification of digital content. Third-party tools and APIs can consist of anything from JS widget drop ins to integration with Search services. Product Information & Customer Relationship management systems help organizations administers customers or products, typically using data analysis to study large CONFIDENTIAL. Copyright 99 © amounts of information.

Slide 10

Slide 10

When… ★ ★ Does an Omni-channel web platform make sense? Does an omni-channel web platform NOT make sense? CONFIDENTIAL. Copyright © 10

Slide 11

Slide 11

Multiple Brands, Units, or Branches Multiple Outlets for Information Design System or 3rd Party Integration An omni-channel web platform make sense If you have multiple brands, units, schools, or branches that need a central set of tools and/or governance. An omni-channel web platform make sense if you have multiple outlets for the information on the platform and If you want or need a publish once display everywhere architecture. An omni-channel web platform can help implement a standard design system or a commonly used 3rd party integration for multiple systems or units. 11

Slide 12

Slide 12

When It Doesn’t Make Sense? ● ● ● Single use website Documentation site No need for growth or improvement CONFIDENTIAL. Copyright © 12

Slide 13

Slide 13

Where… ★ Is this used today? CONFIDENTIAL. Copyright © 13

Slide 14

Slide 14

Global Pharma Company Commerce Sites Modular: The Web’s New Architecture A large Pharmaceutical company needed a web platform to support its 100+ unique U.S. brand websites. By using Drupal as a content management & layout tool, coupled with a new component based design system, they were able to quickly bring sites to market while both reducing the amount of maintenance and giving each site control of it’s look and feel. Many companies that sell online have multiple points of sale and potentially have multiple product management and customer management systems. Taking a headless approach allows for integration with those systems and using that data in any way needed on the front end. The internet is crowded. Over the last decade, a new generation of technologies have emerged letting teams create experiences that stand out, increase conversions, and change with their customers. 14

Slide 15

Slide 15

Why… ★ Is this working for them? CONFIDENTIAL. Copyright © 15

Slide 16

Slide 16

Cost Savings More Effective Testing Faster Time to Market Reduce Tech Debt Reduced maintenance and development costs, coupled with better organizational spending is a real win. The ability to test once and use everywhere allows for more effective and faster testing Existing platforms see sites coming online faster and being built easier. The ability to share features, functionality, and components reduces long term technical debt CONFIDENTIAL. Copyright © 16 16

Slide 17

Slide 17

Better Governance Component Reuse Shared Features Shared Integrations Implementation of a web platform can lead to better web governance. Reducing issues and supporting faster time to market Component reuse supports faster time to market and allows budget to be spent on platform improvements instead of reinventing the wheel. Shared features reduce the amount of duplication of effort and allow for budgets to go further. 3rd party integrations can be developed once and used by many. CONFIDENTIAL. Copyright © 17 17

Slide 18

Slide 18

How… ★ Many ways can you build a platform? CONFIDENTIAL. Copyright © 18

Slide 19

Slide 19

19 How A Design System A Design system is a set of interconnected patterns and shared practices coherently organized. Design systems aid in digital product design and development of products such as applications or websites. - Wikipedia 19

Slide 20

Slide 20

20 How Drupal Consider Drupal the glue or a traffic cop in a headless web platform architecture. Drupal also makes for a great content layout tool if you enable layout builder. 20

Slide 21

Slide 21

21 How API First / Headless An API-first approach means that for your platform, your APIs are treated as “first-class citizens.” That everything about your platform revolves around the idea that the end product will be consumed by multiple front ends, and that APIs will be imperative to this process 21

Slide 22

Slide 22

22 How Governance Governance is an organization’s structure of staff and the technical systems, policies and procedures to maintain and manage a website. Website governance applies to both Internet and Intranet sites - Wikipedia 22

Slide 23

Slide 23

23 How 3rd Party Services Take into account your 3rd party services and integrations. They can influence how you build and develop your web platform. 23

Slide 24

Slide 24

Helpful Resources https://picozzi.com/fldc2023 24

Slide 25

Slide 25

John E. Picozzi Thank you! Solution Architect @johnpicozzi [email protected] epam.com 25