Designing Louisville's News | wfpl.org

In the creative brief for this project, our main goal was to transition WFPL from it’s Core Publisher roots to an easier-to-use WordPress platform. Secondarily, we needed to enhance the experience of the current online news reader (taken from our Persona study) with a multi-device friendly design. This launch is intended to be Phase 1 of a large project that is far from done. But we needed a strong foundation on the back-end. Not to mention, a good analytics foundation to learn from our users.

We wanted to use this content-heavy project as an excuse to try a few new things. Some we were able to try out, and some we weren’t. Regardless, we were still able to come up with a more efficient workflow as a team, which led to a better overall product for our client and better communication along the way.

Although Responsive Design has been around for a while now, it can still be hard to find a place to start when it comes to design. After studying a some content-heavy trends and client-specific analytics, we decided to design for an immersive experience that could span all sorts of device resolutions using the Bootstrap column grid.

Article Page User Flow

By eliminating much of the clutter you see on typical news sites, we allow the users to make informed decisions on the path they would like to take through wfpl.org.

“Related Stories” are on the edges of the article so they didn’t intrude.

“Ads” had to intrude due to the current ad functionality being used. Definitely one of our first fixes in phase 2!

“Authors” lets the user explore more into the chosen beat. Since most journalists are beat writers, we found in our analytics that many readers are invested in core topics.

“Comments” are a necessity for a journalistic site like this. However, these comment stream can get messy. So Joe hid them!

“Categories & Tags” were enforced to help the users and the writers organize their thoughts and priorities.

“Read Next” allows for the journalist to pick other articles to explore. Our goal was to lead the reader on a path so that they never hit a dead end. We did run into some barriers here with introducing this into the journalist’s flow, so these are not present on every article page currently.

Visual Design

In order to quickly prototype with the wireframes, we used Sketch for the visual design of this site. If you aren’t using it yet, we find it to be much more useful tool than Photoshop for iterative design. The easy export options are a team favorite.

Type – readable and versatile. We tested on older as well as color-blind users for accessibility purposes. The heading styles vary wildly with much more than the typical changes in size and tone than our typical typography style choices. I wanted to provide author creating long form articles, like KYCIR, to have some styling power over large content changes in an article.

Color – We started by performing a competitive analysis on other news sites– national and local. By looking at quantity of color on the page as well as hue variance, we found that most had one solid background color with one or two other primary colors used as accents or CTAs. We chose a palette that stood out in that clutter.

Texture – From the competitive analysis, there was very little in the way of using texture in style to break up content types. Thus we decided to use texture and slight color shifts to break up content pieces.

Image Assets – Core Publisher left the client with little space to play in the way of strong imagery. With a photographer and videographer on staff, the WFPL team wanted to take full advantage of designing for nice images. Since the current content left this area lacking, we decided to design a solution here. For a story that did have great imagery to accompany it, we designed an article template with a full-width image at the top. For any other stories, there is a template without a featured image. From there, we allowed the client to curate these experiences.

Social Media

No social sharing buttons– mostly because analytics tells us that people don’t often use them in a beneficial way.
Authors have a following because of their personalities and beat-centric content. So we guided the user to the author’s twitter feeds while allowing for WFPL-owned social accounts to publicize all stories. Conversation happens with the writers. Sharing happens with the WFPL publicized articles. We wanted to meet the audience on their home field.

These are just some of the approaches we took when conducting the WFPL re-design. One of the most important part of this project was to create something where we can study the users. Through varied analytics tactics, we will be learning from the users, expanding our existing persona documentation, and make changes to suit the user’s needs.