Designing for E-Commerce

Interview  by Robert O'Malley

Paul Griffiths is Director of Consumer Interface Design at, an online gift service in Waltham, Mass. Griffiths joined the company in 1998 to launch its web site. Since then, he has guided it through several redesigns and is currently at work on an update. Griffiths has a degree in creative writing from Sarah Lawrence College. He recently spoke to ScreamZine about the current and future design of the web site.

My background is in the visual arts and creative writing. Since my father worked for IBM, I grew up with computers all around me. I was first exposed to interface design when I was 15 by running a Bulletin Board Service. The software at the time was limited - it allowed me to modify basic message board designs - but with it, I was able to customize an experience. A few years later, when the first version of Netscape (then Mosaic) came out, HTML was a natural progression for me. I've been designing and programming ever since.

Last year, I ran the web site redesign project for My group was comprised of a creative director, a technology manager, a project manager, and a writer to help construct the narrative flow of the site. My job was to balance the business needs, the customer's needs, and our creative ideas and help merge all three into a single coherent design.

At the time, we were really trying to launch a brand. The company was previously known as In October of 1999, we increased our product offerings from one product line to 14 when we launched. We needed to change our image and really promote the value of our brand; we wanted to look different on the web.

By contrast, this year we know much more about our customers and our product line and I believe that our new site design, launching this fall, will reflect that. My own position, likewise, has changed as the company has matured. I spent most of this year focused on the conceptual design of the site with my new team, while our Creative Department and E-commerce Operations Team have collaborated on what the physical design of the site will be. Frankly, I think it will be another huge step from where we are today.

Design Features

A lot of the design decisions we made last year were meant to showcase how different we are as a gift service. The black background color, for example, really reinforces that difference. Visually, transitioning from a site with a traditional white background to our site is very noticeable. The contrast suggests elegance; it lets you know that you're going to experience something of quality. On one level, it says: "If we thought so much about changing the background color of our web site, imagine how we think about our gifts."

I think most people put their sites on a white background to ease issues of sizing and scaling information. For us, the decision was to make our home page decidedly different. We chose to feature very high-end photographs, since image is very important when you're sending a gift.

Professional Photography

Initially, we hired a local professional photographer to take a number of mood shots and product shots. Since then we've moved our studio in-house because we're constantly updating our product line and we have some talent in-house now that we weren't lucky enough to have before. Shooting our own photographs has always been an important decision for us; we didn't want to rely on stock photography. We want to set a mood and show how gifts are really an expression of people. Since our consumers are buying something that they're never physically going to touch, we need to instill confidence by the impression the images make. That's why all the shots are very tight. You can obviously see what you're getting, but there's still an evocative feel to them too. On the right-hand side, we place images that are non-product based and meant to create a mood. This way people can see and feel what the site is like.

In choosing fonts, the most important things were readability and comprehension, but we also wanted to find fonts that were different. We didn't want Times New Roman, we didn't want Courier. Our creative director chose Trajan for the image pieces and Verdana, a standard Windows font, for the text.

Our home page has a very clean design. Obviously we alert people to new products and services that are coming online, but it's a pretty simple design. It's kind of simple and elegant. You can make your choices from the home page.

Testing Usability

We've put our current site through a number of usability tests. We know English-readers read from left to right, so we put our navigation on the right-hand side to make a natural progression. Web sites that have navigation on the left-hand side and never change its position run the risk of having users ignore it page after page. Our upcoming site will feature an active left-hand navigation which will change and respond to the user as he or she navigates the site.

On our current site, we also group things by color and category to help people understand where they are located. All of our gifts fit into three categories right now: Taste, Savor, and Live. We call them the product families. They have their own color scheme and their own sensibility: our "Live" gifts are experiential gifts; our "Taste" gifts are obviously things that are edible and consumable; our "Savor" gifts are those things you really want to enjoy over time. The categories help people understand where they are in the site.

We also really show what we have on our site. Instead of saying it's "for him" or "for her," we just say what it is. So if you want to find wine, you know where to go because our navigation is clear in that regard.

Site Clarity

The most important thing a design team can do is really be clear about what youšre selling. Avoid euphemisms at all costs: if people don't understand what a product is they're not going to buy it. Names are important; descriptions are important. We use a lot of photography because we're showing people what they're getting. That's key in getting people comfortable buying something on the web and we've taken this idea even further on our upcoming site, which will be especially visual.

The second most important thing a design team can do is test. For the upcoming site, my group did a lot of usability testing. We put demo versions of the site in front of people so we could learn about how they would use it even before we were finished designing it. This is a very informative process for a designer. If you take a design that you think is good and put it in front of the people who are actually going to use it, then you quickly find out what you need to improve.

There's a well-held usability theory that users navigate by sense of smell, meaning that as long as they can keep moving forward and can see how to move forward, they'll keep moving deeper into the site. But once they lose inertia and get lost, they either start over again or leave the site. So you want to make sure that people are making forward progress. You don't want to build pages that have dead ends. There are a lot of sites where you get to a page and have to click the back button; that's something that should be avoided at all costs. If you have the user's attention on the page, try to keep it on the page and away from the browser.

In our case, we wanted to show as many of our product lines as we could, so that if people decide they don't like one product line they can see how to get to the next one. Our new site will improve on this idea because we've reserved much more real estate for the product categories.

E-Commerce Versus Catalogs

Compared with catalogs, e-commerce is entirely user driven. Consumers can find what they want and don't have to read what they don't want to read. For example, our dining, golf, spa and cars gifts are geographically based. Customers can go to our site and get a panoramic view of a restaurant. If you're sending a restaurant gift, you can see a picture of what the inside of that restaurant looks like. That's not something you get in a catalog. Users decide how much information they want. If you know that you just want to buy flowers and the first one we recommend looks good, you can buy it and you're done. It saves you time. With a catalog you're stuck with what it decides is the information you want.

Virtual Tours

We have two special features to show our products. One is the virtual tour I mentioned. We have these tours of our golf courses, restaurants, and spas to let our customers know what a location is going to look like. We don't just want to do cool stuff, but cool stuff that is also informative. Just showing someone a picture of the location is good, but if we can give them an experience of what it's going to look like, that's an even better experience for a customer.

The virtual tours were shot by a company called iPix (formerly Bamboo). Originally they used their technology to take 360-degree views of houses for real estate agents. They dispatch photographers to a location and take a 360-degree picture of the site with a special camera. Then they serve it up from their site. It doesn't require any plug-ins. We approached them and applied their technology in an innovative way and I think it makes a pretty good experience for our customers.

Likewise, at the top of most of our family pages, you can experience a gift yourself. It's a Flash piece that shows you the items in any given gift. This lets you imagine what it's like for someone to receive a gift from You can play with a couple of pieces to understand a little bit better what a recipient is going to receive.

We've made this optional so that if you want more information you can get it. But we don't encumber people with information they may not want and that increases their download time. If users want it, they're going to be interested enough to wait the couple of seconds it will take for it to download. Whenever you force a user's computer to perform an action that requires a plug-in, you run the risk of annoying the user or crashing the machine.

We check browsers to make sure a user can see Flash before we run it. The majority of the browsers on this site can support Flash. Basically IE4 and Netscape 4 and above mainly have Flash installed, unless someone has taken them off. It's a solid plug-in and has great market penetration, so we felt comfortable taking the risk with Flash.

I don't know if people always want music or Flash on a web site. Those things are interesting and fun toys, but when you want to buy something and have more self-direction, they may get in the way of your purchase. Again, our own virtual tours are really geared toward people who want more specific information or have the time to browse around and spend on the site.

Designing for the Web

Web site design now has its own rules. I think that design is getting smarter about interacting with the customer and serving information that the customer is going to want and not giving them information that they don't need. We're all really just learning more about how differently people shop online, compared with a catalog or by phone. Instead of trying to mimic those things I think e-commerce and the Web are creating their own styles and enterprises.

Users are very self-directed now. They want specific information only when they request it. If they want to be able to dig for more information, they don't want anything extra to be put in their way. And they want sites to be fast; they want to feel they can get in and find something and get out pretty quickly while at the same time enjoying the shopping experience.

People are becoming smarter about how they want to shop on the Web. They're less forgiving of bad design and of designs that confuse them. I think the novelty of the Web has worn off to a certain extent and users have clear expectations of the experience. They want to make sure that the time they spend on the site is valuable. People use the Internet on a daily basis and are familiar with it, so clarity and ease of use are really important.

Customer Expectations

In the last six months, I've seen a real standardization in users' expectations for general e-commerce functions like shopping cart and check out. Since last Christmas, people have a standard idea that the first page should be billing information; the second page should be shipping information; the third page should be payment information; the fourth page should be confirmation. Users now have a clear model for what a checkout and purchase process should be like. In response, this year wešve been slowly improving our checkout process.

If a designer wants to violate something, violate form; don't violate function on the web. Our black background is a violation of form, but our checkout process is pretty clear and consistent with the de facto standards that exist for e-commerce sites out there. I think that's a really important point. If you get too innovative with the functionality and people get confused, they're not going to have a good experience with your company and with your web site.

I think that bad web site design is a result of either misunderstanding your users or thinking that you're smarter than they are. Those are the two biggest mistakes that most web designers make. But you're not smarter, and if you continue with that kind of design arrogance you're going to lose customers. You really need to put your design in front of people and have them tell you what they want instead of your deciding for them what they want.

Interactive Web Design

One of the interesting things about web site design is that it's not just graphics; it's how those things merge to create an interactive experience. Our design teams have always involved designers, programmers, and usability people to ensure wešre focused on a total experience. If you understand how users are going to interact with your site, you're not going to get the experience. When we test something, we generally test it from a functional standpoint first, then inform the design with those experiences.

The Web is a restrictive medium. Designers have to be cognizant of how consumers are going to interact with a site and the technical limitations of the platform. I think that tension exists for designers in the print world as well. Each medium has its own limitations. The limitations of the web world are just harder to stomach sometimes because your goal is to service a user. You may have a brilliant idea, but if the user doesn't understand it, you're dead in the water. I think you can get away with a lot more in print or in other types of design media because the comprehension doesn't have to be there as tightly. If users can't use a web site to do what they need to do, they're certainly not going to appreciate the aesthetics of the site.

Articles Page