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.
Simplify the step to step checkout funnel into a one page experience, optimizing the experience to account for all possibly compliance policy needs
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
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
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:
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
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
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
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
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
Simple checkout is a international feature on iOS & Android devices
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: