Purchase Process

Problem

Users want to purchase an already selected product

Solution

Present users with the purchase steps

From www.bn.com


Use when

The site allows purchasing of goods, typically a E-commerce Site but it can also a site that happens to sell products as well such as a Museum Site. A purchase can also be part of larger tasks such as a Booking.

How

In order to purchase the products in the cart they need to select the checkout action. The checkout is a five step Purchase Process with the following tasks:
  1. Identify they client
  2. Select shipping address and special options
  3. Select payment method
  4. See overview of the entire order
  5. Confirm and place order
  6. Receive confirmation by email
The users can abort the checkout procedure at any step. When users retry the checkout later, they start again at the first task. Consider a Wizard to guide the user through these tasks while minimizing the number of web pages used. However, a wizard is not always needed for just a purchase. Often sites ask for details that are not strictly necessary to process the order. In many cases, all of the order information may easily fit on one page and hence eliminating the need for a wizard.

Minimize navigation and non-relevant page elements
Since purchasing is a task that requires quite some focus, the standard page layout during the purchase process has to be simplified. Sub-navigation and contextual elements should not be shown. All distracting elements should be removed.

User Login
Many sites require users to Login as the first step of the process. While this is convenient for returning customers because all their personal data can be re-used, it is not very nice for new users. New customers should be allowed to purchase items without creating an account. At the end of a purchase, users can be asked to Registration. Registration can then be made very simple because all the basic data has already been captured during the purchase process, only the username and password still needs to be selected.

Confirmation by email
It is important to 'give' the users something that is easily accessible after the browser has been closed. An email with the information about the purchase is like a 'receipt' for users. It should contain an order number, list of items in the order, all amount, shipping address, payment information, date of placing order. It should also contain help for users how to track they order, cancel it, or request assistance.

Why

First time customers or infrequent customers are best helped with a Wizard that allows the to complete the purchase in small steps. Returning customers usually use the same shipping address and same credit-card. Therefore the process can be more efficiently done in only one overview screen with a 'purchase' button.

More Examples

At Amazon, the wizard is not shown for frequent customers who's data has been stored already. All information is shown in one screen while still allowing users to change parameters:



plml logo

Comments

3 comments have been added to this pattern


Luke Perman, 6th November 2007
And don't forget the process should be reversible, offering the user some kind of undo to step back through to amend any details. Are there any patterns relating to this specifically?
Dug Falby, 18th February 2008
I'd like to add I've had problems with Amazon's order/ship pattern. I've sent one-click purchases to my previous address and ordered two identical games consoles by accident.

I may be an idiot, but I suspect my troubles were caused by Amazon user experience folk not thoroughly exploring the use cases of an infrequent user.

In my specific example, stronger visual queues and some form of visual feedback would have prevented both errors (you haven't used 1-click in three years, is this still your correct shipping address? prompt = "yes" "change address").
Marianna, 27th September 2008
I had a bad user experience with "bmi baby" a few days ago. I followed the checkout process in order to purchase some airplane tickets and after entering the passengers details in the next page I had to choose airplane sits. When I realized that I had to pay extra for them I decided to go back to cancel the sitting settings but the system did not save the passengers details so I had to complete that form again.

I think it is really important to allow users to edit their choices and save the input data entered on the previous steps!


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha