Meet the All-New VillageVoice.com
Hello, world. We have new client work to show you. Postlight partnered with the legendary Village Voice to reimagine, redesign, and rebuild their website. The fruit of that collaboration just went live. Check it out right now at villagevoice.com!
When we got started, we saw the Voice’s existing site was showing its age, but it hosted decades worth of amazing content — original reporting and writing, photo galleries, and event listings. In this rebuild, Postlight had a few mandates: to modernize the aesthetics and user experience of the site, to showcase the Voice’s bold photography and story-telling, and to give the editorial staff the tools they needed to publish and feature content in varied, customizable ways.
Postlight tackled these challenges in three main ways. We designed a modular page layout system, customized a content management system to support that modular design, and transitioned existing content from the old CMS to the new one.
Make It Modular
The Village Voice publishes a new print issue of the paper every week. The web site publishes all the work in the print edition as well as web exclusives. That’s lots of new content, especially on the paper’s weekly print schedule.
But the web site is not a weekly — it’s a 24-hour operation. The Voice’s editorial staff needed a way to feature articles on the site in fresh ways on an hourly basis, with the ability to emphasize particular themes and connect individual stories on the fly.
Early on, we knew we didn’t want to create rigid templates that defined immovable spaces where exactly a certain kind of thing went. “Oh just plug a hero image here, a gallery there, a list of links over there.” That would make the site seem static and fixed to readers. It would force editors to make content work in the page layout, rather than make the page layout work for the content.
We wanted the Voice’s new site to be able to grow with the publication. We wanted its pages to accommodate different kinds of layouts and arrangements, including — and especially! — ones we might not think up ourselves. At the same time, every single one of those possible layouts had to look great on every size screen.
To solve this problem, Postlight’s Senior Product Designer Skyler Balbus came up with a modular page design system, which she demonstrated using the paper prototype pictured here.
Each piece of paper represents a module: a bit of content, or a set of stories with a particular purpose or theme. Assuming only the top nav was fixed, Skyler rearranged the pieces of paper to make a point. These building blocks could be put together in any way the editor decided made the most sense, to feature the stories, photos, and functionality that was most important to Voice readers at that moment.
A few examples of the types of modules villagevoice.com launched with include:
- An automated, live-updating list of most popular stories on the site, powered by Chartbeat.
- A marquee featured hero article, flanked or followed by two smaller, supporting posts.
- An automatic list of the most recently published content in a certain vertical. This one comes in a couple of styles — horizontal list of cards (that you can swipe left to right on mobile) or in a grid with inline “Load More” button.
- A curated grid of four equally-sized (and therefore equally visually weighted) articles.
- Any custom markup the Voice staff dreams up.
Each of these modules had to be smart, too. They’d need to know where they were placed on the page, all the little bits and bobs of data they needed to render, and what stories appeared in the modules before them, so that the visitor isn’t seeing duplicate content from one module to the next as she scrolls down.
Once the Voice and Postlight agreed on this design system and fleshed out a few modules, it was time to get building.
Build Out the CMS
We chose WordPress to power the new villagevoice.com for several reasons: we had a short timeline and needed to stand up an alpha ASAP, WordPress is easy to use and hire for, and there are mature managed WordPress hosting services, which meant the Voice wouldn’t need in-house web operations staff to run the site. (PSA: There’s no shame in it.)
Out of the box, WordPress doesn’t support the modular design system we defined for the site, so even starting with a fully-functional CMS, there was lots of building to do. Using the powerful plugin Advanced Custom Fields, Postlight’s Lead Engineer Dusty Matthews created a software layer that enabled other engineers on the project (including myself and our Product Manager Ari Shapell) to define new modules in the code, and watch them magically appear in the WordPress admin, ready to get added to a page.
Here’s what a page’s collection of modules looks like in the WordPress admin:
Using this system, on the site’s front page and vertical pages, an editor can draft, preview, publish, and schedule a collection of customized modules in any particular order.
Add 20 Years of Content (and Stir)
Some of the most tedious, time-consuming, and important work of this project was also completely invisible to users. Postlight had to transfer two decades of stories, photos, categories, and authors already published on villagevoice.com over to the new WordPress instance. The old system exported all that data to a custom file format, so off-the-shelf import tools couldn’t help.
Import requirements included:
- reading 20 years worth of stories—about 125,000 posts, in the form of 1GB of XML — and writing them into WordPress’ data structure
- cleaning up legacy markup intended for 1.0 era browsers inside those articles
- importing about 275,000 images (around 80GB) into the WordPress media library, and updating post bodies to reflect the new location of these images
- importing and collating legacy taxonomies (like categories and tags) into the new structure
- mapping legacy URLs to their new WordPress permalinks
Due to the depth of the archive, the development cycle for building, testing, and iterating on this custom importer required power tools. Dusty explains:
A complete import might take 10 or more hours, so we needed to build out tooling that let us narrow or widen the scope of a test import arbitrarily so that we could make changes and test them on smaller groups of posts. When we felt good enough to release an import run to general testing, we needed to push the results (database and assets) to our staging servers. Using tools like WP-CLI, Robo, and WP Migrate DB allowed us to automate many of these tasks.
Now, site visitors have full access to the Voice’s rich archive of work, dating back twenty years. Go ahead: reminisce about a time when a one-bedroom apartment in Greenwich Village sold for under $200,000, enjoy this review of a late 90s Fleetwood Mac show at the Garden, or see if you recognize any of the founders of ten “Silicon Alley” tech startups — of 1997.
The villagevoice.com we shipped last week is a Minimum Viable Product, built to grow. Now that the site’s publishing platform is ready to support rapid feature development, there will be much more to come.
Postlight was honored to have the opportunity to work with an iconic New York brand like the Voice — and we’d love to work with you, too. Need some help with your site, app, or platform? Drop us a line.
