Healthful Pets checkout design refactor

We were asked by Healthful Pets to do a review of their checkout design to see if it could be improved.

The default

Magento includes an accordion style, multi-step checkout by default which can often seem a little clunky for customers to use. It doesn’t really offer the ability to review the whole form in one go without going back through steps and you can’t preview later steps until you have completed the previous ones. This can feel a bit awkward especially if the site doesn’t have shipping estimates enabled on the basket page or if the customer simply wants to know what payment options are available before filling in their details. It just feels a bit like looking at that large stack of paperwork on your desk that you’ve been putting off for a while and no checkout should feel like that.

The process

We started by solving the largest problem which is that the customer can’t see the whole form in one go. We looked at the different options available for one-step checkouts and opted for this one. We thought that this offered a good starting point and would reduce the amount of developer hours required to keep costs to a minimum. However the design is still a bit clunky and could do with a little bit of help.

Starting at the top of the checkout page the account login and search bar was removed. We feel that at this point customers generally aren’t interested in searching for products and there are links in the checkout form for logging in or creating an account. For the same reasons we opted to remove the main navigation so that the focus is on the checkout itself – we’re trialing this to see what customers think but for now it already looks a lot cleaner.

The checkout title and supporting text were centred and the font sizes tweaked to create a better visual hierarchy. Separating the login link from that text made it a little easier to spot for customers who already have an account. Clicking the login link opens a nice modal so that customers can login without leaving the checkout page.

The 3-column layout is nice but it’s looking a bit busy and the padding is a little off in places so we separated the columns a little bit and standardised the padding around the form elements. Next up we removed the borders from the columns and changed them to more of a card-type UI with some subtle box-shadows to lift them off the page.

Following on from this we removed the borders from the form inputs and gave them a nice light grey background. This is a nice way to clean up complex forms and make them look less busy. The section headers were changed to sentence case, given more white-space and the form labels were reduced in size and increased in weight. We also tweaked the required fields asterisk to help that stand out and moved away from the default light grey text to provide better contrast. This all helped clean up the form, make it more scannable and help it look a lot less cluttered.

Radio buttons for shipping and payment options were turned in to more clickable buttons, the links for creating an account and signing up to newsletters were made more visible and prices were given a bit of emphasis.

The coupon form was cleaned up and we changed the coupon button from the primary brand colour to a more subtle grey so that it didn’t distract from the place order button. Finally, the place order button was changed to full-width to help balance out the column and each column was given a coloured top border to help draw the eye back to the tops after each section is completed.

All of this was completed in a small amount of time and the result is a much cleaner checkout experience.

If you would like to discuss a design or development project, no matter how large or small, then call me directly on 01782 954282 or send me an email.