Graticle Design Logo White

E-Commerce Checkout Design and Usability

June 19, 2014    Reading Time: 3 Minutes

Today 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:

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

Step 01 - Select Your Pond - JADF

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

Step 02 - Select Number of Fish - JADF

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

Step 03 - Enter Event Location Zipcode - JADF

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.


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.

Tags: , ,

Want a Quote on Your Project? Answer a Few Questions »

Hi Shawn,

Just a quick email to thank you for the great work you have done creating our logo and new product labels and manual covers, you hit the mark with the type of look and feel I was wanting and all done within the timelines required.

Thank you again for your professionalism on such an important project for us.

Calvin Newstead

Professional Styling Academy (PSA)

Melbourne, Australia

They are incredibly easy to work with, competitive prices and excellent work.

Erik Maloy

Lead Pastor

First Church in Charlestown

Charlestown, Massachusetts