Mobile Shopping Cart

For this project, I was approached by an eCommerce client seeking to address a significant decline in mobile customer purchase rates. Given the rising prevalence of mobile traffic, optimizing the user experience for conversions was paramount. I dug into researching their shopping cart’s checkout process on mobile devices, focusing on drop-off rates to see if those were tied to any features or UI. With that information, my solution centered on streamlining the checkout process for mobile devices using UI best practices, aiming to reduce barriers and distractions to purchases. 

The solution proved successful, with a 56% improvement in shopping cart abandonments.

For this project, I was approached by an eCommerce client seeking to address a significant decline in mobile customer purchase rates. Given the rising prevalence of mobile traffic, optimizing the user experience for conversions was paramount. My focus centered on streamlining the checkout process for mobile devices, aiming to reduce barriers and distractions. Through thorough analysis, I revamped the cart process to ensure a seamless and efficient checkout while retaining essential functionalities.

Key considerations included optimizing the sign-in process and evaluating the feasibility of offering a guest checkout option to minimize barriers to entry.

For this project, an eCommerce client came to me to discover and fix the significant drop-off rates within their mobile customers. With mobile traffic ever increasing, it was important to offer them an experience that would convert. I dug in deep on their shopping cart’s checkout process on mobile devices to create a new cart process with a limited number of barriers and distractions. The goal was to create a lean, simple checkout process while still meeting all of the needs and functionality.

Part of the analysis was how best to allow people to sign in and whether a guest checkout would allow for a low-barrier option.

Process

Problem

Initial research indicated that mobile shoppers were dropping off at a much greater rate than on other devices, while they were an increasing percentage of site customers. Therefore it was a high priority to optimize the mobile shopping process.

Research

First I dug into statistics and other information we had available to try to isolate WHY mobile users were dropping out at a greater rate. I looked at statistics on overall conversion rates, per products, new vs returning users, shopping cart abandonments, and page exist stats per device category. I was able to isolate key steps within the purchase and checkout process that had the greatest drop offs and loss of potential purchases for mobile users. 

During the evaluation timeline, overall traffic was up by 42% but the site’s e-commerce conversion rates were down -5.74%, while mobile users had increased from 66% of traffic to 70%.  Looking at the shopping cart abandonment rates showed an increase of drop-offs overall, particularly for mobile users.

initial mobile abandonment rates

This pointed to a need to improve the shopping cart experience, particularly for mobile users as they were a rising segment of traffic but with lower conversion rates. 

Additional research was conducted on exits at different stages of the shopping cart journey and which products they contained, churn of visitors, and their sources to determine which were most likely to purchase vs drop off. 

UI Standards

As a part of research, I did a deep dive on best practices for e-commerce navigation and check-out interfaces, particularly on mobile, in order to make informed recommendations on how to improve that for the client.

mobile shopping cart examples

Proposal

The conclusion from industry research and real site data was to create as streamlined and simple checkout process as possible within the limitations of the customer’s e-commerce platform. This meant I would hone down each step to what was absolutely necessary to pull from the customer at that time while still provide options.

Wireframing

Through the wire framing process I was able to design simple, clear steps. I added base functionality to act as a low-fi prototype as well and put it through its paces, adjusting as needed.

Checkout wireframe - step 1

I also proposed an alternative header that could better communicate to customers what step in the checkout process they currently were in, and how many more they had to go. All screens within the mobile checkout process were wireframes to help the designer and developer implement each step in that improved process.

full wireframe flow for mobile shopping cart

Implementation

I worked with the design and development teams to put the new screens and processes in place for the e-commerce site. In the process of testing and validating, I was also able to identify key bugs within the platform that was causing major cart abandonment so they could also be fixed.

Results

Overall Cart Abandonment dropped by 50% while Check-Out Abandonment dropped by 48% when comparing the same time periods (due to seasonality of sales). The most improvement was concentrated in mobile devices, which was the focus of this project, and had a Check-Out Abandonment improvement of 56.32%.

Shopping cart results

These results lead to a direct increase in sales, especially for mobile users which were about 73% of users and an ever increasing number.