Creating a Modern, Scalable Open Source Platform with Decoupled Drupal PREPARED FOR: Tech Pros 2022 Penn State University Strategic Communications 2022 

Your Presenters ABOUT US – 2 Mark Shropshire Sr. Director of Development Mediacurrent Jim Nourse Director of Web Platforms Office of Strategic Communications 

Mediacurrent An Open Source Product Agency 3 Based in the U.S., with team members around the globe, we define, design and deliver websites, platforms and digital experiences. We work across industries to provide utility to users, build value for businesses, and move technology forward. Our commitment to the Open Source Community goes beyond software contribution, extending into our craft, process and culture. ABOUT MEDIACURRENT – 

Table of Contents 01 The Vision 02 Penn State News 03 Q&A 4 

5 01 The Vision 

So, About Polaris.. ● In 2012-14, IT and Strategic Communications partnered on a CMS, design and operational alignment program ● Phase 1: WWW and News ● Phase 2: The Commonwealth Campuses platform ● www.psu.edu is no longer in Drupal and is hosted in AWS S3 ● www.psu.edu/news remains a Drupal product* * Drupal is one of many services involved THE VISION – 6 

Lessons Learned ● Centralization mandates are hard ● Design, build and rollout took too long ● Built to do too much – technical debt ● Understand what people need ● Deploy in a flexible hosting environment ● Developer community eager to share ● Choose modern technology stacks ● Broad enthusiasm for frontend brand alignment ● Bring in experienced teams THE VISION – 7 

What happens when an organization doesn’t embrace these principles? VISION - 8 

9 

Goal: Help Solve Institutional Problems ● Share the tools that power Penn State’s brand and high visibility websites ● Meet the producers of websites where they are ○ Regardless of stack ● Embrace Penn State’s thriving open source community ● Make AD-54 relevant ● Create a consultative digital center of excellence ● Support cost control and cost predictability ● Use data to drive decisions THE VISION – 10 

11 The Big Picture Greater Brand and UX Alignment in Public Facing Penn State Websites Empower Brand Ambassadors A decentralized matrix of staff, faculty, students and vendors implement our digital brand The Penn State Brand on the Web Align, enhance and protect the brand across digital channels Digital Center of Excellence Support diverse workforce with expert consultants: digital, design, content, technical, UX, analytics. Reusable Code. Sharable Strategies Content strategies, design patterns, frontend and backend code, cloud hosting providers. VISION – 11 

Building Blocks of a Platform Brand Artifacts Colors, patterns, fonts, headings, buttons, form elements, icons, navbars, footers, cards, marks, hero’s, grids, alerts, blockquotes, etc. Designed Brand Components & Style Guides Content strategies, content models, collections of components. How to assemble the pieces on-strategy and on-brand. Tools for Content Writers / Producers Downloadable JavaScript, HTML, CSS. Templates. GIT repos. Custom upstreams. Access to cloud hosting partners. Code for Developers Philosophies, Principles, Documentation Implement, Contribute, Web Ops, Customize, Hosting VISION - 12 

13 Step 1: Leveling Up a Web & Digital Team VISION - Focus on Division Priorities Focused on improving our core. Onboard: Digital strategy, agile processes, and industry standard tools and methods.. Brand book. Micro sites. Write great user stories and specifications. Embrace Data-Driven Decision Making Avoid doubling down on the past. Embrace a questioning, hypothesis-driven optimization culture. Do the research. Trust the results. Rapid Prototyping. And More Rapid Prototyping Sprint to demonstrate incremental results on a routine cadence. Earn trust of stakeholders. Just Enough, Just in Time Not every website is the same. Embrace platform-agnostic solutions. 13 

14 Step 2: Refactor WWW.PSU.EDU VISION - Discovery Deep UX research, stakeholder interviews. We had a battleship but only needed a speedboat. Site goals: traffic direction, brand storytelling. Design Extensive wireframing. Invest in atomic design philosophies. Platforms and Dev-ops Empower editors with a lighter-weight, component-based CMS. Develop recipes to extract db-driven CMS content into CDN-ready static resources. Move from on-prem to cloud; get in front of cloudfront. Establish modern CI/CD pipelines. Static components: live integrations. Create Always-On Optimization Culture Modern websites are never ‘done’. Invest in continuous optimization cycles. Focus on the user, site performance, SEO. Changes in tech. 14 

Step 3: Design Systems VISION - 15 A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Design systems are a living combination of design assets, style and usage guidelines, code snippets, and more. Benefits of Design Systems ➔ Deliver consistent, on-brand user experiences across all digital touchpoints to meet customer expectations ➔ Decrease maintenance and unintended design and technical debt to save time and money ➔ Drive cultural change for how internal teams and partners work together and collaborate with one another ➔ Position maturity inside and outside of your organization 

Typography, Color and Tokens VISION - 16 

17 Step 4: Component Libraries VISION - 17 

Step 5: Develop Content Strategies and Instructions for Storytellers “When” and “Why” components in a website are used is the domain of marketers, storytellers and strategists. VISION - 18 

19 Step 6: A Platform for News, and More PRODUCT STRATEGY – Develop a Unifying Product Strategy Single domain strategy. Leverage the brand. Focus on SEO. Anticipate demand for downstream API ingestion. “It’s more than a website”. Bring in Experienced Teams and Tested Methods Use a stack and methods that would be recognized in the private sector. Choose commodity solutions across the stack – default to open source solutions wherever possible. API-first Architectures and Mini-services Architect in segments. Embrace agility and antifragility. Architect for Maximum Reusability and Scalability Build the platform while building the product. 19 

Step 7: Code, Upstreams & Web-Ops PARTNERSHIP AND PLATFORMS – Standardize Design and Functionality Across Many Sites Custom Upstreams act as a scaffold for new sites, allowing developers and site owners of any skill level to kickoff projects at warp speed. Efficient Update Strategy A sustainable and scalable process for handling updates across massive site portfolios. Yet Still Highly Customizable When base scaffolding won’t do, partnering units can apply customizations via code changes. Centrally Managed. Cloud Hosted. The core platform is centrally managed. Customizations are the responsibility of adopting partners or their vendors. Core Platform Custom Upstream Website 1 Website 2 Website 3 Website 4 GIT.. CORE REPO GIT.. PARTNER REPO 20 

21 News Site Requirements PRODUCT STRATEGY – Hosting Outsource Hosting Infrastructure and DevOps Automation to the Cloud Authoring Build a Best-in-class Content Authoring Experience Decoupled Frontend Provide a Secure, Reliable, and Performant Decoupled Frontend One-Domain, Multiple Hosts Glue News to psu.edu Via Reverse Proxy 21 

22 Platform Requirements PRODUCT STRATEGY – Universal API Provide API for All Penn State Campuses, Colleges and Units Global System Integration Integrate with Penn State Systems Workflow Segregation Separating workflow around front-end and back-end Reusable Services and Patterns Logic agnostic to particular business process or stacks 22 

23 02 Penn State News 

24 24 Build Platforms 

Penn State News Stats 25 250 Contributing Editors PENN STATE NEWS – 30 Unique Stories Per Day 40 Images and Videos Per Day X Highly Custom Drupal 7 Build 70 Syndicated Partner Websites 35 Million Individual Emails Per Year 

26 26 Design System of Record PENN STATE NEWS – ● Component-Based ● Democratized Content ● Complex Back-end 

Leveraging What Penn State Had PENN STATE NEWS – 27 + = ? 

Decoupling Empowered Penn State to Transform a Website into a Platform 28 Community Touchstone As a respected hub of information for the full university community Campus Emergencies An essential informational go-to during campus emergencies Informing the Public Drives strategic communications and supports public relations initiatives PENN STATE NEWS – 28 

29 Separation of Concerns 

Gatsby Is The Frontend Built For Decoupled Content TECHNICAL STRATEGY – Gatsby Framework 30 Gatsby Cloud 

31 Content Authoring Experience PENN STATE NEWS 31 It is critical that the AX is top-notch given there about 250 content editors. 

Content Moderation PENN STATE NEWS – 32 With PSU’s large editorial team came the challenge to manage high-volume workflow requirements. 

33 Gatsby Preview PENN STATE NEWS – 33 An integration with Drupal and Gatsby Cloud allows authors at Penn State News to see a preview of changes before they go live. 

34 Platform Tech Stack PENN STATE NEWS – 34 We’ve pulled together a robust combination of open source technologies to build out our tech stack. API User-Facing Website Images Campus Alerts Files Send Emails for News Publications, etc. 

35 35 Always-On Optimization 

36 36 Wins PENN STATE NEWS – ● Improved Authoring Experience ● Richer SEO and Analytics ● Standardized psu.edu Brand ● Campus Alerts as a Service ● Reduced Full Builds 81% ● Lower Operating Costs ● Open Source Contributions ● Federated Navigation ● Single domain, multiple workflows glued by proxy 

Where We’re Going ● Shareable, always evolving library of components ● Tools, strategies, documentation for marketers, developers and our partnering vendors ● Design system ● News Content API ● Federated “live” components and CDN for common things ● On-brand WP Theme for Wordpress Sites at Penn State ● Partnership with WPSU ● Consultative Digital Center of Excellence ● Access to our code and technology stack ● Custom upstreams THE VISION – 37 

Q&A Jim Nourse - Penn State University [email protected] Mark Shropshire - Mediacurrent [email protected]