Project: SquadLocker Cart/Checkout
Summary: When I started, the SquadLocker app was forcing users into a checkout flow that looked like a totally different site. It didn’t have a cart. It had no transparency about subtotals/fees/tax/charges, making it impossible for the user to figure out how exactly things added up. There weren’t basic standards in place, such as a review step or onsite confirmation post-order. Users weren’t even being asked for things like their billing address, which caused order problems right and left. The interface was buggy and often unresponsive, resulting in users who were not sure whether their order had been placed at all or what was going wrong. It was, in short, a disaster. So I cleaned it up.
My Responsibilities: UX Evaluation, Mockups, UX QA during the build phase
Worked With: Product Manager, Dev team, QA
1. Cart Page
- implemented a separate cart page that served as a gateway to the checkout flow
- gave users an overview of their items and totals (this was, astoundingly, something that had been missing from the site — users were presented with a total but it was not broken down with any real transparency)
- language clarified: previously, a user who had added multiple colors of the same shirt would be told they had one item in their cart. Item definition was based on product itself, not on the number of product instances. I added the QTY [x] @ [price] = [product subtotal] line to help ease user confusion about how things added up, and we had to come to a company consensus about product vs. item (the warehouse, the product catalog and accounting all used slightly different systems, contributing to the muddle)
- moved coupon handling to the cart so users could have an accurate total before they entered the checkout flow. We also had lots of different discount combinations to consider — for example, shown below is an order that both qualifies for free shipping and is using a 10% off coupon
2. Guest Checkout
We added a guest checkout option for users who didn’t want to create an account. Previously, we’d been forcing account creation and experiencing a high rate of dropoff and checkout abandonment.
3. General Streamlining and Evolution
- improved the visuals so that the user was unaware that they’d entered a separate part of the site and were now operating within a streamlined flow that minimized distraction (minimal headers and footers in the checkout funnel)
- updated and improved the forms
- added more options to shipping (smarter dropdowns, PO Box, APO and Canada form shifts)
- implemented a stepped flow in the mobile cart so that users weren’t asked to do several things at once on a small screen — unlike on the desktop, mobile flow presented shipping and payment on separate screens
4. Address Verification
We added this step (which was missing from the site entirely before).
5. Error Handling
We examined error handling and messaging for things like:
• fields required
• shipping issues
• billing issues like incorrect cards and invalid coupons
Previously, the site would rarely communicate errors, often timing out or becoming completely unresponsive, so this one was a particular triumph for me as far as improved user experience!
6. Improved Post-Order Experience
- implemented appropriate confirmations — previously users were getting an email but no confirmation within the app
- provided users with an order summary, including product thumbnails and subtotals
- added an option for authenticated users to look up their order history
7. Account Creation
Non-authenticated users were invited to create an account. We found that users were much more likely to do this after placing an order than they were at the beginning of the checkout flow.
In summary, the creation of the cart was a significant improvement to the checkout flow and vastly improved both the user experience and several flows under the hood. As users, we take a lot of e-commerce site behaviors for granted, so it was a relief to implement what has become commonplace functionality within a long-neglected product.