I enjoy simplicity and good design.
Autocomplete address thumbnail.png

Address Autocomplete in Checkout

Address Autocomplete In Checkout

Customer Problem

  • DIY & Pro users find it very time consuming to enter their shipping and billing address which requires substantial amount of typing.

  • Customers’ have missed shipments and repeated steps in the Checkout process.


 

Role

  • Product Design Lead for the commerce experience on Lowes.com.

Design Team

  • Sr Content Strategist

  • Sr Product Researcher

Stakeholders

  • Checkout Product Manager

  • Purchase Director of Product Management

  • Checkout Engineering team


 

Solution

Implement Autocomplete also known as autosuggest or typeahead service. This feature provides the ability to search a validated address. When user starts typing the address, the system gives user the related suggestions as a drop-down. Keep typing in the input field until the user gets an exact match. This feature Eliminates typographical errors, standardizes addresses to the local postal authority format, validates that an address is real and mailable, Enhances address data quality by limiting invalid entry. This feature certainly will help the customers’ speed up their checkout process.


 

Goals

  • Reduce friction when customers provide a delivery or billing address.

  • Streamline the checkout process by presenting an autocompleted list of complete addresses based on a partial address, reducing cart abandonment rates and reducing shopper fatigue.

  • Confirm that the address can be delivered to, resulting in fewer undeliverable address(es).

  • Provide more accurate tax calculations for orders.

  • Improve Conversion Rate and allow for faster checkout.

  • The business has estimated a $30 million increase in revenue.


 

Process

01. Discovery & Research

The first step in my process was to meet with the product manager to go over the customer problem, customer feedback, requirements and goals. Part of this process includes doing a competitive analysis of other retailers with this feature (Nike, ASOS, Patagonia and Sephora) and using UX best practices from the Baymard Institute.

02. Strategy

After understanding the customer problem, I met with my product manager and content strategist to go over the findings from my competitive analysis, wireframes, and interactions throughout the experience.

03. Design

Once we had defined the strategy, content and functionality, I designed the page for mobile web and desktop. I utilized our design system and maintained UI consistency throughout the experience.

04. Evaluate & Validate

Once the designs and prototypes were ready, I worked with a researcher to conduct moderated testing for mobile web and desktop. The Participants (Millennial DIY, Older DIY, and Pro) reacted positively to being able to see suggested addresses and not have to type their entire address. Users loved that the autocomplete feature speeds up the checkout process. When the A/B test results came back, we learned that we we reduced friction from ~30 keystrokes to three keystrokes when providing their delivery or billing address. This feature went live on Jan, 17, 2022.


 

Competitive Analysis


 

High-Fidelity WIREFRAMES


 

Designs

Guest Checkout

 

Signed In Checkout


 

PROTOTYPE


 

A/B Testing Metrics

  • Reduced friction from ~30 keystrokes to three keystrokes when they provide a shipping or billing address.

  • Benefits:

    • Fewer undeliverable address(es).

    • Faster checkout process.

    • Improve Conversion Rate.

Hypothesis/Background

When the address suggested is accurate, the customer will spend less time providing the information, and the customer converts better.

 

A/B Testing

  • All metrics on DT and MOW were flat with the exception of the Secondary KPI of Visits Using Typeahead (DT: +168 BPS | MOW: +137 BPS).

  • This increase in usage would indicate that customers are more likely to engage with the feature when the addresses are more relevant to their location.

 

Recommendations:

  • Due to the increase in Typeahead usage and flat financial metrics, Experimentation recommends that this feature can be placed into production.

 

Outcome

Typeahead improves the customer experience and save time by supplying hints or a list of possible address choices based on the text they've entered while filling the address details. This will also remove typos and ensure that orders get shipped to the correct address when used during the checkout process.


 

Next Steps

  • Engineering will work with the Enterprise customer team to continue to improve the Address Validation Service (AVS) in three areas:

    • Geocodes address with roof-top coordinates

    • Flexibility to enhance for international locations

    • Provides delivery point validation indicator for an address

  • Partner with customer apps team to enable the feature.