Erika Moller

Desktop

Mobile

The challenge

The user problem:

Users were taken out of their shopping sequence every time they added a product to their cart.

The solution: Dynamically loaded popup cart in the add to cart page.

Research and discovery

Role: Stakeholder interviewer, market researcher.
Methods: Screen recordings, Google Analytics bounce rates.

When researching how competitors and modern eCommerce websites approached their add to cart functionality, popup carts was prevalent and the solution.

The companies that did implement this functionality differentiated themselves by how much product information they displayed and how much users could control it.

During this requirements-gathering phase, we kept a list of aspects we liked and prioritized what would be easy to adapt to our current technical limitations and what would be the least invasive to users.

Sketching wireframes

Our top priority was keeping mobile simple and adapting the popup cart for our mobile users who tend to move quickly. Based on our research and some testing we decided to make the popup cart minimal on mobile, which resulted in one line of text and a link.

We also made the popup cart and checkout button on mobile sticky to the screen so users could quickly checkout.

Other than viewing back or checking buttons we decided to keep the popup cart static and uneditable. We didn't like the default functionality of the popup taking over the user's screen so we pushed it off to the side so users could continue uninhibited.

Here's what the plugin looks like out of the box.

Popup cart currently on desktop

Popup cart currently on mobile

Sketch of popup cart for desktop

Sketch of popup cart for mobile

Working with limitations

Business restrictions limited us to only a few plugin options that work with our older Magento platform. As the front end dev who would implement these changes I was able to inform the team what was possible from the start. It was invaluable working together every step of the way so that we did not waste time on ideas that wouldn't work. And on the flip side, when there was a workable idea, I could offer ways to embellish it that they otherwise would not have known.

This implementation is currently in development as I work with our Magento agency for the backend support I need.