S.D.

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. Looking at statistics such as shopping cart abandonments and page exist stats, I was able to isolate key steps within the purchase and checkout process that had the greatest drop offs and loss of potential purchases. 

BS shopping cart results stats 2

A start to finish analysis of the purchase process was conducted on multiple devices to find potential issues, and then compared to competitors.

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.

User Testing

As part of researching what did and did not work the e-commerce site, I conducted a number of quick user tests on the website to give us more data to inform decisions in the project. One of these was a gaze plot of the home page, which I also compared to competitors. This helped show how the competitors’ design and organization better drew attention to key product points.

home page gaze plot comparisson

New Customer Journey

I conducted work sessions with key client participants to re-examine their customers’ journey.

customer journey overview

This involved user research and tying in the potential customer’s interest to their product propositions and messaging.

We then tied the customers’ key decision points with how information would be presented within the website and shopping experience. Communicating their products differentiators was an important piece of that journey.

I also documented the purchase process in an activity diagram, to help the client identify touchpoints and areas for improvement within their customer service process.

checkout flow v1

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

Design Pre-Test

Due to the user testing and research, it was decided to give the entire website a data-based design overhaul guided by my discoveries. As a part of our work sessions, we redesigned the home and product pages to better communicate the product’s benefits as wells the suite and collections offered.

Keeping with good UX practices, we decided to test the new design before rolling it out. Screenshots of the old and redesigned home page were presented to users (altering which was displayed first) and they were asked a series of questions about their impressions.

redesign option test - user impressions

I then concatenated the results, grouping their responses so that patterns and statistics could be derived from them.

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 63% of users and an ever increasing number. Conversion rates for mobile users also increased.