Arrow close_button arrow_dropdown angle_left angle_right Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
Design 1, 2, 3: It's an eCommerce Roller Coaster - The Shopping Cart

Ahh summertime. For many Americans that means bar-b-ques, swimming pools and roller coasters! Every summer as a child, I would look forward to the three hour drive in the car with my family to the amusement park, anticipating the breakneck speeds and loop-de-loops of the tallest and fastest coasters this side of the Mississippi. What I didn't look forward to after three hours of driving? The long lines to buy admission tickets to get into the park. But oh boy, it's 2010 and the internet is changing all of that! Now, families and folks can buy and print their tickets online and shuffle right past the gate to the attractions.

For this month's Design 1, 2, 3, let's take a look at a popular amusement park's eCommerce Shopping Cart and see if it makes for a spectacularly speedy checkout.

1. Visual Heirarchy: What stands out on this page the most? A quick blur test (below) might help you.

Even though the company has managed to keep this page simple without a lot of distractions, the red, top navigation is drawing all the attention. It has a nice, subtle gradient on it that adds some depth. The rest of the page is mainly blue and black on white. No gradient, no shadows, no depth. The page feels very flat and my eye isn't getting pulled anywhere. It lazily floats around the page. This is important because as a result, the "Checkout" button gets lost.

The Checkout button is the exact same size, styling and coloring as the "update," "apply" and "continue shopping" buttons. When a user arrives on the shopping cart, it should be very obvious what the next step is, but on this page it's not. This could be remedied by applying a subtle gradient (like the one used in the nav) to the checkout button and making it larger. It'd still fit the color scheme, but it would stand out as the more important button that it is.

2. User Confusion: As mentioned before, during the checkout process, the user should always know what the next step is. Well, if you're buying a season pass from this site, you might be perplexed to realize that "continue" isn't the next step. After tapping on the button several times, I thought it must be a dead link and I reloaded the page. Click, click, click, nope I still couldn't continue. My confusion increased. Until after a few seconds of scanning I saw in bold, red, starred text: *Enter Pass Information. Hmm... I wonder if this is what's stopping me from proceeding.

Sure enough, when purchasing a a season pass, the user must enter in their personal information before moving from the shopping cart to the checkout. There are several ways to smoothly transition the user to this step:

  1. The continue button could be grayed out, so users automatically know that something is wrong. Better yet, the button could be grayed out AND their could be an additional linked line of text (next to the button) that says, "Before continuing checkout, users buying season passes must provide their information." While "Enter Pass Information" was a nice attempt at this, it's location and language doesn't tell me this is an immediate and required step before checking out.
  2. The best solution? When users are adding the season pass on the previous page, why not pull up a lightbox and have them fill out the information right then as a half-way step before they arrive on the shopping cart? Then no modifications would be needed on the shopping cart at all.

3. Usability: While I was writing this, my shopping cart session timed out. Okay, no big deal, this happens all the time. However, I was not expecting to arrive at this page (below). If you can't read it, it says "Your session has timed out."

I had no way to get back to the amusement park site, let alone my order or shopping cart. The page didn't automatically redirect me or even provide a link back to the homepage. The page wasn't even branded to the company, which only heightened my frazzledness about what had just happened and the security of everything. When I clicked the back button, I got back to my cart in tact, but whatever link I clicked still took me to this session timed out page. Being web saavy that I am, I played around with the URL, cutting off the timeout.htm extension, and going back to the root domain, and nope neither of those worked at getting me back to the amusement park site.

My point is -- don't do this to your customers. Online shoppers, web saavy or not, are bound to cause errors and go off the beaten path every now and then. Your site has to be there to hold their hand and get them back on task. A session time out in the eCommerce part of the site, should have redirected me to the general, buying tickets page. Even a simply branded Error Page with the top visited links on the site would probably be enough to get someone back on track.

Amusement parks might think they have a lock on consumers because trips usually rely on location. But don't think that means you can provide a poor experience and expect a repeat visit. Make the best impression possible by providing them with an easy way to skip the lines at the gates by buying their tickets online. If you do, those single day passes might turn into season passes.

Mentioned in this Post
Homepage :: Hersheypark
(NOTE: I can't link to the shopping cart because of the security, but do check it out.)

Get in Touch