E-Commerce Checkout Design and Usability

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.

Last updated on August 31, 2016. Shawn is the President of Graticle, Inc. You can follow him at Google+

Tags: , ,

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

Let me start by saying if you choose Graticle Design for your website needs, you’ve made the right choice!

Four months ago, I started a new online business. I hired a company that I had found online, to design and build my new business website. Let’s just say, it has been a complete nightmare the past few months trying to get the work done that I needed on my site. I would email them when I needed something and sometimes get no response for days. Not to mention, the amount of time it took for them to get the work done and the high cost of their services. This situation had me extremely stressed out. I must add that I am not computer savvy. Therefore, I depended on this company for all of my website needs. Finally, after months of anxiety, frustration and utter disgust, I decided to search the web for a new website design company. I searched and interviewed many. However, I felt the most comfortable with Graticle Design. When I spoke with Shawn Hooghkirk, I felt a sense of trust and ease after our very first phone interview. Shawn actually took the time to listen and understand my concerns, expectations and everything I wanted for my website. After our first interview, I hired Graticle Design. This was the best decision for my business website and for myself as well. They are fast, efficient, reasonably priced and might I add, very skilled. I am beyond impressed with their service and I couldn’t be happier! I no longer have to stress and worry. I know that I can count on this company for all of my website needs. Most importantly, they do an incredible job!

Thank you Graticle Design! Your team is amazing!

Sincerely, Flickerfancy.com



Flicker Fancy



I cannot say enough about Graticle Design. I recently wrote a book called The Daily Challenge. It is a daily devotional about the ministry with orphans and widows we work with in a number of different countries. I was stumped as how to promote it or the cover style that would be on it. Shawn developed the magnificent cover that literally sells and promotes the book. I have had nothing but positive feed back on the cover and the content of the book. Thank you Shawn for your commitment to our work.

Dr. John Shane


NHOM International


Clarkston, Washington