After getting feedback from our first round of ideas, we wanted to develop them further in the second round. As you can see, I wasn’t quite ready to let go of the lighter background, and snuck one in to this round:

This page worked great with a lighter or darker color scheme, and everybody loved it. The colors really worked, and matched the cards on the coffee bags very well. It was also nice that as you went from section to section, the colors changed to match the color scheme of the cards. The Latin America coffees have one color, the Africa coffees another, and so on.

Next we wanted to fine-tune the individual coffee page. We wanted to show every bit of detail that Stumptown knows about their coffees, including any number of photos, and also allow customers to add the coffee to their shopping cart right then and there. We also added the selection of coffee grind and quantity. Once you add it to your cart, you’re on your way.

Then we tried the Locations page. The old website was set up to handle more than one picture per location, so we continued along those lines. Unlike the old website, we were building this in HTML, so we couldn’t rely on Flash tricks to handle this feature. We instead used jQuery, a brilliant JavaScript library that lets you build these sorts of things very easily. For an extra touch, we used a semi-transparent PNG graphic to get the overlay on the right side, to show the details about that location right over the picture itself.

And here is a mockup of the Varietals page. The finished version looks almost identical. We have future plans to add other features to this kind of page, but we’ll go into that a bit more laters!

The first thing we wanted to try was something very similar to the old, Flash-based site. This is very much along those lines.

We started thinking about how we would tackle other pages, and realized that the category list for coffees would be very important.

However, we didn’t really like the way this looked. We moved on to a mockup of a single coffee category, but wanted to do something that would better represent Stumptown’s emphasis on personality, color, and photography. They have a new line of bags for their coffee, which feature coffee cards that look much like baseball cards. What if we incorporated that look?

That’s more like it. You could then navigate between coffee regions (Africa, Latin America, and so on), see a nice big image and description of the region, and more.

I personally felt the colors were looking a bit too dark, so I wanted to try something lighter. Here we see our improved idea for showing the coffee regions – represent them as cards, with pictures, which look like the coffee cards folks will see in the stores.

Now we were ready to revisit our idea for the home page. This time, we wanted to just show a video. The idea was that you were jumping right into the Stumptown experience, and the little arrows on each side would let you switch between the videos.

We were really on to something, and at this point we stopped and went over our ideas with the client. And tomorrow, we’ll talk about our next round!