WalMart International
Cart and Checkout User Flows
Tools used
Figma, Pen and Paper
While working at Walmart International, I was the principle UX designer of the cart and checkout experience for both Walmart Canada and Walmart Mexico. The checkout button is arguably the most important button on the entire site because its the button where Walmart actually makes money, so this was a responsibility I took very seriously. Over the course of a year, I had the privilege of working on several user flows. I’ve included two of the most high impact flows below. Overall, my goal was to simplify the complicated backend shipping, payment, and fulfillment logic into easy to understand and relevant information, so that to user could quickly and easily make their decisions and move through checkout without getting bogged down by unnecessary details.
Selecting Fulfillment Method
The user flow for users picking between shipping to their house, or pickup from a store.
The Walmart Mexico site was split into two lanes. OD was for groceries and everyday items, and allowed the user to pick a scheduled time slot for users to have items delivered to their house. EA was for larger purchases, like electronics and home appliances, which the user could only have shipped to their house with an estimated delivery date, not an hourly time slot. What made this situation more complicated was that some of the items on EA could be shipped to a local Walmart store instead of to the customers house, were the customer could then pick them up as they needed. But “shipping to store”, as the backend called it, was only available on a certain number of items, and all items in the users cart had to be eligible for ship to store for the option to be available. This set of requirements made the backend logic very convoluted.
But to the user, the question of fulfillment method was very simple. Whats the difference between a scheduled time slot pickup and an unscheduled pickup? Either way, I’m going to the store to get my items. I don’t care what you call it in the backend. To create this user flow, I simplified down much of the backend logic, only showing the user the information that was relevant to them at the time. If their cart was eligible for in store pickup, they would see the choice for in store pickup. If it was ineligible, the information was hidden, and only shipping to their house was shown. This streamlined the process of checkout and reduced the mental burden on the user as they were trying to complete their purchase.