Taking Time to Tour

by Jared M. Spool

Once we figure out what holiday gifts to get our loved ones, which can be a challenge in itself, e-commerce sites should make it easy to actually purchase and deliver the gifts. At least, that’s the theory.

Over at apparel retailer JCPenney.com, if you find a bathrobe you think you’d like to send to both your Dad and your Uncle Joe, you actually have to buy them separately and perform the checkout process twice, entering all of your information each time. You have to really like Uncle Joe to want to go through twice the effort.

Over at Proflowers.com, which has amazingly wonderful flowers (with magical powers that got me out of many jams), their checkout design is similar to JC Penney’s—to send flowers to more than one recipient, you need to go through the check out process for each one.

However, unlike JC Penney’s design, there is no shopping cart. Once you select a bouquet to purchase, the site immediately asks you where to send it. If you’ve sent them flowers before, the site remembers their shipping address, so it’s as easy as selecting from a pull-down. In addition, the site remembers all of your billing information, including your credit card number, so a single click can move you through that stage too. Proflowers’ designers have done a nice job streamlining the process of the second order.

The designers at Fairytale Brownies, whose gifts are made of chocolately-goodness, have also thought about optimizing the process of giving gifts. Upon starting the checkout process, you’re presented two buttons: ship to a single address or to multiple addresses.

Choosing the latter adds address book functions (New Address, Edit An Address, and Choose an Address for this item) to each item in the order, with ‘myself’ (we all deserve a treat) as a built-in address.

Fairytale’s approach of putting address capabilities into the shopping cart is very clever and an interesting approach to the multiple gift issue. The designer’s at JC Penney could easily adopt this model for their checkout.

Lands’ End’s site designers went a step further. Like Fairytale’s design, you can specify someone else to send to before you start the checkout process. However, Lands’ End doesn’t bother with an address book. Instead, before you put the product in the cart, you specify a “Nickname” for the recipient.

Then, during checkout, the site prompts you for each nickname. The site doesn’t seem to retain addresses for nicknames, so a frequent recipient would need entering each time.

Each of the four approaches above have their pros and cons. By studying each approach, a team, working on an e-commerce site where gift recipients are likely, can evaluate and find inspiration for their own solution. They can put them side-by-side and see what works and what doesn’t. Without having visited and played with each of these sites, they may never realize the different approaches were out there.

Part of Our Education

Part of traditional design education is to look at what others before us have done. Composers study the work of other musicians, looking closely at how an artist put together and arranged the composition. Architects study existing structures to see exactly how they solved difficult problems.

Studying the works of those who came before us is a long and glorious tradition. However, because designing web-based applications is very recent, especially when compared to music composition and architecture, we don’t have a formalized method for studying these works. Instead, we have to take tours.

Touring an application is different from just experiencing it. When I use an e-commerce site, I’m concentrating on my goal: selecting and ordering the right product. With a well-designed site, I’ll be engrossed in my goal. I won’t pay attention to the site’s construction.

When I’m touring a site, it’s a different story. I’m paying close attention to all the details, from the subtleties of each widget to the overall flow of the application. I pay little attention to the content on the site, only to how it’s presented and manipulated.

Finding our Influences

Google has something called “20% Time.” 20 percent of the time, Google designers should work on something other than their assigned project. The idea is part fun, part educational. If you’re playing with something outside your usual field-of-effort, you learn things you wouldn’t learn otherwise.

What would happen if we spent half that time, say 10% of our workweek, on touring. In a 40-hour week, we’d spend 4 hours a week exploring the designs of other sites. If we spent 4 hours every week for a year, we’d get more than five weeks of research done. We can learn a lot in five weeks.

What sites should we study? We can start with our competitors, to see how they solve the same problems we’re facing.

Another place we could look are to sites that have to be good to survive—sites where a bad design will kill the business. Internet-reliant companies, such as Netflix, eBay, Amazon, and Dell, all get most, if not all, of their revenue from the web. Looking at those sites can tell us how designs evolve to meet the needs of both the users and the business.

We wouldn’t want to look only at the top, most popular sites. We’d also want to spend as much as half our touring time looking at sites we’ve never heard of before. We recommend to our clients they look at sites with very different purposes than their own organization. Banking sites, dating sites, universities, bookstores, and online utilities, such as blogging tools or artist-bidding systems, are all candidates for touring. From each of these, we see how they’ve adapted basic architectures to their own unique problems, along with capturing ideas for innovations in our own space.

What Do We Look For?

When we’re touring, one thing we try to identify is what we call “Problem/Solution Pairs.” We can think of a finished design as a designer’s attempt to solve a problem. By looking at the solution, it’s often possible to guess what problem they were trying to solve.

The goal is to compile a catalog of problems and their potential solutions. Down the road, when we run into a similar problem, we can refer to the catalog to see what solutions are available to us. We can also revisit the original sites to see if their designs have evolved further from our original inspection.

Of course, we also want to look for alternatives to problems we’ve already encountered. Seeing how others tackle the same problems is very insightful.

Every so often, we run into a novel design solving a problem we didn’t know existed. For example, we’ve recently become enamored by Yahoo! Movies’ grading widget. Movie watchers can rate each movie they’ve seen by assigning it a grade.

How do you ensure everyone is rating using the same scale? With five letters and a plus and minus for each, the user has 15 choices, such as B+ and C-. The ratings will mean less if I think a “good” movie warrants a B, but you think it only warrants a C+.

To solve this, Yahoo!’s designers have assigned adjectives to each of the 15 grades, such as “good”, “memorable”, and “disappointing”. To keep the widget uncluttered, the adjectives only appear when the user moves their mouse over the letter grade.

The technique of using adjectives to help people understand a rating system, along with the technique of keeping the adjectives hidden until the user moves over them, is worth keeping in our arsenal. Now that we’ve seen their solution, we are more aware of the potential problems behind it.

Documenting What We’ve Found

While we’ll spend half of our time exploring the designs, we try to spend the other half documenting what we’ve found. A simple “solutions” book is a good tool. We take screen shots (we love Techsmith’s Snagit on the PC and the ever popular Command-Shift-4 on the Mac), paste them into a document, and write a few words about the problem and what’s novel about the solution (plus some hints on how to find the “live” solution). We then print the page out and add it to our notebook. When we’re looking for inspiration, we just open the book and start browsing it.

Recently, we’ve talked to several teams using internal blogs or wikis for a similar solution. Creating these online repositories makes it easy for teams to access and share. Commenting capabilities can make for interesting discussions on how people feel about each of the item’s they’ve found and how the team might find it useful in the future.

For some projects, like a subsystem redesign, we’ve seen teams take over the walls of a conference room and paste various solutions directly on the wall. At one e-commerce company we recently visited, they had the screens from 25 different checkout processes, all from sites they’d toured. The team told us they found studying the different approaches very helpful in creating a new streamlined process for their own shoppers.

All about the Inspiration

Thomas Edison once said, “Genius is one percent inspiration and ninety-nine percent perspiration.” Spending time exploring sites and documenting what we found is a lot of work, but if it helps us be a little more innovative in our solutions, everyone benefits.

Published here on January 11, 2007.