Customizable channel pages

I led ideation, architecture and implementation of landing pages that can be curated by site administrators rather than developers.

The Problem

When our creative director handed us a stack of mockups for our redesigned channel pages, I looked at all the printouts and wondered aloud if these were iterations of one idea. It was quickly clarified that no, these weren’t just options she was presenting for us to vote on—the idea was to give each channel its own layout. This made sense from content strategy point of view—our channels were comprised of entire sites we’d migrated into Observer.com over the last few years and trying decide on a single page layout that could accommodate different amounts of sub channels and post styles was nearly impossible. But having to create custom templates for each channel and the homepage that would have to be updated with a hard code pushes would be a drain on our development resources.

Research

I quickly went to work researching our options. Our channel pages had custom settings built into them that allowed us to curate the post at the top each. Could this idea be extended to do the heavy work of arranging various content modules on each page? This workflow already had issues. It made it difficult for the homepage editor to quickly change the posts on each channel as the settings could only be accessed one page at a time. The workflow also made it hard to train editors as, confusingly, the rest of the curation options available to editors was set in another menu. The settings could be accessed by users with editor access which was fine for setting the top post but we didn’t want to expose our editors to more hefty site curation. Even if we could hide the additional options to users who weren’t admins, it seemed like there were already blockers to extending the channel settings.

custom-channel-pages
Over the last few years, Observer has migrated five entire sites into the flagship site.

I also considered page templates but by making each channel front a page, we’d lose the clean URL for each channel or we’d at least have to do some work to prevent duplicate URLs between pages and categories. We also would be limited in what settings we could determine for each channel which felt like we’d only be able to go halfway on a great idea.

I had seen a few flash talks at the Big WP Meetup on the WordPressWordPress wordpress.org customizer API. What appealed to me about this solution was that a site administrator could add and remove pre-built content modules to create pages. I pinged our partners at 10up and asked if they thought it could be our answer. We decided the lead was promising enough so I began creating specifications for how each module should pull content and then how each page (or section front as we began calling them) should could be built by a site administrator.

custom-channel-pages
Specifications for the workflow we mapped out for site administrators.

Design and Implementation

The story with the large image at the top of the section fronts is curated by our editors in a single section of our dashboard. The grid of stories below are the most popular posts in that section.

Where the page curation became tricky was the content modules below the top stories grid. The idea was to be able to display clusters of content like sub channels and tags but also content that was categorized in two or more taxonomies like Politics (which is a channel and New Jersey (which is a location) or New York Fashion Week (which is a tag) and Style (another channel). Beyond being able to tailor the section front pages, these modules would allow us to highlight content that was relevant to the news cycle.

custom-channel-pages
Editors and site administrators work together to order modules on channel pages. New module designs can be added and configured without require major template updates.

Site administrators can add, remove and order these content modules in the customizer for each section front. Instead of needing to do a total redesign every time we want to add a new way to display content on these pages, we can just add a module. Administrators can even add ad slots.

custom-channel-pages
Modules can be set to pull posts classified as multiple taxonomies.

Going Forward

The new capabilities have better equipped site administrators to respond to requests from the ad operations, marketing and editorial teams. Now, curation of landing pages can reflect the interest of the Observer audience instead of the constraints of a small engineering team.

I presented on this project at the August Big WP Meetup in New York City.