gbh_logo.png

GBH.org Redesign

White GBH logo on purple patterned background

GBH Site Redesign

Like all PBS and NPR stations, GBH.org was required to migrate to the CPB-funded website platform, “Grove”. This new platform would house all GBH digital content. Unfortunately, the out-of-the-box version of Grove did not meet the content needs of the GBH producers. It also did not offer a design system that matched the GBH brand. Our solution was a custom site! 

The new GBH.org was (re)designed by GBH’s Product/Design team and customized by the Development team in collaboration with Brightspot. 600,000 pieces of content were migrated to GBH’s custom instance of Grove, including 383k images, 100k articles, 55k audio files, 40k galleries, 13k videos and 450 tags.

The new GBH website had to solve usability, wayfinding & discoverability, technical, and content production problems.


Areas of Focus

My areas of focus included creating a User Guide, establishing and implementing accessibility standards, conducting user testing interviews, working closely with producers and developers on wireframes and overall site structure, and communicating with stakeholders.

GBH, Brightspot

 
Image of the GBH.org home page
 

Accessibility

We wanted to ensure the new site would meet or surpass AA-level compliance requirements from Web Content Accessibility Guidelines (WCAG 2.1). The old site consistently failed accessibility reviews and did not allow us to successfully meet users with accessibility needs. To midigate this, I authored a digital accessibility checklist. The checklist allows us to implement accessibility standards at every stage of the project. Digital accessibility is no longer an afterthought and the checklist has been implemented foundation-wide on multiple projects.

Creating the Checklist

Using the WCAG 2.1 standards as a guide, I created an accessibility checklist that can be adapted and implemented into any project. It features:

  • Standards based on unique accessibility needs and features for the project

  • Project-specific tasks for Design, Dev, and Content Producers

  • Checklist for QA to use during review

  • Notes where standards are lacking and how to mitigate the issue

Accessibility Results

The new site now meets or surpasses AA-level compliance requirements from Web Content Accessibility Guidelines. It received a Google PageSpeed score of 94 out of 100 on Accessibility. Accessibility improvements on the new site include: 

  • Keyboard navigation (sequence, consistent nav, no keyboard trap) 

  • Assistive technology (info and relationships available in text) 

  • Interactive elements (consistent identification, color contrast, focus)

  • Images (alt text)

  • Forms (keyboard functionality, headings and labels) 

  • Animation/video (keyboard control, play, pause, hide)

  • Audio (keyboard control)

  • Modals (keyboard control, hide)

 
Image of GBH culture page
 

User Guide

We wanted a way to keep the site consistent. A common issue with the old site was that there were no established norms for how the site should look and act. This caused the old site to be very inconsistent and created a lot of problems for both producers and everyday users.

User Testing with GBH Producers

My team wanted to create a User Guide for GBH producers that would improve how they worked with the site. We conducted interviews with multiple producers to establish what they wanted out of a user guide. We wanted to:

  • Identify what areas of their workflow would benefit from a user guide 

  • Identify what their current strategy is for asking for help and giving help to others 

  • Validate that establishing site-wide norms would help their process 

Creating the Guide

After talking with the producers, we established that the guide would be: 

  • A place to establish norms that would keep the site consistent 

  • A document that had answers to common questions

  • A tool to help onboard new employees

User Guide Results

I authored a comprehensive 210 page User Guide for GBH producers. It features common definitions, image/audio/video specs, accessibility guidelines, as well as specific User Role quick links. I created a GoogleDoc that is available to all GBH employees. The GoogleDoc allows the Guide to be regularly updated without burdening the producers with having to keep track of current versions.

 
Daily operations are largely easier than they used to be.
— Grove Producer
 
Image of GBH.org tv show page
 

Post-Launch User Testing

I organized and led a series of user testing interviews with real GBH.org users.

Objective

The goal was to test overall site usability across four major areas of focus: content findability, information clarity, visual appeal, and ease of use.

User Testing Results

All user interview participants had an overall positive experience using the new site, across different content sections, including both editorial and utility. There was no indication of confusion across various functions.

User ratings of overall site experience: (on a scale of 1-5, 1 = least successful, 5 = most successful)

  • Content findability: 4.11

  • Information clarity: 4.39

  • Visual appeal: 3.89

  • Ease of use: 3.49

 
I always come away from the site having found my answer.
— Suzanne, GBH.org User
 

Post-Launch Results

GBH’s version of Grove launched summer of 2023. In the 1 year analysis, we determined:

User engagement increased by 8%

User engagement has improved across total sessions, session duration, and engagement rate. Engagement rate increased by 8%.

Loyal users increased by 4.22%

Increases in engaged behavior and loyalists indicate that our wayfinding and discovery improvements have had a positive impact on the “stickiness” of the site. Users had an overall positive experience using the new site.