Inside the redesign of the all-new KPCC.org
For the inaugural post on our KPCC Design & Tech blog, we wanted to share some of the ideas and process that went into the creation of KPCC’s all-new website.
Nearly every page of KPCC.org was rethought and redesigned. Some highlights (or watch a video tour):
- New Video Section: KPCC has talented visual journalists who produce amazing video features, and now their work has its own home on the web. The video section of KPCC.org has been designed to provide an elegant viewing experience that dims the lights and puts videos in the foreground.
- Featured Comments: KPCC has a great community of intelligent, passionate and informed commenters, and the website now shines a spotlight on that community by featuring a daily rotation of the best comments left by our audience.
- Redesigned navigation: Through extensive user research and testing, we redesigned our navigation and information architecture. The small set of initial categories, paired with large menus, connects people to destinations quickly, while also becoming a space to surface KPCC’s freshest content and breaking news.
- Redesigned Audio Player: Starting from the ground up, we have redesigned the experience and technology around listening to audio on the website. Our new audio player allows users to interact with audio without disrupting their reading experience. It also works well across many platforms, including smartphones and iPads.
- Homepage Broadcast Bar: Our data tells us that many people who visit our homepage are looking to connect quickly with content related to our radio broadcast. We’ve made it easier to find the live stream, faster to find and access your favorite program, and we’ve added a new feature to the homepage: the Broadcast Bar. Near the top of the homepage, the Broadcast Bar gives you a quick read on what’s on the air now and what’s coming up next.
- A brand new landing page for our Crawford Family Forum: The Crawford Family Forum, KPCC’s in-person events platform, connects people of all backgrounds and creates a space to engage in a face-to-face exchange of knowledge and ideas. This kind of interaction is becoming increasingly rare in the digital era, and as our youngest content platform we’re working to raise awareness among our audience about what the CFF has to offer. The new Crawford Family Forum landing page leads with big images and uses them to help tell its story, showcasing the vitality of the events we produce.
KPCC runs a custom CMS that was originally built using Django, but the entire redesign was built in Ruby on Rails. We’ve been in the middle of a transition to Rails for about 8 months now, and we love coming in every day and using tools that are so focused on developer happiness and productivity. Our CMS admin backend (and a few remaining audience-facing bits) still runs on Django, thanks to some clever nginx routing. Later this year, we’ll rewrite and improve our backend tools using Rails as well, effectively completing our transition away from Django and allowing us to be 100% Rails-focused going forward.
But more important than any specific language or framework, the conceptual planning and architecture behind this launch allowed us to achieve much of what you’ll see in the redesign. Content silos are one of the toughest problems many news organizations face. KPCC was/is no different: we produce radio stories, blog posts, program segments, events, videos, and more. But by conceiving a base set of attributes and behavior common across all content, we were able to model our data in such a way that makes it possible, for example, to build a homepage that is able to feature any content type in any place where content can be featured (leads, offleads, “in case you missed it” buckets, etc.).
Building a news site iteratively - especially a responsive site - requires a lot of exploration around grid systems and layouts. Thanks to AssetHost, the loosely-coupled and very powerful asset management system we built and open-sourced, we were able to cut new sizes of our images on the fly any time we wanted to try a layout that required a new set of dimensions. We continue to refine our responsive grid system, and will continue to tweak layouts and create new ones. Knowing that we can easily cut images on a whim frees up our design process to imagine new contexts and platforms for our content without being constrained by inflexible assets.
I’m especially proud of how much we accomplished with a very small team. Most of this project was done with just one designer (myself) and one developer.
Eric Richardson and I began this project together, and Eric is the developer responsible for creating AssetHost and our incredibly well thought-out application architecture. Eric is one of the smartest people I’ve had the pleasure of working with. Often during this project, I felt like he was a human whetstone— that my own thinking was being sharpened by his rigor and intellectual depth. Eric recently departed from KPCC to take a new position in Atlanta, but the indelible imprint of his work is felt in so many parts of this project.
Early this year, our second Rails developer, Bryan Ricker, joined the team. Bryan is another incredibly bright developer, and is responsible for building out many parts of the site including our programs, events and video sections. Bryan also did most of the heavy lifting to make our design responsive, which in my opinion has come to be the defining feature of our redesign.
In the weeks to come, we will continue to fix bugs, refine and polish the design, refactor for performance, add new features, and migrate over the last few pages of the site that still reside in our Django codebase. But we’ll also use this shiny new platform to begin imagining and building new features and experiences. This redesign project was a big milestone for KPCC, but it feels like just the beginning.
Posted by Sean Dillingham
- ricedavidw likes this
- shaneguiter reblogged this from kpcc-design-tech
- kpcc-design-tech posted this