Austin PBS Redesign

July 23, 2020

Web Development
Frontend
Backend
Node
Express
Handlebars
API services
MRO

Role: Web Developer and project lead

Task: Complete website overhaul and redesign

Webpage: https://austinpbs.org/

Timeline:

October 2017 to May 2018: Development
May 24, 2018: Site launch
May 2018 to January 2022: Production support and maintenance strategy

Site features:

TV schedule listing information
Donation and membership giving opportunities
Marketing and grant initiatives

This website was built to replace the Austin PBS (KLRU-TV at the time) station website, which was a legacy WordPress site. The goal of this redesign was to modernize the server codebase, reduce cost by migrating off of a costly Rackspace server, and to make content management and creation more flexible while maintaining key website functions, such as the TV schedule, marketing and fundraising efforts, and public reports.

Discovery

During the discovery phase, emerging (at the time) ES6 Async/Await functionality made the combination of a Node/Express server and various APIs a natural choice for the backbone of the website. For the CMS, Contentful provided the flexibility desired by content managers as well as a fantastic and well-documented developer experience. Digital Ocean emerged as the front runner for hosting and deployment because of its cost effective droplet solutions.

Development and Collaboration

Development on the site began on October 15, 2017. I tackled data sourcing first, methodically building out TV Schedule pages, main landing pages, secondary pages, and blog post pages, all of which were sourced from APIs.

Coding, however, doesn't happen in a vacuum, and as a rough website structure and taxonomy emerged, I found value and guidance, as well as secured organizational buy-in, by involving and collaborating with stakeholders from all levels and sides of the company. Through listening tours and sticky note brainstorming sessions, members of the Marketing and Fundraising departments told me their pain points and I was able to offer solutions and generate internal excitement for a new generation of Austin PBS's digital presence.

As the functionality and framework came together, I worked hand in hand with the in-house graphic designer to define and implement a visual language for the site, with layouts and page elements that could be reused and repurposed throughout the website.

Throughout all of these stages, I was doing testing for quality and stability in tandem with development, and slowly but steadily a production-ready website was constructed and tested.

Launch, Rebrand, and Beyond

After months of intense and concentrated work, the site launched into production on May 24, 2018.

Achieving modularity and composability during the development process was key to the ongoing success of maintaining this website. Since site launch, Austin PBS has undertaken a number of new fundraising and production initiatives, and the website has been fully capable in supporting and highlighting those efforts with minimal friction and developer involvement. We didn't have to hard code a new set of pages every time we received a new grant, but if a particular project did demand a little bit of special treatment, we weren't locked into a system that was too rigid to be customized.

While there are numerous examples of the website's ability to respond to marketing and strategy changes, there is no better case study than the complete company rebrand that happened on November 4, 2019, when we changed from KLRU-TV to Austin PBS in tandem with a brand refresh from PBS national. While there were new logos, colors, branding guidelines, station names (resulting in API changes), and for the first time in over 40 years, a new company name, one thing that wasn't completely redone was the website. With just a couple weeks of work, the site that had been launched a little over a year prior was easily able to be updated to accommodate these changes (including a major DNS switch!), and the zero downtime that occurred is a testament to the site's resilience and flexibility.

Another key to the success of the website, from a technical standpoint, is a care and feeding strategy that helps to mitigate the accrual of technical debt. To this end I have established and implemented an MRO (Maintenance, Repair, and Overhaul) strategy that breaks down the various needs of a website during its life cycle into varying project scales and cadences.

This MRO strategy has guided development of the site in production, from making minor tweaks that improve accessibility, to completely overhauling the fundraising section of the site in mid-2020 to improve the donor experience, and onward as the site continues to live.