Green is most often associated with nature, and many websites use this earthy tone to communicate their brand’s relationship with the environment. These attempts are not always successful, and many websites end up going overboard with their attempts to position themselves as eco friendly. As with any other color, the best green websites have minimal designs and use the color as an accent to help guide the user through the page. Let’s take a look at some green websites and see how they rate for usability.

Plant With Purpose

Plant with Purpose is a Christian nonprofit organization who ironically enough has three main purposes: to reduce deforestation, to help improve the economy of poor villages, and to promote Christianity in these villages. It makes sense that the site would use a somber shade of olive green in order to convey this loaded message. Regardless of your personal opinions on mission work, I think that we can all agree that the use of color and design creates a very usable website.

The homepage sums up the company’s vision in one simple line “Environmental Solutions to Humanitarian Problems since 1984”. Too many sites on the web take up valuable space on the homepage with drawn out mission statements, so it is refreshing to see a company that quickly summarizes their goals. The home page also contains dynamic calls to action in the form of banners, relevant news articles and videos, social media links, and contact info. The navigation is straightforward and easy to use, and the site maintains consistency through its color palette and use of typefaces.

Of course the goal of any nonprofit organization’s website is to acquire donations, and with the abundance of these sites on the web it is crucial that the donation form is eye catching and usable. Plant With Purpose combines inspiring imagery with a well designed form that invites the user in and makes the process as easy as possible. We especially like that it is organized into columns, and that all of the information (including payment) is inputted on the same page.

Another great feature on the site is the “Grow a Village” page. Many philanthropists will not donate unless they know exactly where their funds are going. Plant With Purpose does a nice job of visualizing this information, both in the form of a friendly interactive infographic and bars that monitor the progress of each project.

Usability Score: 5/5
http://www.plantwithpurpose.org/

Eco Environments

It seems painfully obvious that a company with the name Eco Environments would employ a green color scheme. With the tagline “Energy and Efficiency Delivered”, this company provides a variety of eco friendly products (such as solar panels and wind turbines) for both commercial and domestic purposes. Though most of the content is fairly well organized, the design of the site is overwhelming and distracting.

The flash based header at the top of the page ruins the site’s credibility. I can almost hear the client’ rationale: “It doesn’t look realistic enough! Can we make the turbine move? Oh add some birds too!”. Or maybe this was the work of an overzealous designer, but either way, There is way too much movement that distracts from the real substance of the page. Especially distracting is the pop up that reads “Don’t forget to turn off the light before you leave!”, but more on that later.

There is way too much information on the home page. The slider at the top of the page is nice, but as you scroll down it only gets worse. We can’t emphasize it enough, people don’t read on the web, and their “About Us” section contains way too much copy. Their “Accreditation” logos are huge and distract from the design. On the sidebar their video links do not read as videos (where is the play button!?) and the pdf icon is huge and pixelated. I actually do like the icons on the bottom of the page, it would be better if this aesthetic was used on the rest of the home page (and you shouldn’t have to hover to read the “What We Do” descriptions).

The secondary pages actually have a pretty nice layout, and make good use of icons, imagery, and videos, but they are still quite wordy.

Remember that icon that reminded us to turn off the light? Curiosity (or maybe annoyance) inspired us to click it, and suddenly the page went dark and the animation reflected nighttime. This feature has no real purpose except that it highlights the free solar survey and quote form, and I can’t help that they could have just emphasized this form through color choice or typographic hierarchy. You have to click on the light switch again in order to read the site, an unnecessary step that must cause users to just leave the site.

Usability Score: 2/5
http://www.eco-environments.co.uk/

The Fruit Box

The Fruit Box is a British company that delivers fruit to offices. And what better color palette for a fruit delivery service than bright green and orange? The website is visually pleasing and well organized, with these cheerful hues serving as delicious accent colors in contrast to a minimal white design. Their logo is playful and colorful, and they reinforce their brand by using the same typeface for their navigation and headings.

As far as usability goes, the site could benefit from a few more features. We can’t help but wonder why they don’t have some sort of online ordering process. The only way to contact them is via the “Fruit Delivery Inquiry” form that appears on each page, and clicking “Get Started” sends the user to a lengthy page of ordering instructions. Though they compensate by featuring the inquiry form on each page, it is quite large and takes up valuable real estate.

And what if I was interested in a fruit basket!? This page, along with their FAQ, reads only “Coming Soon…”. These sort of dead ends are the last thing that your user wants to see, especially if the placeholder is a tempting image of the fruit that they wish they could order.

The site was last copyrighted in 2009, so maybe this start up was abandoned before it reached its potential. If that’s the case, could a lack of functionality have caused its demise? We can’t help but wonder…

Usability Score: 3/5
http://www.thefruit-box.co.uk/

Of course, not all green websites are related to nature or the environment. Green can also represent money, safety, or jealously, and can also serve as an alternative to blue. Here are some more green websites for your inspiration, how do you think they rate for usability?

Up next: Green package design. As in, packaging that is recyclable and, you guessed it, green.