Ellen Beldner

Okay, I already knew that I hate and detest the new-ish Facebook practice in which you don't just navigate to outgoing links; you get taken to a Facebook page with the site you were trying to visit loaded into a frame, and with a Facebook toolbar at the top of the page.

And now, not only does Digg do it too, but the sites are so dumb that they're double stacking these stupid toolbars.

This is crap primarily because it breaks basic web behavior: the URL on your web browser no longer represents the page you're viewing, or trying to view. Big juju nono. We've known this since 1996, people!

Also, I don't want to send someone to http://www.facebook.com/ext/share.php?sid=89405539347&h=1e79i&u=2fnBr&ref=nf. I want to send them the link that's www.youtube.com so they know where they're going and what they're going to get.

The one case where Google does something like this -- a frame with another site inside its toolbar -- is when a user clicks on an image search result. That frame bothers a lot of site owners that Google links to, but it was a necessary tradeoff because image search is kind of sketchy and occasionally unreliable. Users click on an image result and get taken to pages that no longer have the image they were looking for, and the toolbar exists to help them identify the image they wanted -- NOT as a marketing-sticky thing for Google. And even though it's often beneficial, it still confuses a lot of users.

Note that mismatched content and URLs is a usability problem for Google Maps. The URL that many users copy from their browser address bar usually doesn't correctly represent the state that the user's in due to the way the site's AJAX works. AJAX or FRAME, it's the same problem.

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.)

I already wrote the blog post on the official blog. But this is one of the more successful design-to-implementation experiences I've had on Base.