The document outlines a new innovative storytelling platform for Penn State News, utilizing a modern, open-source framework led by Mediacurrent and Gatsby. It highlights the capabilities of Gatsby as a decoupled, React-based framework aimed at enhancing the user experience, performance, and accessibility of the news site. The initiative addresses various site requirements, including improved content authoring, image optimization, and integration with existing Penn State systems.

1. Penn State News: Scaling to
New Heights in Higher Ed
November 9th, 2021
Creating an Innovative Storytelling Platform on a
Modern, Scalable Open Source Framework
+

2. Today’s
Team
Jim Nourse
Asst. Dir. Web Products
Penn State
Mark Shropshire
Sr. Dir. of Development
Mediacurrent
Grayson Hicks
Staff Software Engineer
Gatsby

3. 1. Mediacurrent’s Focus on Higher Ed
2. Opportunities Facing Penn State News
3. What Needed to Be Done
4. Primed For Publishing
5. The Penn State Platform
6. Q&A
Today’s
Agenda

4. | 4
Gatsby & Mediacurrent
Combining Strengths
| 4
Mediacurrent
● Open source experience partner
● Focused on Drupal since 2007
● Clients include higher education,
nonprofit, government, and global
brands
● Around 90 US-based team
members across strategy, design,
and development
Gatsby
● Open Source, React-based Web
Framework - 50,000+ Github stars
● Decoupled Data Layer makes
sourcing content from your favorite
headless CMS fast & simple
● Gatsby Cloud is a cloud platform
for building, previewing, and
deploying Gatsby sites.

5. Mediacurrent’s Focus
On Higher Education

6. | 6
Higher Ed Partnership
● Mediacurrent is partnered with 7 out of the top
10 Universities in the Adoption of Drupal
● 14+ Years Experience in Higher Education
| 6

7. Opportunities Facing
Penn State News

8. | 8
Penn State
● Over 80,000 students enrolled
● Top 10 largest public university in
the world
● Leader in higher education for more
than 150 years
● Millions of pageviews annually to
Penn State News site

9. | 9
Penn State News Stats
250
Contributing
Editors
30
Unique Stories
Per Day
40
Images and
Video Per Day
Highly Custom
Drupal 7 Build
35
Million Individual
Emails Per Year
70
Syndicated
Partner Websites
| 9

10. | 10
A Content Hub

11. | 11
More Than Just a News Site
Building Togetherness
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.

12. What Needed
To Be Done

13. | 13
Site Requirements
● 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.
● 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.

14. | 14
Creating a Storytelling System
Flexible Design
A highly flexible React component-based
system filled with options to customize a
page with dynamic and static content.
Living Style Guide
Throughout the rebuild, a living
style guide helped designers and
developers understand how the
application would look and feel.
Accessibility Support
Tools and keyboard navigation testing
and audits allowed Penn State’s team to
create accessible digital experiences.

15. | 15
Gatsby Is The Frontend
Built For Decoupled Content
A React-based web
framework that makes
building fast, secure,
scalable, and accessible
sites simple and fun. Gatsby
handles things like routing,
templates, pre-fetching,
lazy-loading, and more right
out of the box.
The Gatsby Content Mesh is
a decoupled data layer
powered by GraphQL that
makes sourcing, normalizing,
and updating content
lightning fast and
straightforward.
Gatsby Cloud helps teams
deliver the best Gatsby
experience with a unified
platform for Building,
Previewing, and Deploying a
Gatsby site to a global, edge
network.
Gatsby Framework Gatsby Content Mesh Gatsby Cloud

16. Primed
for Publishing

17. | 17
Gatsby Preview
An integration with Drupal and Gatsby Cloud
allows authors at Penn State News to see a
preview of changes before they go live.
| 17

18. | 18
Image Optimization
Drupal integration with Amazon AWS S3 allowed
us to decouple the total file size and bandwidth
of images. Now, images are pushed to Amazon,
providing security and faster performance.
| 18

19. | 19
Groups and Roles
With PSU’s large editorial team came the
challenge to manage high-volume workflow
requirements. Groups and roles created in
Drupal make it easier to administer.
| 19

20. | 20
Measurable Security
Improvements
| 20

21. The Penn State
Platform

22. | 22
The Impact of Decoupling
Resourcing
User Experience Performance
Security
Functionality
Flexibility

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

24. | 24
Improved Front-End
Experience
| 24

25. | 25
Drupal Content
Authoring Experience
| 25

26. | 26
Built For Scale,
Built for Reusability

27. | 27
The Penn State News
Open Source Story
| 27

28. | 28
The Distinct Advantages
of Using Gatsby
With DSG, Incremental
Builds, and more - there is
no faster way to build and
deploy your Gatsby site.
Share drafted content or
code on a unique URL that is
perfect for collecting
feedback and testing early.
Gatsby is hosted on the
Edge, delivering your content
in milliseconds to site visitors
all around the globe.
Faster Builds & Deploys Shareable Previews Better Site Performance

29. Questions
& Answers
Check out Penn State News
at psu.edu/news

30. @Mediacurrent
Mediacurrent @Mediacurrent MediacurrentDrupal
Mediacurrent.com @Mediacurrent
Thank You!