BUSINESSWEEK ONLINE:   Business Week ebiz


Business Week e.biz

Web Site Makeover By Joan O'C. Hamilton December 3, 1999


A New Recipe for VirtualGourmet.com
Two Web design experts suggest a more "scrumptious" feel and better search capabilities to strengthen the food site

Not long ago, the sheer novelty of using the Internet to quickly summon everything from Vermont tourist information to a good explanation of the Doppler Effect seemed miraculous. But as the Web matures, the importance of presenting information logically, efficiently, and in an appealing manner has elevated the importance of good design to a new level. Talk to almost any Internet entrepreneur these days, and you'll hear frustration with the issues raised by Web design. Content clutter. Customer interfaces designed by customer unfriendly technical folks. Long loading times created by overly complex graphics. Database organization that worked great for a thousand pages of information -- but hopelessly bogs down the site as traffic and business offerings grow.

This week, Business Week e.biz kicks off a new feature in which we will periodically look at common, basic -- and often easy-to-fix -- Web design challenges for real readers with real site problems. In a recent issue of the magazine, we asked readers who were struggling with Web design to submit sites for review by a panel of some of the top Web design experts in the country. Boy, did they. We've received scores of submissions, and the pleas are anything but subtle. In summary, most of them read: "We need help. Fast."

For a tasty beginning, we've chosen the 10-month-old gourmet food e-commerce site Virtual Gourmet (www.virtualgourmet.com).

Click here for a larger view of the old design.

This Los Angeles-based outfit is run by 28-year-old Megann Rundell, who previously worked as a marketing consultant to a gourmet food wholesaler. The Web seemed to her a perfect way to reach beyond retailers to hungry gourmands, whom she could directly offer top-quality food at a competitive price. Rundell has been assembling considerable content in terms of recipes and other material about gourmet foods and cooking. But she's frustrated with her site right now. She thinks of its mission as a "double-yolked" egg, in that she wants not only to sell food through it but also to promote and educate customers about the fun and satisfaction of fine cooking and fine foods. She also is out to promote new foods and ways of using them. Right now, she worries that the site's design will "attract customers to simply buy our food without giving them an extra touch that they cannot find elsewhere." She has talked to some designers but so far has not found a clear direction for her site. And she is hesitant to begin loading lots of content without a road map for how the site can grow and incorporate the information in the most appealing and attractive way.

TWO GURUS We asked two very different design experts about Rundell's concerns and goals. Peter Morville is chief operating officer of Argus Associates in Ann Arbor, Mich. Morville's firm specializes in information architecture -- not so much the look and graphics of a site as the underlying logic and framework of how it presents information. Josh Feldman is creative director at frogdesign, a Sunnyvale (Calif.) industrial design firm known for its "form follows emotion" approach to the design of hard goods. Among frog's past projects: the early Macintosh computers, the Sony Trinitron television set, and the curvy, touch-me home products of Germany's Grohe. Recently, frog has embraced Web design as well, bringing human and emotional dimensions to the user's experience. We specifically asked frog to focus on Virtual Gourmet's homepage. Below you'll find the completely new look they came up with.

One important note: These are not complete site makeovers. Design firms may require many weeks to completely evaluate and overhaul a Web site's design and organization, to invent a new graphic motif and brand image, and to implement the necessary programming to make it all spring to life. Rather than supply very specific and unique advice to Web entrepreneurs, we're trying to identify sites that are struggling with very common challenges and shortcomings, and give guidance so entrepreneurs can get their own designers headed in the right direction. It's worth noting, too, that our experts don't always agree on what's wrong -- or how to fix it.

Let's get started with the site's home page, on which a team of frog designers brainstormed. Explains Feldman: "The existing site homepage had three main flaws: It didn't promote Virtual Gourmet's products, it didn't portray VG as a top-quality company that you could trust, and it didn't feel 'scrumptious.'"

WHAT FROG SUGGESTS
Several elements of frog's design worth noting:
Click here for a larger view of the new design.

1 The photos bring mouthwatering photography to the very first page of the site. After all, this is all about the food.

2 The new name presentation emphasizes "gourmet" and deemphasizes "virtual." Again, it's all about the food and the people. The virtual element is just logistics. Note also a more attractive set of section headings in the upper-left corner, now incorporated into the page's banner.

3 The idea is to truly invite people to interact with the product by browsing recipes, buying food, considering gifts -- not just listing them.



WHAT ARGUS SUGGESTS As we dig a little deeper in the site, Argus' Peter Morville has more global commentary and in-depth analysis of the site's architecture:

"Overall, the Virtual Gourmet site projects a positive image to visitors. The images of food are clear and appealing. The graphic design and page layout are nicely done. The textual content is concise and informative. These strengths work together to build the trust that's vital when asking people to buy perishable food items on the Web.

"However, the information architecture of the Virtual Gourmet Web site does not match the high standards set by the design and content. Even on the current site, which is quite small with less than 50 gourmet food items, there's a real danger that users won't find the item they want. Add several hundred items (which I fully expect will be necessary to remain competitive), and the information architecture will completely fall apart. It's simply not scalable.

"Let's first take on an obvious problem that's very easy to fix. The global navigation bar has some labeling and grouping issues that are likely to cause immediate user confusion. As a first-time visitor to the site, I have no idea what the difference is between 'shopping' and 'food finder.' I came here to shop, but I also came here to find food. And what will I find under 'basket'? If I came here looking for gift baskets, I might look there first (only to find it's actually the 'shopping basket,' which shows a list of products I've selected for purchase). Then, there's the issue of grouping. Why is 'home' buried in the middle of the navigation bar? Its current placement is nonintuitive and breaks convention. Why is 'basket' in between 'services' and 'home'? Shouldn't it be next to 'check out'? In fact, do you really need two separate menu items for that process? Why not follow Amazon.com's lead and have a shopping basket that leads into the checkout process? Here's a quick and very rough draft of a revised navigation bar with some possible improvements to the labeling and grouping.

CURRENT VERSION
shopping | food finder | recipes | services | basket | home | search | contact us | check out



REVISED VERSION
home | gourmet foods | gourmet recipes | services | shopping basket | contact us | search



Notes Morville: "In this example, I removed 'food finder' from the main menu. I'd provide access to this under 'gourmet foods' and under 'services.' I might also feature it (and explain it) on the main page."



UNAPPETIZING SEARCH "The search interface of Virtual Gourmet is very unappetizing. Where are the search tips that explain what you are searching and how you can search? Can we search the entire Web site or just the 'shopping' area? Should we use Boolean operators (and, or, not)? In fact, some experimentation shows that the search engine is configured to do exact matching only. That means if I search on 'salmon filet,' I get no results, but if I search on 'salmon steak filet,' I find one item. In addition, there's no category-matching capability, so if I search on 'poultry,' I get no matches, even though there's a whole category with that name in the shopping area.

MAJOR RECOMMENDATION "Many people who are involved in designing Web sites talk about the notion of a good 'user experience.' Often, this notion tends to be vague, and people can't figure out what makes a good or bad experience. For this particular Web site, and for most Web sites in fact, there are two important factors that will influence the quality of this experience. First, the site must support information retrieval, helping users to find the products or information they're looking for. Second, the site must support associative learning, teaching the user about products or information they didn't know existed. There's a huge opportunity for Virtual Gourmet to gain a competitive advantage by developing and integrating a thesaurus that supports these two goals into their Web site.

"My major recommendation to Virtual Gourmet is to develop and integrate a thesaurus that maps users' needs onto the appropriate food items, recipes, and services that Virtual Gourmet has to offer. This is a problem and an opportunity common to almost all Web sites and intranets. The following diagram illustrates some of the relationships that can be modeled and leveraged by a thesaurus.

  (Broader)
Fish
 
(Variant)
Lox
Smoked
Salmon
(Variant)
Samon Lox
(Related)
Bagels
(Narrower)
Sliced Sockeye
Salmon Lox
(Related)
Capers
"In this example, a user may come into the site looking for smoked salmon. The thesaurus will make sure that whether they enter 'smoked salmon,' 'lox,' or even make a spelling mistake and enter 'samon lox' into the search interface, they'll still find what they're looking for. Users who enter a broader or narrower term will also be connected with the right food items. Even better, the site can now suggest bagels and capers as complementary food items. Virtual Gourmet can go beyond this by defining relationships between specific food items and specific recipes. It is these types of interconnections between food items, recipes, and services that could provide a huge improvement in the user experience and thereby position Virtual Gourmet as a leader in the online marketplace. Ultimately, the site might also leverage the thesaurus to create rich personalization capabilities, enabling users, for example, to create and share with friends and family their own database of online recipes with connections to the food items (available via Virtual Gourmet) needed to make those recipes."

(Note: For more background on the use of thesauruses on Web sites, see Morville's article at the online site WebReview.com. For an example of a site that uses a thesaurus in a very compelling and clear way, Morville suggests a visit to the Medline search page, which offers health information from the National Library of medicine.)

FINALLY, SET A BIGGER TABLE "A final suggestion revolves around the idea of community. Virtual Gourmet should establish an online discussion forum on the topic of gourmet food and gourmet cooking. It will be critical to staff this discussion forum with one or more experts. Over time, this could evolve into a dynamic online community that attracts and retains loyal customers to the Web site."

RUNDELL'S REACTION "We were floored by the homepage redesign. I love the colors, I love the layout. It's concise and inviting now. And in terms of the critique, I can see now we were losing the message with the navigation bar by having so many things. When you're buried in something for so long, it's so great to have a fresh eye. These are all suggestions we hope to implement as soon as possible."


THE PANELISTS Peter Morville is chief operating officer of Argus Associates (http://argus-inc.com). Since 1993, he has provided project management and information architecture services to a diverse and prestigious group of clients, including AT&T, Barron's Online, Chrysler, and Dow Chemical.

Josh Feldman is creative director of frogdesign.

Joan O'C. Hamilton writes Business Week's Digital Dispatch column.


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _




WEB POINTERS
Click here to visit some of the sites mentioned in the story:
Virtual Gourmet
frogdesign
Argus
WebReview: On using thesauruses
Medline: A good use of a search thesaurus




Copyright 2000, by The McGraw-Hill Companies Inc. All rights reserved.
Terms of Use   Privacy Policy