How Penn State News Pivoted to Decoupled Drupal with Gatsby

Penn State News is more than just a news site. As one of the university’s most visible communications platforms, the site builds togetherness for the university campus, is an informational go-to during campus emergencies, and drives strategic communications. With so many stories to share, Penn State needed a platform that scaled and was highly performant.

In this session, learn how Penn State News pivoted to a decoupled and open-source architecture, empowering their over 25 campus locations and 18 colleges in sharing hundreds of stories daily, while maintaining a consistent brand with a reliable, secure, and expandable platform They created a platform that can be leveraged across the university for years to come by completing the objectives for the project, which includes:

* Designing for mobile-first flexible design system utilizing a component-based approach
* Rebuilding the Drupal 7 content management and publishing system to utilize a decoupled architecture, leveraging Acquia hosted Drupal and a Gatsby Cloud frontend
* Providing Drupal API endpoints that can expose content to the Gatsby frontend and more than 20 campus locations across the University
* Advancing the university’s SEO strategy and driving measurable change to acquisition, reach, and engagement of readers
* Migrating and improving on the Headlines email system, which sends 30 million individual emails per year
* Building a platform that can scale with cost predictability

Presented at DrupalCon Portland 2022

Transcript

1. How Penn State News Pivoted to Decoupled Drupal with Gatsby DrupalCon Portland 2022 04/26/2022 PREPARED FOR:
2. Table of Contents 01 About Us 02 Product Strategy 03 Technical Strategy 04 Insights 2
3. 3 01 About Us
4. Your Presenters ABOUT US – 4 Mark Shropshire Sr. Director of Development Mediacurrent Jim Nourse Director of Brand Platforms Penn State
5. 5 Penn State ABOUT US – • Over 80,000 students enrolled • Top 20 largest public university • Top 20 NSF Research expenditures • Land, Sea, Sun and Space Grants • Leader in higher education for more than 150 years • Millions of pageviews annually to Penn State News site 5
6. We are Mediacurrent An Open Source Product Agency 6 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 US –
7. 7 02 Product Strategy
8. Decoupling Empowered Penn State to Transform a Website into a Platform 8 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 PRODUCT STRATEGY – 8
9. Penn State News Stats 9 250 Contributing Editors PRODUCT STRATEGY – 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
10. Product Vision PRODUCT STRATEGY – 10 • The Penn State brand is the ultimate product: our ability to enhance and protect the brand across channels. • Empower the many people who tell Penn State stories, and our partners who make on-brand digital things. • Support creation of a central Digital Center of Excellence • Seek and create antifragility: things that gain resilience under stress
11. Digital Center of Excellence PRODUCT STRATEGY – 11 • Guiding how digital products are built, optimized, measured and aligned across vast ecosystems ◦ Centralized design components & brand artifacts ◦ Digital & content strategies: goals, analytics, philosophies & principles for marketers & storytellers ◦ Always on, always evolving optimization ◦ Code, tools, methods for engineers & devs
12. 12 Site Requirements PRODUCT STRATEGY – Hosting Outsource Hosting Infrastructure to the Cloud Authoring Build a Best-in-class Content Authoring Experience Decoupled Frontend Provide a Secure, Reliable, and Performant Decoupled Frontend 12
13. 13 Site Requirements PRODUCT STRATEGY – Universal API Provide API for All Penn State Campuses Global System Integration Integrate with Penn State Systems Workflow Segregation Separating workflow around front-end and back-end 13
14. 14 14 Predictable Costs
15. 15 We Decoupled Everything PREDICTABLE COSTS – More than Front and Backends Refactor and migration is an opportunity for all components to evolve into discrete, reusable and repeatable services Each service can be maintained in isolation by different partners with the right skills and expertise 15 Examples: Design Systems & Pattern Libraries Content API’s Federated Navigation Alerts Search API Image CDN Preview
16. 03 Technical Strategy 16
17. 17 17 Build Platforms
18. 18 18 Design System of Record TECHNICAL STRATEGY – • Component-Based • Democratized Content • Complex Back-end
19. Leveraging What Penn State Had TECHNICAL STRATEGY – 19 + = ?
20. 20 Content Authoring Experience TECHNICAL STRATEGY – 20 It is critical that the AX is top-notch given there about 250 content editors.
21. Content Moderation TECHNICAL STRATEGY – 21 With PSU’s large editorial team came the challenge to manage high-volume workflow requirements.
22. 22 Separation of Concerns
23. Gatsby Is The Frontend Built For Decoupled Content TECHNICAL STRATEGY – Gatsby Framework 23 Gatsby Cloud
24. 24 Gatsby Preview TECHNICAL STRATEGY – 24 An integration with Drupal and Gatsby Cloud allows authors at Penn State News to see a preview of changes before they go live.
25. 25 Content API TECHNICAL STRATEGY – 25 In this case, Drupal is the best tool to centralize content management for partner websites and systems.
26. 26 26 Always-On Optimization
27. 27 Platform Tech Stack TECHNICAL STRATEGY – 27 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.
28. 28 04 Insights
29. 29 29 Challenges INSIGHTS – • Web Mental Model Shift • Bleeding Edge Tech • Hosting POCs • Long Full Build Times
30. 30 30 Successes INSIGHTS – • Improved Authoring Experience • 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
31. 31 https://www.psu.edu/news
32. Q&A Jim Nourse - Penn State University jnourse@psu.edu Mark Shropshire - Mediacurrent mark.shropshire@mediacurrent.com Reach out with any questions! Stop by the Mediacurrent booth (#219) to continue the conversation.
33. Thank You Drupal Camp Asheville July 8-9, 2022 Trainings/Contributions/Unconference on Friday Sessions and BoFs on Saturday Community Retreat on Sunday