Icebreaker | Checkout UX

When I joined icebreaker, there were a few too many kinks in our shopping funnel. Esspecially on the mobile side of things, as, before my time the site was designed by a team of print designers with minimal experience in digital. So it looked great, mostly, but the UX fell short frequently. The result: a lot of friction and a lot of customers dropping off.

From browsing to checkout, throughout my time at icebreaker I've driven incremental changes to boost customer experience throughout the shopping journey (with a heavy focus on mobile). From interactions on the gridwall, to a new add-to-cart pattern and a redesign of the cart and checkout flow, a lot has changed since I started. And with some luck, those changes have seen positive results YOY so far. Here's a quick look at some positive metrics.

Product Views

Percentage of sessions with product views YOY.

+21% overall
+53% mobile

Add to Cart

Percentage of sessions with add-to-cart clicks YOY.

+32% overall
+93% mobile

Sessions w/ checkout

Percentage of sessions that start checkout YOY.

+28% overall
+62% mobile

Checkout Completion

Percentage of sessions completed checkout once started.

+31% overall
+84% mobile

We've been thrilled that our hard work had created positive results so far, but for the purpose of this project highlight, I'll focus on a few improvements made specifically to the checkout portion of the flow. It was functional, mostly, but had lots of room for improvement. I wanted to take it from just functional to as close to delightful as I could. (As was the philosophy in most things I've designed for icebreaker) From entire page layout to the fine details of form fields' micro interactions, we overhauled every bit of the checkout flow from start to finish. I like to think the experience is much more pleasant now than it was.


THE PROCESS
Divider Icon Image
ORIGINAL BILLING PAGE

Aside from the uninspiring splattering of content on the page, the fields themselves didn't have clear focus and error states and it wasn't always apparent what content was there just to be informative, and what required input and interaction. It was all just a bit disjointed. Furthermore, it didn't consider the mobile experience much at all. I had a lot of issues with it from a UX perspective, but let's not have you read a novel shall we?


UPDATED BILLING PAGE

A large part of this was simply just a better visual layer to all the content we were already dealing with. But to a greater extent was the organization and flow of content, and improvements of the micro interactions on the page. Tough to show in a screen shot, but: After the redesign, the fields then had clearer states and were more pleasant to interact with. We made improvements to certain feedback you'd get on inputs and standardized clearer patterns of interaction that resulted in a much smoother experience.


ORIGINAL CONFIRMATION PAGE

Upon completion of the checkout process, the original experience would drop you on this monstrosity of a page. The epitome of let’s just barf out all the information on the page that's necessary. All transactional, no hint of any care for the pleasantness of the UX at all. Makes my skin crawl. A lot of the comments we got from customers suggested that they believed this page required you to create an account to submit an order, which is inaccurate of course. Just kind of a big UX issue.


UPDATED CONFIRMATION PAGE

The primary goal of the redesign of this particular page was to create a sense of delight. We'd just taken the customer's hard-earned money, so to provide them with a delightful and well-thought-out final step of the experience was crucial to earning trust. We made it more clear than before that they were done, and the order would be on it's way soon. The amount of angry customer comments about "required" account creation saw a huge drop off as well after this launched.