What can we do to enhance and streamline the checkout procedure?
This case study delves into the entire research process with the goal of pinpointing different ways to improve the Onlinemetals.com checkout process and enhance the overall user experience.
Overview
Who is Online Metals
Online Metals is a small/medium (10-50 employees) e-commerce company at the time of this project.
They were acquired by Thyssenkrupp, a german metal manufacturing group. Online Metals is specialized in providing small quantity cut-to size materials for individuals and organizations of any size.
Online Metals was promoting the following services
Knowledgeable, friendly customer service
Account features that support professional level needs
Rewards for spending more - preferred pricing & discounts, email discounts
Continually growing inventory to meet more customer needs
Problem Statement
This study aimed to explore opportunities for redesigning the checkout process based on feedback from various stakeholders.
We analyzed our current checkout process, compared it with main competitors, and examined successful e-commerce sites to identify potential improvements.
The seven areas we focused on were:
Excessive steps in the checkout process
Form filling challenges
Account sign-in incentives
Technical issues
User navigation restrictions
Design and layout problems
UI and layout suggestions
The current 13 Steps Checkout
Make each step more efficient
The current checkout process for users is overly complicated and inefficient, involving multiple steps and potential technical issues that can frustrate customers and lead to cart abandonment.
Excessive Steps in the Checkout Process:
The checkout process involves five main steps, but these steps can balloon into approximately 13 steps due to page refreshes and additional screens.
This does not include the 11 to 14 steps needed to fill out shipping and billing information forms.
Form Filling Challenges:
While browser autofill can speed up form filling, it is not always available or used by all customers.
Users without accounts have to fill in extensive information manually, leading to potential errors and frustration.
Step 1 - Shipping Address
Step 2 - Billing Address
Step 3 - Shipping Options
Step 4 - Payment Methods
Step 4.5 - Signing In During Checkout
Navigation and technical issues
Technical Issues
The checkout page exhibits "twitching" upon initial load, suggesting a technical glitch that needs investigation.
Frequent calls to UPS/Vertex for shipping checks slow down each step when clicking "Continue."
User Navigation Restrictions
Sections of the checkout process are locked, preventing customers from viewing future steps without completing the current one.
This lack of visibility can cause confusion and deter customers.
Sign in incentive and design issues
Account Sign-In Incentives
There is no incentive for users to sign in at the beginning of the checkout process, leading to scenarios where they sign in midway and have to re-enter all information.
Design Problems
Excessive vertical space between the top navigation and breadcrumbs, as well as between the breadcrumbs and the top of the checkout page.
The page is a bit too subdued and lack branded colors
UI error where steps following the shipping option appear active and highlighted in orange instead of inactive and in black.
Top navigation bar and footer could be removed on the checkout page to reduce clutter.
Customers cannot navigate between different steps of the process. Dropdowns that were part of the original designs were removed during initial development
Step 5 - Review Items, place order
Competitors
Many competitors offer multiple payment methods, including express payment, while some (Grainger, McMaster Carr, Metals 4 U Online) only offer credit card.
Most competitors share a similar checkout layout: order summary on the right, checkout steps/details on the left.
Exception: McMaster Carr combines cart and checkout on one page, with the cart on the left and checkout details on the right.
Use of horizontal or vertical progress steps to indicate the customer's position in the checkout process.
Vertical Progress Steps: Numbered and labeled; active/current step in color and expanded, completed steps collapse and show as checkmarks, uncompleted sections as disabled/inactive/grey.
Horizontal Progress Steps: Numbered/labeled/with icon; active/current section in color as a full page, completed steps show as checkmarks, uncompleted sections as disabled/inactive/grey.
Fast Metals:
Keeps the cart visible in the right panel at all times, enabling customers to edit their cart at any stage of checkout.
Offers SMS order updates as an option for accounts.
Prominently highlights entering promo or discount codes during checkout.
Buy Metal and Orange Aluminum:
Feature a floating chat available throughout the checkout process.
Ryerson:
Prompts users to create an account at every stage/page of the checkout process.
Allows customers to easily switch between delivery and pickup options using links or checkmark radio buttons.
Keeps the cart visible in the right panel at all times, enabling customers to edit their cart at any stage of checkout.
Includes a review section before placing an order.
Grainger:
Allows customers to easily switch between delivery and pickup options using links or checkmark radio buttons.
Metals Depot and McMaster Carr:
Offer SMS order updates as an option for guest checkout.
Orange Aluminum:
Allows customers to easily switch between delivery and pickup options using links or checkmark radio buttons.
Keeps the cart visible in the right panel at all times, enabling customers to edit their cart at any stage of checkout.
Prominently highlights entering promo or discount codes during checkout.
Feature a floating chat available throughout the checkout process.
These points outline specific features and practices observed across different competitors in the checkout process.
Fast Metals
Metals Depot
Buy Metal
Ryerson
Orange Aluminum
McMasterCarr
Metals4U
Grainger
Other E-Commerce
Many other e-commerce platforms offer multiple payment methods, including express payment options.
Shared similar checkout layout patterns with major e-commerce sites like Best Buy, Amazon, and Walmart:
Order summary on the right panel, checkout steps/details on the left side.
Common pattern: Prompt to sign in with account or checkout as guest before proceeding to checkout.
Use of vertical progress steps to highlight the customer's position in the checkout process:
Numbered and labeled; active/current step in color/expanded, completed steps collapse with a checkmark, uncompleted sections shown as disabled/inactive/grey.
Several companies (both competitors and other e-commerce sites) made it easy to switch orders between delivery and pickup options via links or checkmark radio buttons.
Amazon includes a cart review section at the end before placing an order.
Best Buy allows orders to be edited from the order summary on the right panel throughout the checkout process.
Option to receive SMS text updates regarding order status was a common offering among other e-commerce platforms.
Amazon
Walmart
Best Buy
Target
Conclusion
Enhancements proposal
Technical Enhancements:
Fix glitches causing page flickering.
Ensure data entered during account sign-in or creation is saved to prevent re-entry.
Checkout Process Optimization:
Enable seamless navigation between checkout steps (Flat checkout idea).
Offer incentives for account creation, such as saving user profiles.
User Interface and Experience:
Remove header and footer to streamline checkout, with an option to return to the cart.
Infuse OM brand aesthetics into the checkout process.
Coupon and Payment Optimization:
Allow customers to enter coupons during checkout (if not already applied in the cart).
Reduce calls to UPS/Vertex for faster processing.
Marketing and Customer Engagement:
Expand tracking options to improve marketing insights.
Continuously highlight the benefits of OM during checkout.
Proposed Concepts for an improved Checkout Process
