A Redesign of SalemNews.com

Nothing pisses me off more than good journalism hidden by bad web design. That’s exactly what I found when I visited salemnews.com, the website for The Salem News of Salem, Massachusetts. I grew up one town over from Salem, but I haven’t been to the Salem News website in close to a decade. And it doesn’t look like much has changed.

That’s why I chose salemnews.com as the site I would redesign for this week’s assignment in Multimedia Journalism class. But before I get into the long discussion on what needed redesign and why I redesigned the site the way I did, I will just show you the before and after images of the homepage.

The Information Gathering Process

When I decided to do my redesign assignment on the Salem News website, I figured I would reach out to my Facebook friends from back home to see what they think of the site. My friend Vinny quickly replied, “It is all over the place, you never know what is new news and what is a few days old.”

Mike Saunders, who used to worked at the Boston Globe in the Living Arts section and later in OIT while I was there (and my wife babysat his kids), noted, “Where to begin? Auto-launching audio ads? A narrow format that screams 1996? I’d definitely make it wider, showcase more of the content.”

So let’s take a look at what they’re talking about:

The first thing that a user’s eye lands on is the top title, but it quickly glances over at the rotating image just to the right. The navigation buttons for the carousel are awkward, the six items featured have varying sizes of images, and the carousel usually features at least two advertisements instead of content.

Most troubling is the lack of space dedicated to actual content on the site. With left-hand navigation, a right column that is a jumble of ads, comments, and Twitter feeds, and another column of ads, the actual journalism on the site is hard to focus on in a 656 pixel width space. On news stories, the space becomes even smaller with just 306 pixels dedicated to text and the other 350 pixels dedicated to ads and a clunky comment section.

As I dug deeper into the site, I found a great story about a dance studio that was closing after 36 years. The story page contained an incredibly well-done video about the studio, an excellent photo, and a great archival photo. But you would probably miss all of that because of the page layout.

As you can see from the page, the video is only about 300 pixels and appears beneath an ad to “Meet Local Dancers.” Beneath that are two photos associated with the story that are only 145 pixels wide and impossible to appreciate at that size. If I were the photographer, videographer, or video editor—all of whom did great work—I would be infuriated that my work is obscured in a tiny, hard-to-find space.

After assessing the abundance of things wrong with the current salemnews.com, I began my research into what might improve the design.

What do readers want?

While I did get some input from friends about the salemnews.com, I kept hearing Steve Jobs’ famous—and arrogant—mantra, “It’s not the customers’ job to know what they want.” So I went directly to the data to understand what users of salemnews.com want most out of the site. Without access to their Google Analytics account (if they have one), I had to turn to other services to find demographic data, competitive analysis, and reader interests.

Some good sites for this work are:

• Compete.com: Shows number of unique visitors, page rank, and how those stats measure up with similar websites.
• Quantcast.com: Displays extensive data on visitors, pageviews, and demographic data on the site’s users, including age, sex, income, education, and other interests.
• Google Double Click Ad Planner: Like Quantcast, Ad Planner provides extensive demographic data, but it also displays what other sites users regularly visit, other categories of interest among site users, even the types of ads that appear on the site.

Quantcast.com provides a simple demographic chart that shows the largest demographic for a site in categories like age, income, gender, and education.

In looking at all of this data, I discovered that the salemnews.com audience is affluent, educated, predominantly female, and is interested in sports, politics, and travel.

Through compete.com, I discovered that salemnews.com is being blown out of the water by local news site wickedlocal.com (how Boston is that?) and by another area newspaper website, eagletribune.com. While the Eagle Tribune website is almost as bad as salemnews.com, the wickedlocal.com site has a clean white and blue design that is easily navigable.

Based on this information, my friend’s opinions, my knowledge about web usability, and my own tastes as a regular reader of news websites, I began to outline a handful of things I knew the redesign needed to feature.

Features of a Good News Website Design

Web design is changing as quickly as technology, but there is a lot of research out there about how users interact with websites and, more specifically, with news websites. BBC recently did a web redesign and they posted a video of their news website eyetracking study they did with Mirametrix. The video shows that users eyes start at the top of the content section and work from left to right. This was my starting point in my layout plan and feature decisions. Here’s what I wanted to highlight in that key area:

• A wider content section to leave room for larger photos, video, and a more easily readable, larger text.
• Top navigation to allow users to see the navigation in the spot where their eyes are first drawn.
• Highlight some of the Salem News photography right at the top left to draw a reader into a story immediately.
• A high-contrast, clean, predominantly white design and color palette.
• Link to top stories to the right of the featured story so users will see the featured story, then move on to other top stories.
• Sections clearly separated by subtle visual cues like small vertical and horizontal lines.
• Readable fonts that fit well within the visual identity of the news organization.

With these goals in mind, I started the process of putting together a new design for salemnews.com that would be more user friendly and would make the great work of writers, photographers, and videographers at the paper more visible.

The Web Design Process

I began my process with a roughly-sketched wireframe on an 8 x 11 piece of paper.

I followed up this process by creating an account at Cacoo.com, one of many free online wireframing tools I found through a Mashable blog post on 10 free wireframing tools. Here’s how I refined my original sketch using Cacoo:

From here, I had a good grasp of exactly how I wanted everything laid out and what I needed to create a real mock-up. At this point, I moved into Photoshop and began using the Grab tool in my Mac utilities to screengrab elements of the Salem News website and other well-designed newspaper and magazine websites I found through various design blogs, including 50 Impressive Magazine and Newspaper Styled Web Designs from speckyboy.com.

Here’s a closer look at the final product:

Some of the key things I did to create a cleaner, easier-to-read design.

• Refocused the navigation to include only the content users are most interested in.
• Moved the navigation from the left to the top of the page, giving more room for the main content.
• Reduced visual clutter by spacing content and using a dotted vertical line between main column and right column and horizontal red lines between content sections.
• Gave the Community section its own area in the upper right of the screen because, despite the horrible design, salemnews.com has a dedicated following of people who interact by commenting and submitting pictures.

Beyond the layout of the page, I thought very carefully about the color scheme and the typeface. I’ve hung around with enough designers to know that font choices should not be made without thought. I chose to stick with the town’s traditional colors—black and red—but I used mostly black and white and added red as a highlight color to draw the user’s eye to a new section or more content. The original salemnews.com used a lot of light and dark grey, which I used sparingly in the design.

For fonts, I wanted to find a body text that was readable and a masthead text that fit with the history of one of the nation’s oldest cities. For the masthead, I landed on Engravers MT, for the button text, I liked Copperplate Gothic Bold as a midpoint between the masthead text and the body text. For the body text, I went with Adobe Garamond Pro, which is an elegant and readable typeface.

After completing the homepage mock-up, I wanted to work on a section landing page and a story-level landing page to carry the redesign through all levels of the site. I decided to layout the Style page to highlight the video about the dance studio and I carried that through to the story-level page.

Here is the Style section landing page:

The user’s eye is immediately drawn the the video of the top story, if that interests them, they can scroll down and click on the headline to read the whole story. Or if they want to move on, their eyes will usually float to the right, where links to more style stories appear. Finally, beneath the dance story are two more highlighted style features with great photographs displayed they way they deserve to be.

I used a very similar design in the story-level page below, moving the headline and subhead to the top of the page with the video directly beneath it, social media sharing in the story, and the photo right-justified on the page.

I hope that what I came up with seems a little bit more pleasant to the eye and more readable. I wish that the Salem News would adopt this design, or something like it, so the great writers, photographers, and videographers working for the paper can finally have their work appreciated online.