Cannondale.com Checkout Redesign

I was tasked to redesign the checkout experience for Cannondale.com. I led research and workshops with product managers to help craft the requirements that led to design updates. We used user testing before and after the launch.

RESEARCH

We researched several competitor e-commerce flows as well as big box e-commerce sites. We used user testing research to ensure best practices were being followed in the new e-commerce design. Below are the general requirements our research and collaboration generated.

General Requirements:

• Mobile-first design approach

• Adherence to e-commerce best-practice research

• Consistency within design

• Updated typography size and contrast to meet accessibility guidelines

• Implemented global styling for CTAs

• Improved tooltip messaging

• Improved error messaging

• Real-time validation messaging for password creation

• Adherence to Cannondale design standards

• Addition of cross-sell/upsell product recommendations to cart

• Make Steps easy to review and edit for users

USER TESTING

Users rated the new design very easy to use

User testing enabled two bugs to be fixed after the live launch.

MEASUREMENT OF SUCCESS

• Increased cart upsell by 5%

• Users Testing rated the new design very easy to use

• New design improved conversion by 5%

FUNCTIONALITY Updates

Sign Up/ Sign In Pages

Eliminated uneven visual weighting of user options

Accessibility improvements: elimination of white copy against black background

Picked up current design patterns and trends

Password Validation and best practices for Sign Up form

Cart

Cross-sell/upsell product carousel based on highest-value item in cart

Clearer headlines separate product by delivery method

Updated global styling applied to headlines, CTAs

Created a mobile first cart

Account Holders/ Guest Checkout

Guest Checkout integrated into the start of checkout

Implemented streamlined checkout-specific header to keep user focused within the flow

Checkout

Cart contents customize checkout flow

New mobile-friendly expand/collapse steps show user what’s ahead

Checkout - PUIS (Pick Up In Store)

Improved visual distinction between bike shop options

Headline copy clarifies delivery method

Users can easily review and/or edit previous steps

Omnipresent item details section available for expansion

Checkout - Mobile Viewport
LEFT: BEFORE | RIGHT: AFTER

VIEW MOBILE PROTOTYPE

This is a limited prototype and will open in a new tab. If you would like a walk through please contact me.

Checkout - Desktop Viewport
LEFT: BEFORE | RIGHT: AFTER

VIEW Desktop PROTOTYPE

This is a limited prototype and will open in a new tab. If you would like a walk through please contact me.

Checkout Cart Mobile
LEFT: BEFORE | RIGHT: AFTER

Checkout Cart Desktop
LEFT: BEFORE | RIGHT: AFTER