Problem = Underperforming checkout process

Solution = Created ease of purchase

Brand

Kohler Co.

Role

User Experience Designer

Skills & Services
  • User Experience Design
  • User Interface Design
  • Wireframing
  • User Flows & Journeys
  • Development Planning
Project Description

Kohler’s Kitchen & Bath online checkout process suffered from an increase in abandoned carts/products and payment steps.

I crafted a seamless experience, built with Ecommerce best practices, that was enjoyable for both new & returning users. The result was fewer steps, plus an increase in registered users & conversions.

01 04

Simplified Navigation

With a few simple adjustments and organizing similar elements together, the main navigation became more intuitive and visually inviting. Using the logo to separate ecommerce elements from inspirational ones, grouping advanced elements (search and shopping cart) and creating a secondary support navigation I was able to create a better guide for suggested flow throughout the web environment.

02 04

Cart Preview & Alerts

The shopping cart with counter was moved to the upper right side of the main navigation from its previous location in an intrusive ‘sticky’ footer navigation at the bottom left corner of the website. I also introduced an off-canvas navigation to display cart items when consumers clicked the shopping cart counter.

To elevate the confirmation communication based on user interactions a fixed alert was introduced to display recently added items to the cart. This alert displays in the upper right side of the browser window.

03 04

Introduction of Guest Checkout

Website metrics exposed a huge barrier created from the previous flow by requiring users to either login or register to start the checkout process. As a result, a guest checkout option was introduced to help increase conversions for new and infrequent users. If users elected to checkout as a guest, we also included a clear communication of benefits for registering during the following steps to promote the value of joining the Kohler community.

04 04

Updated Checkout Process

After reducing the amount of steps for the checkout process along with making the entire flow more forgiving it resulted in more user registrations, increased conversions and less abandoned carts. Much of the redesign was based on best practices like, minimized navigation to help maintain focus during checkout, inline validation to reduce required user interaction and an addition of a review step prior to payment submission to only mention a few.

All though I didn’t have to provide any front or back-end development for this project, I did provided a comprehensive set of development specs to communicate with an off-site team. These- specs included all desired interactive states, descriptions of functionality for all major elements along with a clickable prototype prepared from the wireframes as a reference.