Project description: GreenBetween.com
GreenBetween is a site that allows people to buy carbon offsets. A friend of mine was starting the site and asked me if I'd design some website badges ("I purchased a carbon offset!") and a printable certificate. I agreed, and in the process gave them a fresher look, made a new logo, suggested some product ideas, tweaked their navigation, and redesigned their page layout to improve the visual direction. Tragically I didn't save a "before" screenshot for comparison.
The project took about 15 hours. I did it in a weekend. I agreed to do two iterations of the badges and certificate. The rest was essentially voluntary. I used 37signals' Basecamp to manage the file delivery and post the milestones / deadlines I was adhering to.
Step 1: Choose a typeface for a new logo.
I'm not a logo or graphics expert, but the previous logo was Arial and I knew that with the right typeface we could make the logo look more fresh, polished, and professional. I went through a bunch of fonts on MyFonts.com, picked some that might work, and sent the comp to Elad and Chuck for review with my recommendations.
I did this first because the typeface they chose would guide the rest of the visual design work I did. They selected (3) - also my top pick -- a font called Halvorsen.
Step 2: Draft the homepage
I did this before the badges and certificate. I needed to know what the site would look like so the badges and certificate would match.
The graphic at the top of the page was one they had chosen; I replaced a black background with green. I made the page background white instead of gray and made the headers and links shades of green. It's an environmental site so I wanted it to feel fresh, green, organic, and light. The page gradient might be a little gratuitous but it adds a bit of visual balance to the top of the page.
I clustered the links into logical groups ["actions the user wants to do", "learn about carbon offsets and global warming", and "about the company"] and moved it to the right, and made the dominant page element the actionable "Buy a carbon offset". Previously there had been 4 or 5 HTML buttons in the middle of the page with a lot more text -- it was a little hard to focus on the next action (buy an offset).
I created one big button ("buy a carbon offset") and made the purchase options into a checkbox-list, instead of separate buttons as they had been. First, I thought the original buttons competed too much with one another, and second, they didn't afford multiple items in your "basket". Also I added the Google Checkout logo so purchasers would know that their payments were being processed by a reputable company.
Step 4: Certificates and badges
I created several versions and had Elad and Chuck give me feedback.
Step 5: Product brainstorm -- a carbon offset catalog page
One of the goals of the site is to help people understand their impact. I suggested first that they include packages to offset specific high-carbon activities -- they already had a long flight, and I suggested offset packages for things like remodeling your home and taking a road trip. I also suggested that in their offset calculator, they fill in each form field with the average consumption as a default to give users a starting point.
Step 6: Get feedback
Step 7: Revise and deliver
I sent the revised comps, plus a ZIP of sliced production graphics.
Now, go buy an offset! (I also designed the Google Checkout interaction, so you'll be using implentations of my design work all the way through to checkout.)