Checkout Process​​​​​​​
Understanding the Goal.
I was personally given the task of completely redesigning Neiman Marcus Checkout process. Every inch of detail was carefully crafted with the user in mind. After analyzing our user data, it was clear that the users pain points were directly associated with clutter, too many buttons, lack of structure, and hierarchy. With that being said, it is important that customers are happy with checking out. This opportunity to correct some of the user flow will give a higher rate of completion when it comes to finalizing purchases on both desktop, tablet, and mobile. The original ui structure of checkout wasn’t at all intuitive to mobile users, and it is a given fact that a large majority of transactions are made on mobile phones. It was a great way to use both the UX process (making the customer journey as precise and tactical as possible) and recreating a whole new UI to fit the needs and direction I was going with. I took what was working on the live production and trimmed all of the unnecessary features. I mapped out the user flow, and then proceeded to create a user flow that was seamless to all elastic users. 

 Why is this important?
What problem are we trying to solve?
How does this product benefit customers?
What business opportunities does it create?

I first map out what the vital information needed for customers when checking out. Do they want to see their items while in checkout? Do they want to have access to viewing the estimated total, shipping, promo, and tax every step of the way? Those are all a definite yes. This allows the user to be safeguarded from any surprises that may come from the shopping bag (checkout cart), to order confirmation.

Shopping Bag.
During desktop testing, our eye-tracking test data reveal that users expected the “Guest Checkout” option to be located in the upper-right hand portion of the screen — yet on sites where “Guest Checkout” wasn’t placed there, we observe that 14% of users were unable to figure out the checkout step and ended up abandoning the site.​​​​​​​
During our testing, imprecise and generic microcopy for headers, option descriptions, and the primary buttons caused some users to misinterpret their options at the account-selection step. When it comes to the microcopy at the account-selection step, clarity is king: the guest checkout option should have the keyword “Guest” in both the header and primary button, generic microcopy like “Returning User” should be avoided, and if offering account creation at the end of checkout guest users should be informed that they’ll have an option to create an account at the end of the checkout process.
When it comes to delivery speed, users have one main concern: “When will I receive my order?”. The solution used within e-commerce is to clearly state the shipping speed for each of the shipping options; for example, “Second Business Day - $15”. However, this is a very business-centric way of conveying the information. Displaying “Shipping Speed: 2 Business Days” forces users to research, calculate, and sometimes even guess when they will actually receive their order. This not only makes it less transparent when the order will be received, but it also introduces a lot of choice complexity into the checkout process during the user’s delivery selection. Instead, we decided to also help the user by providing a delivery date, allowing users to immediately understand when they’ll receive their order (e.g., “Estimated Delivery Date on February 1”).
A big part of updating our flow came with the use of smart forms that will allow users to quickly enter in information. An average of 25% of users have and will abandon purchases during the checkout flow because it was too long or complex. 
If users end up with a 16-digit long, uninterrupted credit card number in the “Card Number” field it’s very difficult to check to make sure the typed number is accurate. A single typo when transferring the 15–16 digit string printed on the credit card to the “Card Number” form field will cause a validation error, which by itself can lead to abandonments. Even worse, many sites will, when payment validation errors occur, also clear out all the typed card data — forcing users to reenter all of their card data. Therefore, to make entering the credit card number as easy as possible, use an input mask for the appropriate card type after it’s been autodetected.
Review Order.
The Order Review step was often observed to find errors in their order information, which they naturally wanted to edit before finalizing the order. This is in itself a positive thing, as it justifies the presence of the review step. Users who are sent back in the checkout flow are prone to make additional errors as they are yet again presented with a set of choices and options, which they had already completed the first time around. 
The task of editing data at the review step was often observed to be a cumbersome process, as “Edit” links would send users backwards in the checkout flow, causing a great deal of confusion and frustration both when moving backwards in the checkout flow and when moving forward again after corrections had been made. The combination of having both a somewhat unclear landing page when going backwards, and having to complete the same checkout flow once more when moving forward again, makes editing even simple typos a highly complex and discouraging experience. Instead, users should be allowed to edit data at the review step via inline form fields or page overlays.
Order Confirmation.
Measuring success.
With continual user-testing, and seeing what worked and didn't, we eventually hit every criteria we were looking for. Not only for the big goals that we had, but also answering for smaller and more hidden questions like:
•Do they know how to move through the checkout process? - Guest Check out
•Do they understand they can edit their cart by exposing it first as they move through? 
•Do they know how to pay with a different form of payment other than CC?
•Do they know how they would change their shipping or billing address?
What distinguishes the best checkout experiences from the rest is the extra attention to detail. Mobile-focused, user-centered UI elements can help move our users through the experience with speed and ease. Though often overlooked and easily forgotten, these seemingly small design details were crucial to consider in NM’s checkout, and in doing so, created an experience that delights our users.

Master Components.

You may also like

Back to Top