Simple Checkout

iHerb.com

Problem

iHerb is an international e-commerce platform that has a large customer base in China, Russia, Europe, India, and the Unites states. This is great for business but can lead to a lot of inconsistencies across the user experience throughout the check out flow due to compliance and legal policy. What works for one doesn't always work for all. This is especially relevant when referring to the checkout experience internationally, accounting for shipping regulations, product regulations, customs information, and more requirements that are vastly different amongst these countries. This led to having varying average checkout conversion times being longer than 7 minutes, often times leading to checkout abandonment and at 30% rate. The issue was clear, it takes far too long to checkout in the legacy experience, and we needed to make checkout simpler, faster, and easier for all.

Solution

Simplify the step to step checkout funnel into a one page experience, optimizing the experience to account for all possibly compliance policy needs

Goals

Decrease the time it took to complete checkout by at least 45%

Reduce checkout abandonment rate by 50%

Reduce the amount of clicks to complete checkout

Role

Product Designer

Discovery

Interviews

At the discovery phase of the project, we connected first with the CX team to understand what our customers who were dropping off during checkout were saying, and the overlapping patterns in the reasoning.

We chose to do this to better understand our customers needs directly from them. We were able to find overlap in feedback and suggestions that allowed us to create a theme, and a north star vision.

We also set up moderated user testing sessions to assess how users would go through buying a product in real time:

4 Big take aways we are able to pull from the sessions:

  • The existing checkout experience was long and had way to many pages

  • The experience on each page was unclear and led to frustration of the customer trying to figure out was was necessary to complete their purchase as fast as possible

  • International users had a lofty Customs experience, and would be placed at the end of the checkout before payment, which felt as if it were a surprise to the customers and they were frustrated with the last minute extra step

  • The time it took to complete the checkout was too long for all countries regardless of customs information

Market Research

We also conducted market research to see how other e-commerce platforms were successfully completing executing a fast checkout process, and where there was any overlap in some of the issues that came up during our User Interviews.

We analyzed companies such as:

  • Amazon

  • Target

  • Best Buy

Relevant findings:

  • Fast checkout experiences, times took less than 3 minutes on average to complete a purchase

  • Checkout details were on one page, allowing for transparency and clarity on what customers needed to complete to purchase

  • Payment and shipping information was collected all together

User Flows
Simple Checkout

Simple Checkout Flow

After gathering the findings from research it was time to start conceptualizing how we can approach and execute a simple checkout landing page that would serve all the needs of the checkout experience

Goals

Create a checkout landing page that was straight and to the point, with dynamic components that were only visible if required

Pull the order summary, and allow for it to be visible at all times to eliminate user frustration on having to go back to cart or complete the first few steps in the existing flow just to reference and check the order

Allow for information to be saved to facilitate a faster checkout experience after the first time, If this information was already filled out it would be pre filled in this new experience, letting users have a "one click" checkout

Wireframes

Wireframes

At the beginning of my design process I created wireframes to help us align on a direction with the feedback and requirements, and get out in front of any possible constraints that would present itself

Notes

  • This allowed us to be able to visually define our research and flows

  • We were able to get a rough mock prototype in front of stakeholders and development before delivering designs

  • With the findings we were able to iterate on wireframes before getting into high fidelity designs

Designs
Simple Checkout

UI Design

Simple checkout is a international feature on iOS & Android devices

Results

Usability and Scaleability was of most importance.

We had a lot of great User feedback on all ends of the business to help us execute a product from the ground up with features that provided value to everyone.

We didn't get to include all of the features we wanted in our first few iterations, but were able to use those as a north star going forward as we collected more feedback on our new software

Some of the increase numbers and targeted KPIs:

4 minutes
Decreased the time it took to complete checkout by
62%
Reduced checkout abandonment rate by
66%
Increase checkout conversion rates by