Company
Saje Natural Wellness

Role
User Experience Designer

Team Composition
2 Digital Experience Designers, 1 Product Manager, and a team of external developers

Scope
User Research
Prototyping
Interaction Design
Visual Design
QA

The checkout experience on Saje.com hadn’t been improved in any significant way since the re-launch of the site in 2016. The overall journey structure was sound, but the visual design and layout was heavy-handed and bloated with extraneous input fields.

The business began to shift to a greater focus to online sales, so the improvement of Checkout, even by a small margin, would make an incredible impact to the company overall.

Project Goals

1. Increase Checkout Funnel completion rate

2. Decrease time to task for Checkout Funnel completion

3. Update dated design aesthetic

How might we reduce the cognitive strain of completing the checkout experience while ensuring that our Community Members feel secure and confident in the experience?

Industry Analysis

Alongside the relevant competitor analysis, I dove into research based on the eCommerce industry as a whole. One key source was The Baymard Institute which had data from 2016 outlining the key reasons why a user may drop out of the Checkout funnel and the curious relationship between number of input fields the user perceives needs to be filled in to complete checkout and the emotional perception of the experience.

This latter insight was the foundation of one of my guiding principles regarding the reduction of the perceived effort by drastically reducing the number of visible input fields.

Quantitative Analysis via Google Analytics

I worked with our Digital Business Analyst to understand the health of our Checkout funnel which helped determine the steps that had the greatest opportunities to improve. Unsurprisingly, the two steps that required the greatest amount of effort from the user, the Shipping and Billing pages, had the greatest drop-off rate.

This work helped frame the quantitative narrative which gave focus to the qualitative investigation.

reduce input fields by at least half

The previous Checkout experience had a total of 23 core input fields that were required to be filled out. For a new user, that is too many. The data corroborated this suspicion:

• The Baymard Institute identified that the ideal number of input fields in Checkout should be between 10-15

• Our funnel data showed that the highest drop-off was occurring in Shipping and Billing which is where the bulk of the input fields were housed

one thing per page

The “One Thing Per Page” principle was written about by Caroline Jarrett when doing research for a GOV.UK project. It states that discreet tasks should be isolated onto its own page. This resonated with me when thinking about the Checkout experience. I believed that if the user didn’t have to context switch while working through Checkout tasks, they would complete those tasks faster and more accurately while clearly remembering where those tasks are located in the journey.

Mid-Fidelity Mockups

After a flurry of quick sketches and industry research, I moved onto designing the individual steps of the Checkout experience. The things I focused on were:

• Reducing visual load. Keeping a visually lightweight workspace would make the task seem more approachable.

• Utilizing auto-fill to reduce the number of fields a user needed to complete

• Isolate some Checkout tasks onto their own page, like “Deliver Methods” on the Shipping page

• Combine tasks to reduce the redundancy throughout Checkout

Summative Usability Testing

Once the mid-fidelity mockups were completed, we performed summative usability tests to determine whether the designs reduce time-to-task and maintained a high level of clarity and familiarity.

First, we asked our participants to perform scenario-based tasks on the current Checkout experience. These tasks were accomplished on their mobile phone which was identified as more problematic than desktop. Their completion time and error rate determined our baseline.

Next, we asked them to perform similar scenario-based tasks on their mobile devices, but this time using a clickable prototype. We changed the order of the tasks for every participant to avoid any order bias.

We found one average 21% decrease in time-to-task and an error rate that remained the same.

Shipping Page with only Four Input Fields
I employed the principle of Progressive Disclosure to hide fields that could be auto-filled based on the information provided by the user. By placing the “Phone Number” field above the “Street Address” field, we’re able to reveal the hidden fields in a more natural manner.

The hidden fields were completed by utilizing the Google Maps API in the “Street Address” field. This allowed the system to pull the relevant information and auto-fill the remaining fields. These fields would then be made visible and editable to give the user a quick opportunity to verify their correctness.

Payment Cards
If the user were signed in, their saved credit cards are now displayed in using a card UI pattern. Within information displayed in the card is mapped to the common way that information is displayed on the user’s physical credit card which afforded for quicker verification of correctness by the user.

The input fields for a new credit card also followed the same mapping principle.

Small Move, Better Correlation
Previously, on the Shipping page, the user was presented with the option to “Use as Billing Address”. This was a small, but jarring context shift since the user is tackling the task of communicating where to send their order and has not yet thought about paying for the order.

I moved this option to the Payment Method page underneath the credit card information. This was done for two reasons:

• By presenting the credit card information first, the user tackles the unfinished input fields before moving onto any saved or pre-filled options

• The Billing Address more directly correlates with the payment methods since they both occupy the same cognitive space: paying for the order

To allow for the data to normalize and compensate for sale periods, we waited until the updates were live for three months.

After that time passed, reviewed Google Analytics and the built-in Demandware platform analytics. Three metrics increased that indicated that this design update was a success:

1. The Checkout Completion rate increased by 7.82% in the U.S. and 0.03% in Canada. The difference in improvement is relative to the number of New Users (which are more numerous in the U.S.). These users more directly benefit from the changes to Checkout.

2. The time-to-task decreased by an average of 20% with Canadian Mobile sessions improving by ~1 minute.

3. The annualized ROI for the re-design of checkout is 282%, with an anticipated ~$800K in incremental revenue for the remaining of FY2020 (which was 6 months at the time).

Improving my process

Leaving more space to experiment with alternative guiding principles would have given us a richer exploration phase in the early stages of the project. Along with those explorations, early stage formative usability testing would have benefited us greatly since we determined many of our design improvements almost solely on proven industry research rather than including direct feedback from our users.