Mobile Shopping Cart

For this project I did an analysis of a user’s flow through a 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 was able to isolate key steps within the checkout process that had the greatest drop offs. These were also more complicated screens.

I also conducted extensive research on shopping cart drop offs and mobile usage to hone down best practices.

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.

Task Flow

First, I needed to identify where the existing issues were. This involved a detailed task flow analysis of the customer’s current check out process to identify barriers and issues that could get in the way of a customer making a purchase.

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.

mobile checkout wireframe - alternative headers

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

Cart Abandonment dropped by 50% while Check-Out Abandonment dropped by 48% when comparing the same time period. The most improvement was concentrated in mobile devices, which 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 63% of users and ever increasing numbers. Conversion rates for mobile users also increased.