Digital checkout flows are meant to be fast, error proof, and instill trust. Small details can make a big difference. I redesigned this flow to address these concerns.
The original design of the flow was extremely basic and lacked many of the qualities necessary for a successful user journey. There should be a sense of context. Where am I? Do I trust this site? I branded the site as Macy’s, a well known retailer. Someone a customer would know and trust.
I broke the original 1 page design into 3 pages to help reduce cognitive overhead, and by numbering the steps I gave the user an understanding of the time it would take to complete the flow. I also gave the design some breathing room so the user could more easily interact with it. I made sure to bring up the proper keyboard when filling out certain fields; a numeric keyboard for numeric only entries, and I designed type-ahead functionality to minimize typing for the address fields. Another quick win was to create a checkbox that allowed the user to choose if their shipping address was also their billing address. The original design asked for what is most likely the same information twice.
In UI design, small changes can make a big difference. Stick to the basics and match your user’s mental models. Your designs will be the better for it.
