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

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 »

Wow, what can I say?

Working with Shawn and the team at Graticle has made launching our website not only easy and stress-free, but fun! Our website looks wonderful, it looks beautiful and clean and is easy to for clients to navigate and order products. I love that it is mobile friendly and formats great on the phone. They really took the extra steps to make sure it came out exactly how we wanted and even made videos explaining step by step and page by page how to change or add to the website including changing text and images, adding products, etc. Shawn has made this a wonderful experience and helped create a great site that accurately represents our business. Not only will I recommend Graticle to other companies but also plan on having them do more work for us in the future.

Asia Robbins

Little Island Creamery


Cathlamet, Washington

Excellent service in helping us get our 24 websites updated and secure! Thank you, Shawn, for all your efforts. I especially appreciate the explanation videos and animation you provide to explain the work you do. I look forward to many more projects with you and your team.



Modulog, Inc.


Vancouver, Washington