DX Award :: Starbucks


Starbucks is another example of fine design from the leading shop, Organic Online, a San Francisco-based design and integration firm with offices in the “gulch”, New York, and Chicago. Their talents span the Net itself — if you know Apache, then you know of Organic’s first success; and if you see a fine website chances are….  Somehow, though Organic managed to top even its own design traditions with their work on the Starbucks site. The graphics, content, layout, and technology are so finely integrated and composed that you are left to question whether a better site can even be made for a company like Starbucks.


ARCHIVED DESIGN AWARD PAGE :: 1998 DX AWARDS

This page is republished for historical and archival reasons, highlighting the history of online design and the work of some of the many talented individuals who were instrumental in the early days of online media.


We are honored to select Starbucks as this week’s recipient of the IPPA’s Award for Design Excellence.


Starbucks is another example of fine design from the leading shop, Organic Online, a San Francisco-based design and integration firm with offices in the “gulch”, New York, and Chicago. Their talents span the Net itself — if you know Apache, then you know of Organic’s first success; and if you see a fine website chances are….

Somehow, though Organic managed to top even its own design traditions with their work on the Starbucks site. The graphics, content, layout, and technology are so finely integrated and composed that you are left to question whether a better site can even be made for a company like Starbucks.

The layout is a mix of that old web standard — a top bar, left bar, content center right — with a lively, off-angled twist. If you look closely, you’ll see that the lines separating the top bar from the content are sloped up to the right side just a few degrees. Further, the designers also violated the edges of the design by extending the background patterns into the content field, lending a less chopped up feeling to the site.

The result is that the design looks and feels informal, draws you in, and invites you onward with a casual wave. Combine this with the swirls and twists that have long been a standard component in the Starbucks visual strategy toolkit, and you’ve got a site that is as compelling as it is effective.

From this moment of glory, however, comes the site’s only major problem — a downside emerges to all those swirls. One of the oldest known problems in online design can be seen again at work here — image expansion. While the home page background is just about 33 KB, it expands in memory to around 9 MB.

All of this means that if you’ve got an older system with 16 MB or 24 MB of RAM (and by older, we mean last year’s top of the line home computer), the site can severely tax your system resources. Just scrolling on the home page turned into a shaky affair on our low-end test system. A refresh from cache could take upwards of 90 seconds.

Nonetheless, the overall treatment is quite impressive. Color selections are wonderful. Deep blues, maroons, browns, reds, and snow flake whites dominate the presentation. The colors are far from the bald primaries that dominate most sites and they are clearly a notch above the garish “wired” look of the 1990s.

Another simply stunning graphic treatment is the double menu bar at the top. The bright, hand-lettered links are for the retail shopper and average visitor. The top bar, above these, offers links on a black field with type as hard, sans-serif. These lead to the business aspects of the site — job applications, store locator, business services, faq, etc. The artful separation of the two link sets is brilliant. Some of the review team didn’t even notice the business links at first — they saw just the top four.

In addition, the typography at Starbucks just sings. Playful, inviting, and cheery, the folks at Organic captured the spirit of Seattle’s oldest coffee house. Even the HTML typography was coded with a touch of class. This may not be a first, but the designers call for FONT FACE=Garamond as their HTML type and it is worth mentioning. We’ve always loved Garamond because it simply emotes a classic, old style — this is a fine typeface with both Renaissance looks and clean, crisp roots.

One problem with the shopping experience is that some of the pages just seem to scroll on forever. It would have worked well to break up the product lists (presented in columns) with an image here or there, but instead most of the items are simply presented as text.

You will find listings lost deep down in the columns, like this one: “Espresso Pods $9.95 – Our effortless espresso pods are now available in decaf!” I must be a coffee virgin, because I have no idea what an “espresso pod” is and there isn’t a photo to help me along (mind you, I learned to make coffee from a Bedouin tribesman, then polished my skills in Italy; but maybe I missed something along the way…).

Moving on, one of the truly outstanding points of this site is the copy. Every now and then we run into a site where they just didn’t miss a thing — the writing reads like smooth cappuccino. In fact, it is so extraordinary that you just can’t say anything more, except to perhaps pull a quote here and there to demonstrate the point, like these two gems from the home page:

“The Company : Amazing things happen when you dream over a cup of coffee.”

“The Store : I want that, I said, and magically it appeared in my home. Let’s shop.”

Technology-wise, the site works admirably well, though we were somewhat disappointed at the number of clicks it takes to complete a purchase. One click purchasing is a holiday must. Beyond this criticism, there are several advancements in their approach, including a little box that displays, page by page, how many items are in your shopping cart now. At the bottom of this box is a link to take you to check out. It’s easy, attractive, obvious, and elegant.

The check out process also falls short at the New Guest vs. Previously Registered screens. Just think passwords, forgetting your passwords, registering as a New Guest, etc., with all that implies. I just wanted to buy a pound of beans. Think impulse purchase; I did not want to register to make it easier “next time”. I really just wanted to buy something right there and then. But I hesitated.

By registering, I came to the obvious conclusion that I was adding my name to yet another mailing list (though that would have probably happened anyway, but you don’t have to hit people over the head with it). At first I persevered, but after a few screens, I felt like I was going to have to go through a 15 minute process just to buy the beans. All of this is a disincentive to purchasing.

When I buy at a website, I want to add stuff to my cart, click to check out (go secure as an option here), enter my ship-to address, card number and… well, that’s it. With every additional screen of verifications, registrations, explanations, confirmations, etc., some percentage of your impulse buyers will simply click off to another website. I know I did.

Also, don’t plan on buying your roast through your office network, because the only way to place the order is by going through an SSL connection. There simply isn’t an option for non-SSL purchasing, which means that the designers inadvertently eliminated many potential office and work environments from joining their frequent shoppers club.

These are all procedural issues, however; the technology itself works beautifully. E-commerce is hard — face it. Today, despite a lot of promising new tools on the horizon, the whole experience of Internet shopping still seems one more click ahead into tomorrow. We’ll get there, the tools will eventually make sense and work like they should. In the meantime, it takes highly skilled and focused shops like Organic to work out e-commerce designs that overcome the limitations of where we are today.

Ultimately, many coffee connoisseurs will debate until the next full moon the quality of Starbucks vs. their favorite brand. The bottom line here is that there is no debate on the quality of the website. Our hat is off to Starbucks and to Organic for taking the field by storm. Put up a pot of java and surf over to their site for a close look. You’ll find it to be inspiring, uplifting, and, well, a real picker-upper.

Scoring (10 is Maximum):
Graphics Design…….. 8.6
Programming………… 8.3
Content and Copy…… 9.0