Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Taking Time to Tour

by Jared M. Spool
on January 11, 2007

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.

Brownies.com Shopping Cart

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.

Brownies.com Shopping Cart

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.

Lands End Product Page

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.

Lands End Shipping Info

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.

Yahoo Movie Ratings

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.

About the Author

Jared M. Spool is the founder of User Interface Engineering. He spends his time working with the research teams at the company and helps clients understand how to solve their design problems. You can follow Jared on Twitter at @jmspool.