Card
Title
Penn State News
Description

We partnered with Penn State to deliver a modern, secure and scalable digital storytelling experience — one that provides ease of use for editors, flexibility to meet new priorities and allows for nimble front-end changes.

Media
Penn State News webpages displayed on a laptop and on two mobile devices
Eyebrow
Penn State News
Overlay
Off
Teaser

We partnered with Penn State to deliver a modern, secure and scalable digital storytelling experience — one that provides ease of use for editors, flexibility to meet new priorities and allows for nimble front-end changes.

Type of Hero
Detail
Background Image
Penn State Campus Building with Gradient
Duration
Year
2022
Body Content
Body

Project Overview

Penn State News, a digital platform that drives 7 million page views each year, was powered by a highly customized and complicated back-end. With 250 content editors and a syndication network that includes more than 20 Penn State campuses across the state, the platform needed to be optimized for speed and real-time collaboration.

We successfully migrated Penn State News from a monolithic back-end to a decoupled site, using the JavaScript framework Gatsby. Working closely with the Penn State team we created a living design system that empowered users and provides a repeatable standard for how Penn State can both enhance and protect their brand.

Image Size
Large
Image
Penn State News webpages displayed on a laptop and on two mobile devices
Body

A Living Design System

We created a design system using the front-end framework React. Every component was built in Storybook, an Open Source tool used for building, testing and maintaining responsive design systems. Components in Storybook could be tested using mock data before integration, ensuring that they could handle common and edge cases with ease.

Image Size
Large
Image
Closeups of Penn State News web page
Body

Easier Design for Editors

With a large and distributed editorial team, Penn State News needed an authoring experience that gave content editors flexibility while maintaining brand consistency. We worked closely with writers, editors and content managers to develop an efficient workflow with real-time previewing so changes could be made quickly and stories published with ease.

Image Size
Large
Image
Penn State News homepage, showing three featured stories
Body

Increased Optimization Speed

The large volume of images hosted on the site caused major slowdowns in page load time and availability. We vastly improved page speed by moving images to Amazon Web Services (AWS) where they can be requested and loaded on demand. This update improved page speed across the entire site, making the site easier to navigate for all users.

Image Size
Large
Image
Penn State News story on a tablet
Body

test