Ellen Beldner

Halvorsen is the typeface I recently used for my GreenBetween redesign. Turns out that Dan likes it too.

I don't really know Dan, although I hired him via Google to do some fast icons for a small project a couple of years ago. (I happened to be at his website because a friend of mine needs a template for his blog & I was going to recommend Dan.)

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

Woohoo -- new design for the Google Base bulk upload dashboard! The old bulk upload dashboard was a 3-second one-off using our generic tabular data widget. Since most of our bulk uploaders have only a couple of files, the tabular format was overly busy and misused the screen real estate. The page was also getting messier as we added promos (for AdWords, Checkout, and some of the other inernal tools, like using FTP to submit your files).

These changes were some of the few we've made that didn't stem directly from usability research mandates. Rather, they're based on design principles and heuristics. We left most of the info architecture untouched. I suggested moving to the blurb style instead of the tabular format, and moved all the promos to the righthand side to hierarchize the information. The tabular format is almost totally useless for this page's main tasks: "What's the status of my file?" and "I need to update my file". Most users only have one bulk upload file: tabular data display is good for comparing across rows, and most people only have one (maybe two) rows. We have better error messages and links to help for specific item types.

And instead of the previous "upload" widget -- which has users select the file they are updating and then browse for the file -- we now make "upload" a function of each file. Throughout our system we present bulk upload files as granular objects, so it seems more appropriate to have "upload a new version" be an action on a particular file. (There aren't enough actions-per-object, I think, that it's necessary to have both object-verb and verb-object models embedded into the system.)

This is another example of where thorough programming and PMing really made the page. The engineer who implemented this did all of the logical conditions correctly: so when you update a file, we have extra text that warns you "This will erase all the items that you currently have and replace them with whatever's in your file." And it only shows up if you're updating a file, not when you're uploading for the first time.

Less suck, more hot. We did a ton of usability testing of Base in the past few months, and this revised homepage came out of it. Goals were to make item types more visible, help users understand what base is, deemphasize search (to keep the focus on Base as place for uploading, not for searching) and help users make better choices about the right upload technology for them.

One of the things that I think makes this design work really well is the IA of the page. Users who come here are either brand new (never heard of Base), brand new but who have heard of Base (e.g. through a marketing email or similar), or are returning users who want to manage their items. I wanted to clearly draw users' attention to the first choice they have to make: how are they getting their stuff on to Base? This is a bit system-centric (how will a user know which technology to choose?) but it turned out in all the studies that we did that people did a good job of identifying the technology that would be suitable for their needs.

Everything that you need to do to get going is on the right: either sign in (for existing users) or click one of the giant iconed links to get started. The blue background draws further attention to the section and, along with the icons, helps balance the huge sea of blue links on the lefthand side of the page.

The left, in its turn, is the "learn more" part of the page. If you're not sure what Base is, you can focus mostly on the left -- browse a few item types, see which ones are popular and which ones are sort of randomly interesting, and get the couple lines of promo / marketing text. Some users really really want to investigate; some users want to jump right in and start playing around to figure it out. (I'm not sure if it has more to do with technology familiarity, age, or how much you need your stuff to show up on Google for your business to survive.)

There are still a few bugs, but those will get worked out soon. Official post on the Google Base blog.

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.

Pironimo.net is a twiki installation that I deployed, customized, and maintain for a small community of friends (around 30 people). It began on another server in September 2002. Since then I've done about three major UI revs and one software upgrade.