BodyBuilding - Spiralyze

http://www.bodybuilding.com/ Specialty/Other 4-Page 136 seconds

BodyBuilding.com implements a four-page checkout process, with a clean look but poorly organized forms.

Forms for both the shipping and billing addresses are longer than they need to be, with every field taking up a line on it's own. Shorter fields, such as City/State/ZIP can all fit on a single line to save space and make the checkout feel faster and lighter. It also does a poor job of carrying over duplicate information: Billing info can be copied from shipping info, but is not done automatically.

Making the right changes to each step of the checkout could ease a transition to an excellent single-page checkout.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 67% Layout: 67% Usability: 75% Usability: 75% Data Input: 41% Data Input: 41% Cart Conversion Loss -6.7%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The BodyBuilding Desktop Checkout complies with 61% of our recommended best practices.

Single-Page Checkout

BodyBuilding.com implements a four-page checkout process, with individual pages for Login, Shipping, Payment, and Order Confirmation/Receipt.

Reduce Perceived Form Length

BodyBuilding.com forces users to scroll by only using one column and including many irrelevant peripherals in the checkout.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

BodyBuilding.com does not provide a step summary between checkout stages, and does not offer an easy way to jump back to earlier steps.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Bodybuilding.com supresses all menu items leaving only its logo as navigation back to the cart.

Browser and Device Compatibility

Responsive design handles both mobile devices and large screen desktops adequately.

Make Progress Obvious

Makes progress obvious with a clear, labeled 4-step process that highlights the current step.

Guest Checkout Default

BodyBuilding.com offers guest checkout, but forces customers to select it rather than presenting it as the default.

Buttons Provide Feedback

The main buttons are 3D and react to hover.

Highlight the Active Field

Highlights the active field by giving the field a blue border.

Validate Correct Responses Inline

BodyBuilding.com neither informs about correct fields nor missing, incorrect ones.

Auto-Format Numerical Fields

Card number is auto-formatted, phone number is not.

Limit Data Inputs

Only the credit card field properly restricts access to illegal characters. Others - zip code, phone number, and CVV, all accept illegal characters.

Offer Help Prominently

BodyBuilding.com popup window opens as the customer fills out the checkout, making the offer of help very clear.

Display Clear Error Messages

Error is explained clearly, and incorrect fields are highlighted

Match Shipping and Billing by Default

Users must actively select if they want their billing addresses to match their shipping.

Trim Unnecessary Form Fields

Includes no unnecessary form fields.

Auto-Populate Address

Fails to autopopulate address.

Clear Shipping Options

Shipping options stated clearly with a definite link to the options outline, but only presented at the last step of the checkout and not in the "Shipping" phase.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

N/A - No shipping calculator / early zipcode entry opportunity present.

Provide Cost Breakdown

Cost breakdown presented for the first time in the review stage at the tail-end of the checkout.

Emphasize Free Things

Does not even have an order summary present at all steps to properly indicate savings.

Detect Card Type

Cart type automatically detected.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Users must actively select the gift card option during the payment phase; not overly presented to the customer by default.

Checkout Walkthrough

Click the thumbnails for an annotated walkthrough of BodyBuilding Desktop Checkout's notable features.

Step 1

Login/Guest Selection

Step 2

Shipping Address

Step 3

Payment

Step 4

Shipping Selection/Submit Order

[]
[]