Site Redesign: Giving TreeHugger A Breath of Fresh Air

Site Redesign: Giving TreeHugger A Breath of Fresh Air


Site Redesign: Giving TreeHugger A Breath of Fresh Air


Click images to enlarge

I thought I’d try my hand again at doing another unsolicited redesign of a site that I enjoy, but has fallen by the wayside over the years. Back when I first started Internet-ing in the late 90’s one of my favorite sites to visit was TreeHugger. At the time there was really nothing like it, exploring alternatives and helping to usher in a green mentality. Over the years though it’s started to fade, becoming a monster of banner features and skyscraper ads. Everything is currently screaming look at me and the features themselves seem to be of little to no importance. That’s why this is the perfect candidate for a redesign. To be clear, this wasn’t sanctioned, paid for, or endorsed by TreeHugger or the Discovery Channel, this is simply me having fun.

The Logo & Mark
The first thing I did was try a light handed redesign of the logo and mark. I don’t think either has changed in years, still maintaining the flavor of early 2000’s. The vibe of the site has always been a mix of environmentalism with a tech twist, but the pixelated tree and hard angled (but not) font wasn’t really working anymore. Neither is the ‘A Discovery Company’ lockup that’s way too tight, see how the A and D caress the first E in Treehugger? My idea was to simplify the Treehugger logo and refresh the mark… literally.

The mark is a simple combination of two things: The computer symbol for refresh and a leaf. I thought about using a recycling logo, but it felt contrived and bit too on the mark. I also feel like the idea of refreshing is more positive than recycling. A leaf is the most basic way to identify nature, and plays together well with the word treehugger. Together they embody the spirit of what the site has always been, nature meets tech.

For the logo I kept things simple, using the free font Miso by Omkrets Architects. The font is similar to the old one, but is a little bit softer and less trying to be tech related. The ‘A Discovery Company’ byline has been severely minimized and reduced down using Jason Kottke’s font Silkscreen. Together I think they form a nice combination and could also work easily on business cards, letterheads, etc.

The Website
When I started playing around with the design, the first thing I thought about was color. Okay, I get it, TreeHugger, it has to be green, right? All I see when I look at the current site is this deathly, moldy shade of green in the background that’s totally unappealing. So I decided to opt for a light blue instead, which I called a much needed breath of fresh air. When comparing the two side-by-side the results are… breath taking (sorry, I couldn’t help myself).

Another huge hurdle I faced was trying to figure out what was important on the site. Currently there’s zero hierarchy on the page, everything is competing to be seen and it’s a huge mess, the web equivalent of a hoarder. I decided to break the site down into three main parts: a featured section, a main column, and a side column. The featured area is just what it sounds like, a simple carousel displaying popular or important stories. I see that TreeHugger is quite dependent on ads, I counted 7 ad units on one page, so I decided to determine the height of the featured unit by the height of a search box and a med rec.

The main column, which features all of the articles, is simplified and made larger to give it the respect it deserves. Currently on the site the articles seem like passing thoughts, squeezed between two columns of ads and click-me-nows. They’re also inundated with every sharing tool possible as well as recommendations for other stories. It was all too much. There are a few more things like tags or an Outbrain style of related articles that I could have added, but let’s not ruin the magic.

The sidebar was the last hurdle to jump, and I thought he best way to handle it was to do what Cool Hunting has done. Basically, they have a few ads in the sidebar, as well as some of their own pertinent information that could entice a reader. The genius part is that they allow for about five posts to go by, lazy load more posts, and then lazy load the sidebar again. This allows them to get a ton of ad impressions, even though a user hasn’t click a single story. I tried to get the folks at Myspace to do this, but it never clicked (yet again, I can’t help myself).

Overall, I think the site is a thousand times better and more easy to digest. It’s amazing how much crap can pile up on an established website over time. I’m not really sure if TreeHugger has a design staff, but hopefully my redesign gets someone in the right place thinking about changing things up. It’s also worth mentioning that they could benefit from an improved footer as well, but that’s a can of worms I didn’t want to open.

I’m looking forward to hearing your feedback and what you think about my little experiment. All critical feedback is accepted, but please keep it polite. If you don’t have anything nice to say, keep it to yourself.


7 Comments Site Redesign: Giving TreeHugger A Breath of Fresh Air

  1. deirdre thompson July 25, 2011 at 12:01 PM

    on the money, do more.

  2. trebecca July 25, 2011 at 12:56 PM

    Wish it was solicited. I used to read Treehugger, but like you said, it’s way too cluttered. Consider your design a winner.

  3. Carren July 25, 2011 at 1:12 PM

    Much much better. I hate cluttered sites, which is why I probably just end up reading Treehugger as a newsfeed rather than going on the site itself :)

  4. andrew July 25, 2011 at 2:47 PM

    yes to that.

  5. Jordan July 25, 2011 at 2:52 PM

    Gee Bobby –

    I love what you’ve done with the place. Great job erasing all of that noise, giving the page some hierarchy, nixing the layer-cake header, brightening up the place and throwing the lights on the content. Leagues improved over the current Treehugging mess.

    With that said, I think you may have pumped the breaks Treehugger’s business a tad. Being an ad-based site, there are a few things you cut that likely squeezed their ad guys’ paychecks:

    – Site sections: Yes there are too many, and it’s awful confusing and muxed-up, but Discovery probably sells ads against many of those categories. Yes, they should be reduced and rationalized, and aesthetically I like your cut at categories, but your proposal probably takes it a step too far.

    – DL/Top Promo effectiveness: Your DL is great, pulls together the headlines with their attendant promotional image, and highlights strong imagery. Much better than the current. Great! But it does not have sufficient room for headlines in both character count and size, to tell the user what’s so great and get them to click-through…

    – Home page “porousness” the need for click-through: The onus of any homepage on an ad driven editorial site is to drive the user deeply into content. It’s job is to showcase as much as possible what is available because more than half of a site’s users are first timers or casual/Google passers-by, you do need to jam a critical mass of stuff to probe for interest. Yes, it makes things noisier for the everyday visitor, but those folk are few and far between.

    Keep rockin’, I follow your tweets, love your work and the things you find.

    is a certain level of front page porousness

  6. Bobby Solomon July 25, 2011 at 3:24 PM

    Thanks everyone for the nice words, glad everyone’s digging it.

    @Jordan – Love the honest crit, glad to see someone getting into the details.

    – Monetization: I referred to monetization based on the Cool Hunting model. It works for them, why not a site like TreeHugger? They have the very same business model. Sponsored content posts could also make sense. I think there’s also the fact that if you de-clutter a site like this, readers are more apt to check back into the site more frequently. If pageviews are boosted, so are impressions.

    I’m also curious how much money they honestly make off of ad sales. TreeHugger is owned by Discovery Communications, one of the largest corporations out there. Is it worth it for them?

    – Site sections: Sure, I probably trimmed too much out, but that’s the fun of it!

    – Promo area: My thought was the box containing the text could resize or expand, plus it would be moving to show there’s more content. Simple tweaks could do wonders.

    – Home page – Gonna have to slightly disagree with you on this one. They’re old site has a million places to click through and it looked like a busy part of Chinatown. There has to be a steady balance between applicable content and a dump of information. As I had mentioned in my post, something like Outbrain or LinkWithin to show related posts. It works amazing well, speaking from first hand experience.

    Thanks again for the great feedback, I totally appreciate it!

  7. tomhi July 26, 2011 at 5:54 AM

    Hey Bobby,

    I’m not sure if you have answered this before but anyway!

    I am just curious as to what software you use to make these redesigns and what advice you would give to someone wanting to start web design in terms of applications and reference material to get started.

    I would love to see your take on a newspapers website or something like Amazon, I feel like they could both be interesting.

    Thanks a bunch for introducing me to so many cool and interesting things.


Leave A Comment

Your email address will not be published. Required fields are marked *