How We Made Nu Source

Our redesign evolved slowly and came together quickly, with a small team

(Takahiro Sakamoto)

We made the original site ourselves back in 2012, based on our research and our best guesses about what a site like Source should be. We’ve known for a couple of years that it was time to rework Source—the design needed a refresh, and as importantly, the navigation and structure needed to evolve to match the way we publish now.

Erin: Making the Plan

To begin with, Lindsay Muscato and I pulled together a big list of everything we knew we wanted to change, and also had a series of research calls with folks throughout our community to dig into their expectations and talk about how they used Source and what was missing. (The thing we heard most often, incidentally, wasn’t about Source at all, it was that almost everyone wanted another SRCCON or a bigger SRCCON or some other way to increase the conference’s capacity. Happily, we’ve just begun a new grant that lets us do exactly that.) On the back end, Ryan Pitts was making plans to overhaul the CMS he’d built for us and make room for the new structures we were dreaming up.

Once we’d assembled a big list of everything we—and you—wanted, we prioritized it into phases, made a project plan…and then got delayed for about a year by the exigencies of running a whole string of events and programs with a tiny team. But last fall, with our new independent status in sight, we set aside the time to get the site work done. By winter, we had wireframes and a detailed tech plan, but our design work was still behind—our director, Dan Sinker, had designed our original site, but for some reason didn’t have a ton of extra time to work on the redesign while guiding OpenNews through the legal and process hurdles of becoming independent. Weird!

As a longshot, I checked with Ethan Marcotte to see if he might have a little bit of time for a design sprint in January. I’ve had the very good fortune of working with Ethan on several site design and book projects over the years, and when he wrote back that he was available for a sprint and ensuing moral support, everyone cheered. Ethan’s design work picked up from our IA and gave us a fresh palette, spacious layouts, and new type. As he writes on his blog, Ethan guided us from a few early comps straight into live HTML prototypes, and then front-end templates that Ryan could adapt for our CMS. The site’s look is very obviously different from the one we had before, but as importantly, it’s smoother and livelier on a wide range of screens and devices (almost like Ethan wrote the book on that) and is also much sharper on the accessibility side.

In the meantime, Ryan was completing the last of a series of complicated migrations to new servers and versions, and beginning to build out the new front end. I’ll pass to him for the breakdown of his work.

Ryan: The CMS Overhaul

The CMS underneath Source was originally written five years ago, using a set of tools and approaches that answered needs back then. But that’s enough time for a whole lot of things to fall out of date, so redesigning Source this year was an excellent opportunity to modernize the backend as well—everything from repo layout to devops. I’m definitely swayed by “never write your own CMS!” arguments, but we chose to stay custom because we track data types like People, Organizations, and Code repos. These serve not just as references, but as “pivot points” that link projects and stories on Source over time.

One of the biggest changes to the project backend was with Django, the framework the site is built on. Old Source ran along for years on Django 1.4, but new Source walked that forward to the current version, 1.10. Django’s excellent release notes made it easy to create sets of GitHub issues and move ahead one version at a time. I also ripped out plenty of old code along the way, added better security, and jumped to Python 3.5.

There’s still some old Source in the new repo for now. An old templates branch let us quietly switch platforms several days before the redesign launched, serving up a site that was running on new architecture but looked just the same. We used beeswithmachineguns to do some load-testing before that migration, and then had a few days to monitor resources under normal traffic. After that, making the redesign live was as simple as deploying a new branch. (Honestly, launch morning was alarmingly smooth.)

Source’s deployment environment is completely new as well, moving from AWS to Heroku. We have a pipeline with a staging app that stays in sync with our GitHub repository, and a production app that gets promoted manually. Stacking apps in a pipeline also made it easy to do a massive amount of content work in the staging database (where editors could see things reflected in the new design), then take a snapshot and restore data up to production. Heroku gives us access to easily managed add-ons that handle everything from Postgres to Elasticsearch to SSL certificates, which makes devops easier for a small team working on a lot of other projects too.

And alongside the base code for the Source CMS, we have a number of features that only exist thanks to the open-source community. Typogrify helps make our typography pretty. Django-environ makes it easy to pull app secrets out of environment variables, which is particulary nice to pair up with heroku config. Django-sesame let me write and test a password-less login system in an evening. Our repo docs call out these libraries, as well as several other wonderful open-source projects we couldn’t make Source without.

Erin: Putting It Together

In the final weeks before we relaunched OpenNews and the Source site, Ryan and Ethan worked through template integration, Ryan put finishing touches on all of OpenNews’s new environments, and Lindsay and I did a content audit of the existing Source database and did about 30 hours of data-repair work to fix the lingering damage from a couple of rounds of data loss related to our former server and backup setups. Then we waited for the press release announcing our independence to go out from the Knight Foundation at 9am ET on February 9, flipped a lot of switches, and…everything worked.

We’ll be rolling out small enhancements on the new site over the coming months, and it’s now much easier for us to make editorial changes and distinctions in the CMS, so structural tweaks are now a breeze. Above all, the site’s easier to read and use and the CMS makes it easier for us to do our core publishing work.

Our attention in the coming year will be focused a little more narrowly than it has been in previous years: we’re emphasizing security and privacy, government data and transparency, accessibility and inclusive design, and newsroom culture, including self-care. We’ll still be publishing loads of project walkthroughs and process breakdowns, and we’ve restarted our roundups and added a slate of amazing columnists. Sign up for our newsletter, hit the RSS, and follow us on Twitter to keep up with the flow, and we hope to see you in person at NICAR and SRCCON and around the US in 2017.





Current page