Redesigning Checkout for MeUndies

What We Did

Usability testing, heuristic evaluation, product design

My Responsibilities

  • Heuristic evaluation

  • Usability testing, analysis, and recommendations

  • Task flow & wireframing

The Problem

Usability testing showed that customers were struggling with completing checkout.

Possible Issues

  • People are forced to create an account or log in to apply a promo code to their cart

  • A promo code cannot be applied during checkout

  • People checking out on MeUndies.com are forced to create an account

  • Required and optional fields are not clearly marked

  • Billing form comes before shipping details in task flow

  • Poor error handling and feedback

Our Approach

Our developers identified that the checkout flow was extremely fragile and it would ultimately make more sense to rebuild and make it more scalable. In addition, stakeholders were very interested in redesigning checkout from the ground up. However, a full redesign and build would take time and some of the identified usability issues needed to be resolved in the short term. We prioritized the following fixes to our existing checkout:

  1. Match User Expectations: Swap the Billing and Shipping forms, so that Shipping details come first in the task flow and matches the expectations of our users

  2. Form Optimizations: Eliminate any unnecessary form fields to reduce the length of checkout and the amount of typing required of people checking out. Through this effort we were able to remove the all billing fields except for zip code, card number, expiration date, and security code–taking the billing details form down from 10 to 5 fields.

  3. Add Autofill: Approximately 70% of traffic that comes to MeUndies is on mobile devices. Knowing this information, we wanted to make typing more efficient for mobile users by adding Google Places to the shipping details section of checkout. This would allow people to skip certain inputs via autofill.

MeUndies legacy checkout after updating the order of tasks to match user expectations and form optimizations.

Rethinking the Checkout Flow

Shipping Details, Address Validation, & Delivery Method

One of the issues identified in the MeUndies checkout process was a lag between when a user would enter their shipping address and the delivery options being displayed on the screen. As a result, people would often skip over the shipment method section of the workflow entirely. This could be especially problematic for users who wanted expedited shipping or were shipping their order outside of the United States, which results in an additional fee.

Additionally, as we were beginning the checkout redesign project, our CX team had identified issues related to fulfillment due to inaccurate shipping addresses being provided during checkout.

We tried to solve for these issues in our checkout designs by splitting up the shipping address and delivery method steps. By splitting these steps we could serve timely delivery method options to people checking out and potentially add in a third party API solution for address verification down the line. 

Checkout-Shipping.png

Applying a Promo Code in Checkout

Usability testing showed that, when given a promo code, many participants would try to apply it during checkout. Participants often overlooked the promo code field on the cart screen and would then look for it as they were checking out. Unfortunately, the legacy version of MeUndies checkout did not allow users to apply a promo code as they were checking out–the field was only available on the cart screen.

In the checkout redesign we added a promo code field within checkout to match users’ expectations and catch the people who accidentally overlooked it on the cart screen. 

Validation & Error Handling

The original MeUndies checkout workflow did not include inline validation and error handling, which made it difficult for people to pinpoint and address any errors they made in the checkout form. Error feedback was provided after form submission and displayed in a message bar at the top of the browser for a couple of seconds. If people saw the message, they would have to read it quickly before it disappeared to understand the error that required their attention. Unfortunately, if they missed it–they were unable to get the message back.

Before: MeUndies checkout errors were displayed after form submission in a flashing message bar.

We improved the usability checkout by including validation and error handling inline, so that people could understand in the moment if there were any errors and how to address them–rather than having to submit and make changes to their information. 

After: Inline validation and error handling in MeUndies redesigned checkout.

What’s Next

The new checkout flow for MeUndies.com is currently in development and should be released by the end of the fall–just in time for the 2018 holiday season.

Once the feature has been developed and deployed to production, we’ll continue testing and exploring other opportunities for improvement such as adding a guest checkout, surfacing quicker payment methods on the cart screen (e.g., Apple Pay and PayPal), and allowing for the redemption of gift cards during checkout.

 

Medium

Desktop, Tablet, Mobile Web

Methodology

  • User Flows

  • Sketching

  • Medium Fidelity Wireframes

Tools

  • Whiteboard

  • Sketch App

  • UserTesting.com