Overview
The goal was to create an updated unified check-out for users. The more information the user is required to input, the more likely they are to abandon their cart.
In the following case study, I focused on the UI so that the cart has a cohesive look and feel.
I also designed for accessibility, incorporating regular accessibility checks.
My Role: UX / UI Designer
My Focus: Cart Checkout
STEP 1 of the cart checkout: User needs to make a Pluralsight account in order to complete their purchase
Step 2 & 3 of the cart checkout: "Create Account" completed. User completes their purchase in these last 2 steps
Numbering Steps
Working cross-functionally with engineers and my PM, it came into question if numbering the steps for check out was necessary.
After conducting secondary research and a competitive analysis, I found that it is best practice to number the steps for user check out when designing for accessibility. This is especially helpful for users who are working with a screen reader.
Although in this instance there are few steps, overall, numbering steps prevents the user from experiencing cognitive overload.
Unnumbered Steps Numbered Steps
MVP vs. User Having Ability to Edit and Review
The left is the MVP for getting the product up and out.
The right screen is the design I arrived at for providing the most successful user experience.
The user has the ability to edit mistakes and actually "Review" before they "Pay".
MVP Review and Pay
Contrast Accessibility Check - Input Boxes
After checking the contrast visibility of where the user would click for each input box, I found that white would be more accessible than gray.
Contrast - Error State
The team decided that we needed both a light and dark mode option. I found that when the user was in dark mode, the red used in light mode wouldn't have the contrast we needed. Because of this, when there is an error in dark mode, the entire box will highlight with the error color to alert the user.
Mobile Flow for Gift of Pluralsight (email option)
Illustrations Drawn Using Procreate
