1-Day Redesign: Scientifc American

The 1-Day Redesign is a series of case studies in which we redesign a site using techniques which can be implemented in just one day. More or less.

I read a lot of stories on ScientificAmerican.com. Or rather, I would if the lack of coherent visual language didn’t offend me so much. On the days I can get past that, the second hurdle is the clunky usability, generally causing me to bail before the end of the article. Since I would love to make it through a whole article without feeling frustrated by the experience, let’s see what we can do about that… in just one day.

Standard disclaimer: This is a case study. I wasn’t paid to actually redesign scientificamerican.com. Although if they feel the need to offer me buckets of money to do so, I could maybe be persuaded. Redesign is © Kristian Gallagher. All content within the visuals remains © Scientific American.

Let’s Get Started

Full site redesigns are messy, protracted affairs fraught with legacy technology and branding pitfalls. That said, nearly every site has issues that can be resolved in a day. It isn’t the be-all, end-all solution. It’s a quick way to improve site metrics and/or retain visitors. For our purposes today, say hello to ScientificAmerican.com:

(Click on the image to see a larger view.)

This is what we’ll be doing to it:

(Click on the image to see a larger view.)

The Top 5 Improvements, Piece By Piece

[ #1 ] Masthead:  Overall, this area isn’t too bad. In fact, there are only two issues to address: the clunky placement of both the search bar & login links, and the odd non-alignment of the maroon block on the right compared with the sidebar directly below it. Happily, both are easily fixed: search and login get removed from the masthead altogether, because they logically belong in the sidebar area with the other tools. Next, we pull that maroon block out to align with the sidebar below (you’ll see that later). A final a small tweak: reduce the logo size a tad and pull up the whole shebang by about 20 pixels. Check out the before, and the lovely clean result of our simple changes:

Existing

(Click to view a larger version.)

New

(Click to view a larger version.)

[ #2 ] Upper Content Area:  Who doesn’t love white space, but we have way too much of a good thing in this area. Lose acres of it by grouping similar elements and deleting useless ones. Result? Our primary content appears higher on the page — it’s now above the fold. Yay to that. Let’s also talk about that headline. Specifically that it is needlessly, comically enormous. Let’s lose the Bodoni Poster-esque typeface and replace it with a calmer face and color. Finally, we group the article tools (Comments, Share, Email) together and give them better icons. Compare the existing version against our newer one. Note ours takes up less than half of the vertical space — hooray!

Existing

Newly Redesigned

[ #3 ] Slideshow: Why so tiny and low on the page? This is what folks came to see. Show it off! Prominence is key in enticing people to kick back & stay awhile.  We’ve got a number of issues to tackle in this piece.

First up: layout. The photo just sort of floats there, and the navigation has an odd placement. Our new version is anchored to the page with a very light frame. A more intuitive navigation has moved below the images, freeing up the side for bigger photos.

Second: Speaking of photos, as you can see, I went ahead and chose a different one. Based on the copy urging the visitor to sit quietly and observe their surroundings… well, perhaps it’s just me, but a big ass concert with a laser light show is not conducive to quiet observation. Unless you are very high.

Finally, the copy the images has issues. Normally I don’t mess with copy, but this show could benefit enormously from some content strategy and a good web editor. Example: since the headline claims “7 Ways”… ahem, number the subheads so readers know where they are. Complete the connection by starting your subheads with action verbs that call directly back to the idea of things people can do. The original subhead “A Certain Slant of Light” is poetic, but waaaay too cryptic, while “#1: Observe Your Surroundings” is crystal clear.

I believe SA may also be unclear on the concept of a slideshow. Large format, compelling images with a caption: Yes. Tiny images, each with its own painfully long essay: Not so much. But that’s not our battle today. Let’s get back to our redesign.

Spacing note: The bigger photo on the right *appears* to push the copy underneath it lower on the page. But thanks to our spacing-saving measures in other areas, you will soon see that this content actually sits higher on the overall page. Nifty!

Before and after. (Click the image to view a larger version.)

[ #4 ] Sidebar: The existing sidebar isn’t bad, exactly. It just feels like it was pasted in from another design. The spacing is inconsistent, so we’ll need to fix that. Easily done with CSS margins and padding. The colors need adjusting; more on that in #5. And finally, we still need to add in the search bar. Check out the before and after:

Note that I didn’t actually insert the login into this section. I’d like to see it above search, but honestly it could go anywhere above Latest Headlines and be fine. So pick your favorite location and rock on.

[ #5 ] Color palette: Each page on this site has a lot going on. Imposing a strict color palette also imposes order. We do this by only allowing one color family (besides black & white). Since there is already a prominent representation of red, let’s go with that, yeah? Using shades of orange to replace all that stuffy dark blue makes the page more inviting while staying in the same ballpark as the existing red.

The Big Reveal

Here is how it all fits together. As you can see, it isn’t a huge visual change, rather the site now has a different feel. The uncluttered, logical groupings of similar elements combined with inviting content layout makes you want to dive in and stay awhile. Success.

(As always... click on the image to view the larger version.)

Psst! Also check out the existing & redesigned versions side-by-side.