Why UX is important to the online checkout process
By: Frankie Kastenbaum
Tags: UX, UI, Fitness, Online Shopping

Why UX is important to the online checkout process

As a gym enthusiast and possibly even a gym rat, products that will help me train and recover better are extremely important to my routine. That is why when I heard about Honey Stingers products I was super eager to try them and will admit I have now tried their honey, waffles, and protein bars.

Before going into the breakdown of the checkout process I experienced, I do want to be clear that I am not categorizing my positive experience with the physical product here. I am solely talking about my experience with purchasing the product.

Now that I have made that clear and I hope I have inspired you to try this awesome product, let’s understand the pain points.

After loading the website and exploring which products I wanted to try I added them to my cart and then clicked the checkout button under the cart icon in the navbar. Once on this Checkout page, my UX instincts came out.

Problem #1: Design Mimics an Infinite Scroll

Honey Stinger Checkout Page

As with any online order I had to input my shipping address, delivery method, payment method, and billing address. From an expectation standpoint, this was great as it included all fields I expected to fill out. However, my frustration occurred due to the sheer nature that all this information was on one long web page. I had to just keep scrolling in order to finally complete the last step.

Why It’s a Problem

It causes a user to feel as if the process will never end. Hence the title of this error, the layout mimics the design of a page that legit never ends.

How to Fix it

Honestly, pretty simple fix. If I were to redesign this checkout process, I would create different pages for each section. This way, the user can click a button that reads “Continue” or “Next” and allow them to differentiate between the different steps. By doing this, it allows the user to not feel like they are just continuously scrolling, and instead, they are able to get instant feedback that they have completed one step in the process and ultimately, that they are one step closer to receiving the product.

Problem #2: Location of Promo Code Input

Continuing off of problem #1, with the current design I have to scroll down towards the bottom of the page in order to fill out all the necessary information. However, the promo code form field is at the top of the page, forcing me to then have to scroll back up to fill it in.

Why It’s a Problem

The user flow here is confusing. We think left to right, so based on the current layout our brains will expect to fill in all of our information first since the form fields are all on the left-hand side. By doing this, the flow takes us to the bottom of the page where we are then prompted with a “Continue” button. When I clicked this button, I was taken to a page to review my order. At that point, it was too late to enter my promo code, so I was forced to hit the back button and go searching for this input field. I later found it hidden in the Summary section on the right-hand side of the original Checkout page.

How to Fix it

I would move the promo code to the payment section. This idea stems from the notion of similarity and that both the promo code and your credit card play a role in the payment of this product. This is important in UX as it allows for the user’s flow to feel seamless and consequential.

Problem #3: Hierarchy of color

Color plays a major role in our thought process, both consciously and subconsciously, and can be the reason why we click on a button. Honey Stinger has done a great job with creating a strong color palette and brand identity, however, I question the usage of color for their primary buttons.

Why It’s a Problem

On the checkout page, the left-hand side has the information a user has to fill in and on the right, it has the summary of the order. The problem here occurs with the fact that under the summary section there is a bright yellow button with the words “Edit cart” on it. This button in reality is not one a user will often need to click. Instead, at that moment the button to place an order is more important and that button is at the bottom of the page and is black. Just think about it for a second, which would catch your eye more, bright yellow or black?

With all the other black copy on the page, your answer is most likely the bright yellow button.

How to Fix It

That is why I suggest swapping the colors of the buttons. This way a user’s automatic instinct to click on the more aggressive colored button will allow them to follow the “correct path” at that moment.

As with any of my previous articles, and to reiterate what I said up top, I am only talking about how I would recommend fixing the user experience of the website. Each of the three areas I have called out are relatively small fixes, but each one proves the importance of UX and why more businesses should implement the UX process into their development processes.

_________________________________________________________________

Thanks for reading. Would love to hear your thoughts on this!

Want to know more about me? I am Frankie, a UX/UI Designer from New York City, passionate about building products within the Entertainment, Fitness, and Technology fields. Frankiekastenbaum.com