Challenges: I was tasked with updating the checkout for SCULPTnation. After completing a heuristics report, I worked with the Director of Product to update the style of the UI and remove several negative UX Patterns from the website.
The new design provided the following updates:
One page checkout - The previous version had 6 steps to check out. We proposed a simplified one-page design to reduce the high number of abandoned checkout flows.
Order Summary - The order summary shows the product image, product title, cost, and total subtotal of the cart (pre-shipping cost).
We placed a login area where the user can log into their accounts directly in the checkout flow. Previously, it was located outside of the flow, causing the user to abandon their shipping flow.
Zip Code - auto-fill added to state when zip code is entered.
Saved Payment Information - CC was the only payment method allowed, but we added the option to save payment information for future usage.
Account Creation after guest checkout is submitted - We changed the flow for New Account Creation so that the user didn’t have to enter their information twice: once for signup, and once for checkout.
Device detection - The previous site was not responsive nor device specific. We changed the site to detect device and provide a specific experience for each device.
Skeleton Loading Pages - At the bottom of this page, you’ll see the proposed skeleton pages.
Mobile Checkout - Full page screenshot.
Desktop Checkout
Tablet Checkout
Tablet Skeleton