A Keen Design Exercise

By , User Experience Director

110230_navymedium_grey_pI hike in sandals. Probably more than I should. A lifetime of tromping around in the woods and through creeks has taught me a fair share of lessons regarding the fragility of my toes.

My first pair of Keens solved this problem:  a flexible sandal that fit my feet perfectly with a killer feature – my toes were finally enclosed within a protective shroud of hard rubber. Come at me, rocks.

Needless to say, I’m a big fan of Keen. However, I’m not so keen on aspects of their website. In the last year, they have made some massive improvements in the product display pages of their site. But what I’d like to focus on is Keen’s checkout pages.

Step 1:  Cart / Login (click to enlarge)

Screen Shot 2015-01-28 at 9.49.33 AM
Keen uses a “Short cart” that pulls down from the main navigation as the primary shopping cart interface for the site. Once you click ‘checkout’, you hit this page.
  • It’s a bit confusing to click ‘Checkout’ and then land on a page called ‘Cart’.  This is really the first page of checkout, and should be labeled as such.
  • There should be more space and delineation between the login, create account and guest checkout – those are three very different use cases, and should be treated with a bit more elegance.
  • Guest checkout should at least be given equal weight with registered checkout.  It’s being treated as a tertiary use case and studies have proven that highlighting guest checkout lifts conversion considerably.
  • Form fields should be larger and more accessible, these are all small and closely packed together.
  • The “Do you already own a pair of KEEN shoes/” checkbox-based yes/no question is awkward. It should be phrased as a statement: “I already own a pair of KEEN shoes.”
  • No easy “Continue shopping” button.  We can’t assume that a customer is finished adding things to the cart at this step.
  • Far too much emphasis on checkout functionality when the user is viewing this as a cart.  Recommend splitting out into an actual cart containing products and using this view as the first page of checkout when a user decides to proceed.  At bare minimum, I would swap the layout and lead with the products on the left, if continuing to integrate cart / and checkout as the first step.

 

 Step 2: Billing / Shipping (click to enlarge)

Keen_Checkout_2

Overall this page needs quite a bit of help.  Using a double-column for this form makes the page appear to be quite complex, and there’s not much attention being paid to help the customer access only the fields they need to successfully checkout with the least possible resistance.

  • Needs a more visual indication of the step you’re on.  It should be crystal how long the checkout experience is, and this information isn’t calling a lot of attention to itself.
  • Absent in the prior page where it makes the most sense, “Continue Shopping” has now appeared, but in an odd place in the continuum.
  • As in the prior page, the form fields are too small and densely packed together without logical grouping.
  • Credit card input area isn’t very well laid out, and there’s too much instructional text – it’s best to let the user enter it however they want to and just ignore spaces or dashes.
  • Points of assurance, i.e. the “Why this site is secure” link, are small and get lost amid all the controls.
  • ‘Use Shipping Information’ control is tiny, easily lost – and it’s not clear which form fields it’s related to.
  • Red copy at the top of the page looks like error text, and isn’t written in customer-friendly language.
  • I would urge caution when cross-selling inside the checkout process.  Customers can become easily distracted at the point when you want them focused on their task of checking out.

Step 3:  Review (click to enlarge)

Keen_Checkout_3

The final page of checkout isn’t too bad – it’s fairly straightforward.  There are a few things I’d pay a little extra attention to, though:

  • Edit controls should allow the customer to edit their information in-line on the current page, but instead they redirect the customer to the prior page.  This is disrupting to the customer.
  • Overall, the information is weirdly structured.  The order total, cart and submit order button are all disconnected from each other.
  • Continue Shopping is still awkwardly placed

 

Here’s how I’d tackle some of these problems.

Proposed redesign of step 2 (click to enlarge):

Keen_checkout_redesign

Ahhhh, now we have some room to breathe! I’ve redesigned this form with an eye toward logical groupings with clear headings and separation that allows the customer to level-set and understand each step in the process. It has less form fields, and the ones that remain are arranged in bite-sized clusters that are easy to digest. Some specific notes annotated below:

  1. I’ve pulled out the steps into a true heading, showing how many steps there are, what they are, and giving a strong visual cue to which one you’re currently on.  I’ve also moved the “Continue Shopping” button to a slightly better location.
  2. Large user-friendly form fields with a clear layout. We’re only asking for shipping information, because most users have the same address for both billing and shipping. we’ll provide a method for them to change that later if they need to.
  3. Slight redesign on the cart to better highlight the total the customer is paying at this time. I’ve also moved the “Review & Finalize Order” button to the bottom of the form itself. This cart could also float down the page as the customer scrolls.
  4. Integrating the credit card input fields in logical groupings, and adding the valid credit card icons within the field itself. The points of assurance are also displayed with a lot more clarity and are right where they need to be.
  5. The entire credit card form is redesigned with large form fields and easy controls. If the customer has a different billing address than their shipping address, they can click the checkbox and another address form will dynamically open up and let them enter it here.
  6. Standalone contact information collection that isn’t lost amid all the other controls.
  7. Finally, the user can easily decide which shipping method they’d like to use and proceed via the control that’s right at their fingertips when they’re at the end of the process.

Odds n’ Ends (click to enlarge):

Keen_header

I do have a few more quibbles that I feel are worth examining. Keen’s primary navigation area has a lot of brand personality, which is good – but I see a few things that should be considered.

The navigation bar is mostly comprised of clear choices that are unambiguous – however, the inconsistent icons on “UTILITY” and “CUSTOM” are potential trouble spots. I understand what they’re doing, but they create dissonance as I have to parse why they’re there, and they distract from the clean simplicity of the others. The utility controls above the primary navigation are also a little troublesome, as there’s a lot going on up there and the elements are closely clustered together. I would recommend pulling out the localization control, sign in, email and store locator into secondary text links and  let the cart / marketing tout and search control take the focus of that area.

Devil’s in the details

Ecommerce experiences are very complex, a lot of thought, decisions and business logic has to go in to every aspect – and I’m sure there are likely legitimate business reasons for some of the things I’ve called out in this piece. But I always land on the side of the user, and push hard for solutions that make their process easier. If you think through every decision with that goal over the business concerns, you’ll often find that things tend to work themselves out in your favor.

Author’s note:  This post is not intended or implied to solicit any work from Keen, it’s merely a fun design exercise on a site I regularly use. However, if you’d like us to evaluate your site and let you know what we think, feel free to get in touch and we’ll be happy to help out.