Checkout Redesign

 

Ecommerce checkout flow is the key to driving revenue, it is a brand identity piece of web design, it is a tool for increasing the brand loyalty. Any small design improvement in checkout UX has a direct impact on revenue and customer satisfaction.

MY ROLE:  As a part of a small web marketing team, I took initiative to implement the checkout H2O+ customers deserve.

SKILLS/TOOLS: Sketch, Photoshop, InvisionApp, Shopify Apps, typography, layout, UX design.


 
H2O+ Checkout

The challenge

When analyzing H2O+ web customer journey, we realized that the % of abandoned carts is higher than the average in the industry. To improve this process, we asked customers with abandoned carts why did they not complete the purchase. Majority of complaints came from the checkout process.


Positive feedback

In any project, it’s good to start with some positive feedback, and then go to the things you wish were better. A couple thing were done wright in the checkout process.

  • quick add to cart

  • quick view of cart in popup window

  • simplified checkout navigation not to disturb user from the checkout process

 

1. Guest checkout

The guest checkout used to be a must for e-commerce, but not anymore. Current customers expect having to login with a retailer, since the big players like Amazon, Shopify, Airbnb etc dropped guest checkout option. Logged in customers allow retailers to build more meaningful relationships, as well as their average spend is increased by 10% vs not logged in users.

The current “new customer” checkout does not serve functionality of new account creation and is too much visually separated from the sign in option. As a solution I’d recommend creating a popup window over dimmed checkout window, to show steps in the process and make this step more prominent.

 

2. Shipping method

Shipping method here is confusing for most of the customers. Numerous studies show that customers are sensitive to the shipping fees. A huge mistake on H2O+ page is the fact that you can’t see a straightforward message “FREE shipping” that users are searching for.

 

3. Linear layout of steps

Vertical or horizontal, the steps in the checkout process should stay in 1 line. That include “Address”, “Shipping”, “Payment”. Linear steps encourage transparency in the amount of steps the user has to take, as well as make the user understand the timing better.

 

4. Visual design - boxes

There’re lots of unnecessary boxes that make the design more crowded. Also some of the buttons should have the secondary button design in order to make the experience more seamless.