1. Art Center/Drucker team wins ISDA award for their work with KPCC

    A quick addendum to my previous post on KPCC’s collaboration with Art Center/Drucker: I just heard from one of the teams that their project took Bronze in the IDEA awards by the Industrial Designers Society of America. Check it out here, and congratulations to the team:  Siddharth Vanchinathan, Hugo Giralt Echevarria, Philip Keller, Jan Lienhard, John Badalamenti, Nicholas Fusso and Heather Hoopes.

    Posted by Sean Dillingham

  2. Last fall, KPCC partnered with The Art Center College of Design and The Drucker School of Management on a graduate course they co-teach, “Creating Competitive Advantage Through Design Thinking.” In this course, graduate design and MBA students form teams and spend the semester trying to help a company (in this case, KPCC) solve business problems using design as a framework for innovation. For those not familiar with design thinking, there are good articles that will get you up to speed, as well as thoughtful and funny critiques from within the design community.

    Each team was tasked with envisioning new products and services that would help KPCC thrive as a public service news organization, and increase our audience and impact in the communities we serve. During the course, I had the privilege of facilitating the teams’ work: helping them to understand the critical issues facing KPCC, public radio, and journalism as an industry; giving them access to key people and information inside KPCC; facilitating in-person audience research; and providing feedback on their design concepts during the ideation and prototyping process.

    It was a blast. The students are all incredibly intelligent, talented and committed to their work, and they came up with some inspired ideas, a few of which you can see in the video above. 

    Posted by Sean Dillingham

  3. Watch a short tour of the all-new KPCC.org that launched today.

  4. A few screenshots of the new KPCC.org design that officially launched earlier today.

  5. 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.

    What’s New

    Nearly every page of KPCC.org was rethought and redesigned. Some highlights (or watch a video tour):

    • Responsive Design: KPCC.org is one of a handful of large news sites to employ responsive design, a loose but coherent set of technologies (usually some mix of fluid grids, flexible images, media queries, and Javascript) that allow a single website to dynamically adapt to a wide range of smartphones, tablets and desktops. 17% of our audience visits KPCC.org on a mobile device, and they now get to experience our full website, but with a design that tailors itself to the size of their device.
    • 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.

    Technology

    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.

    The Team

    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.

    Looking Ahead

    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