Austin City Limits Redesign

February 18, 2020

Role: Web Developer and Trainer
Tasks:
- Website redesign
- Data and media migration
Website: https://acltv.com
Timeline:
- November 19, 2019: Begin Development
- January 14, 2020: Site launch
Site Features:
- Taping Announcements
- Episode and Artist Anthology
- Taping live streams during COVID-19 pandemic quarantine
- Episode Airing/TV Schedule Information
- Music/artist news blog

Austin City Limits is Austin PBS's national production, with musical performances being shot year-round at ACL Live at the Moody Theater in downtown Austin, Texas. Broadcast since 1974, ACL is now the longest-running music program in television history. While the Austin City Limits brand umbrella has grown to cover an annual music festival, an award-winning music venue, and a radio station, the website for the TV show that started it all had gone without maintenance and upkeep for several years prior to this redesign.

From eliminating unmaintained custom plugins and themes that contributed to brittle site architecture, to modernizing the content management tools and workflow, to migrating off of a costly Rackspace web server, this long-overdue website redesign is a case study in vastly reducing technical debt.

Discovery

On November 19, 2019 there was a project kick-off meeting with the Austin City Limits stakeholders and content managers to discuss web needs. The site that was live at the time was a legacy WordPress install that had fallen out of care and was running unmaintained custom PHP code that posed security issues. From a content standpoint the site had steadily become a victim of feature bloat, presenting numerous pages and functionality that modern web usage no longer demanded. Most crucially, the site was also hosted on a Rackspace server whose costs far outspent the site's needs. All of the above culminated in a no-win situation -- to save money, we needed to move the site off of its server, but the site was too brittle and old to simply migrate wholesale.

The solution we proposed was to dial the website's content offerings to nothing more than core functionality -- taping announcements and ticket giveaways, promotion of where and how to watch episodes both online and on the air, a blog that covered news about artists and tapings, and anthology information covering the show's 40+ year history.

The consensus among stakeholders was that sticking to WordPress but simplifying content offerings would make their lives easier. From a technical standpoint, cutting out custom post types and paring content down to well-categorized blog posts and pages meant that the core functionality of a fresh, modern WordPress install would really shine. The archive of pages and blog posts could easily be migrated from the old site. Digital Ocean, where we were already hosting all of our other websites, offered affordable solutions for spinning up modern WordPress droplets on an up-to-date server running Ubuntu 18.04.

Development and Content Migration

As we had fallen into a technical debt trap with a custom theme that wasn't maintained, built by a previous developer who had left the organization long before I showed up, we decided to develop the new look and feel of the website based on the WordPress 2020 theme that had just been released. Going with a child theme based on something generic that came installed on every new instance of WordPress meant we could easily tweak for customization where it made sense, but otherwise leverage the ongoing community support to keep the backbone of the theme up-to-date.

The biggest challenge was data migration. Over a 9 year lifespan, the website had accrued hundreds of blog and news posts about artists that had graced our stages and other music industry news. Austin City Limits is nothing if it's not a cultural institution that helps document and catalog a certain history of American performance and songwriting traditions, so that backlog and history simply had to survive the migration.

However, as anyone who has attempted to migrate nine years' worth of content from an active WordPress site knows, that migration process is finicky and fraught with peril. Before moving anything, and at several points along the way, I made backups and archives of all of the content on the old website, saving copies in multiple places in cloud storage as well as external hard drives. I even worked with our in-house archivists, giving them a copy of the information, some of which informed and paralleled efforts they were making as they digitized the audio and video from the show's history. I figured that if anyone would know best practices for preserving historical information, it would be them.

The front end design process was a collaborative one. Branding guidelines informed color choices, fonts, and visual language, which helped maintain consistency across the website, on social media, on printed materials, and over the air. Additionally, the content managers asked for the ability to embed full episode streams. These videos, hosted on PBS.org, were something that the previous iteration of the website lacked. While the new WordPress Gutenberg blocks had options available for YouTube and Vimeo embeds, nothing was available for a custom <iframe> embed, so I built a custom block element to make embedding from this new video source as seamless a process as working with native functionality.

Training and Launch

With the site coming together in time to launch for the announcement of the show's 46th season, I needed to start handing control over to the content managers. As mentioned previously, these folks had used WordPress before, so they had experience with the workflow of logging into the back-end and creating or updating pages and blog posts. Gutenberg blocks, however, were new to them. To address this I conducted some very basic one on one training sessions from January 6 to 9, 2020, which went over well. Some folks were totally new to the concept, others had seen similar workflows in other tools that they used, but they were all on board and thought that the blocks would give them a great deal more flexibility than the old WYSIWYG editor.

With the site handed off, we went ahead and launched it and switched DNS on January 14, 2020. There were some hiccups with the DNS switch (aren't there always?), and post-launch I had to make some patches where some migrated content's metadata caused some issues, but all in all it went smoothly and and there is now far more confidence in the site's infrastructure.

COVID-19 Live Streams

Business commenced as usual after the site launched until mid-March 2020, when the COVID-19 pandemic brought everything to a halt. Production had to stop on Austin City Limits's 46th season, as travel and crowd gatherings in enclosed spaces were restricted. A span of almost six months passed before protocols could be put in place to begin taping artists in audience-less performances. When these tapings started up, we realized an opportunity to show sponsorship recognition and provide a virtual ACL experience for our donors and community. We could stream a video feed of the tapings live on YouTube, and embed that stream into a page wrapper that displayed artist information, the show poster and where to purchase it, and the logos and names of the national and local underwriters who made the show possible.

I worked with the in-house graphic designer to give these pages a polished look and feel. I secured internal buy-in through long email threads, making sure all interests and needs were addressed. The page layout had some elements that didn't quite fit into the default layouts provided by the WordPress theme, so I used WordPress template files to accommodate those customizations, all the while ensuring that content editors could create these live stream pages without needing a web developer. A screenshot of one of these live stream pages can be found below.

Some Numbers

Between January 14, 2020 and January 14, 2021, acltv.com served:

969,920 pageviews
481,713 users
593,825 sessions

Devices:

56.7% mobile device users
37.2% desktop users
6.1% tablet users

Browsers:

40.2% Chrome
35.1% Safari
24.7% Firefox, IE, Edge, etc.

Tech Stack

Content Sources:

WordPress CMS
PBS TV Schedule Tool

Front-end:

PHP / WordPress Child Theme
SCSS / SASS

Back-end:

WordPress, Apache 2, MySQL on Ubuntu 18.04
Digital Ocean deployment and hosting
Google Domains DNS Registrar