E-Commerce Checkout Design and Usability
June 19, 2014 Reading Time: 3 MinutesToday it’s easier than ever to start collecting payments for your products or services. There are a million and one ways to do this, and it has given a lot of power to small and large businesses throughout the world.
In this post I would like to showcase an eCommerce website that we designed and developed for a local business in Ellensburg, Washington. Specifically, I will focus on the ordering system that we created that allows customers to place an order online.
There are two steps to the ordering process, and in this post I’ll be going over the first step.
The business we’ll be focusing on supplies portable fishing ponds for events and birthday parties. You can view their website we created here: www.jadfarms.com
When the owner originally approached us to design their website, his emphasis was on simplicity, accessibility, and transparency. Customers should be able to arrive on their website and reserve a pond easily. The customer should be able to go from “I need a pond” to “I’ve reserved my pond” without pain.
With this in mind, here is what we developed for them:
Step #1: Select Your Pond
The customer is always informed of their actions.
The most important detail in this step is that the customer knows what they are ordering and what is included. Particularly: the pond size, the capacity of fish for the pond selected, and how many people can fish at any given time.
From a usability standpoint, the customer should know which pond they have selected before going to the next step. For that, we’ve used contrast in combination with a check mark. If the user has selected a pond, the box is solid blue, while also containing a green circle with a check mark for validation. You’ll also notice that when the cursor is hovering over a pond that is not selected, the border changes to blue. It’s absolutely crucial to keep the user informed of their actions. Otherwise they may think the website is not responding and eventually give up during the process.
Step #2: Select Number of Fish
The reaction to the customer actions are instant. In this case, the pond selected dictates the quantity of fish they can order.
In the second step, the customer is selecting the number of fish that they would like to order. Depending on the size of pond they’ve selected, this will determine the minimum and maximum number of fish they can order. For instance, if they select the 6 foot pond, the minimum order is 15, while the maximum is 45. If they select the 8 foot pond, the minimum order is 25, while the maximum is 60.
When the customer selects their pond, the range of fish they can order changes instantly. In the animation above, you’ll notice when the 8 foot pond is selected, the minimum number of fish changes from 15 to 25.
Step #3: Enter Event Location Zipcode
During the entire ordering process, the total price and breakdown of the price are updated instantaneously
For this step, the customer is entering the zip code where they will host their event.
The website automatically calculates the number of miles the event is from a servicing location. If the zip code falls outside the 40 mile servicing area, the website automatically calculates the extra miles and adds a delivery cost onto the order.
Total Price & Breakdown
During the entire ordering process, the total price and breakdown of the price are updated instantaneously. When the customer changes the number of fish in their order, the website recalculates the total and also shows the update in the price breakdown. Quick, easy and straightforward.
This Price Breakdown is listed so that the customer can know exactly what it is they are paying for. This gives transparency to their order. Hidden fees? Nope.
The customer also knows that the next step is where they’ll be entering in the event and billing details.
Secondary Benefit
A secondary benefit to this ordering process is that the company can actually use it as a Quote Calculator. When a customer calls in for a quote, they can simply load up their website and get a price breakdown for the customer. There is no need to find a list of prices or to even grab a calculator.
Conclusion
While it is easier than ever to collect payments from your customers online, there are a lot of details that are often overlooked. For example, how technologically savvy is your target market? Have they ever ordered a product online?
These types of discussions need to happen well in advance of designing or even thinking about having a website for your business. If you don’t understand these basic details about your target market, your website is destined to perform poorly.
If you already have a website, review it with a current or prospective customer.
Is it easy to use? Are there bottle necks in your ordering process that are preventing people from ordering?
These seemingly minor details are what make and break a website,
and in turn, a business.
Written by Shawn Hooghkirk on June 19, 2014
Last updated on June 04, 2020. Shawn is the President of Graticle, Inc.