The Problem

When I started at Boxed, the company was still very much a startup. There was only a single product designer and so part of my responsibilities included starting a healthy process for user testing and validation. Prior to this, when a user selected “Buy” on a particular product, a small modal/pop-up in the top right corner would appear that said “Item has been added to cart.” Users were frustrated that crucial shopping information couldn’t be seen, including: a preview of the item itself, cart total, and item quantity, amongst others. From the beginning, Boxed prided itself on being a “basket building” site where users would be compelled to put multiple things in their cart on a single shopping trip. The goal was to support this behavior and make it easier for the user to access vital information.

The Solution

I tested out a variety of UI/UX solutions. From there, my product manager and I presented to stakeholders to decide what solution to prove out. Several executive level people really liked the side cart animation that we had at the time, and currently maintain, so we decided to go with the solution that emphasized that UI. From there we ran usability testing, and launched this version one. Since then, our styleguide has been updated and many parts of the UI have been modified to fit the changing guidelines of our site, but the basic functionality and interaction design remains the same, and in many ways has become a signature bit of UX for the site.

 

 

Initial suite of user testing

A large part of the impetus for this feature came from general user testing we did with users in person. Here’s a brief rundown of the tests we ran and some clips from those first sessions.

 

Original UI

From here, we began our normal feature sprint.

 

 

Requirements one pager, and JIRA overview

JIRA-ticket.png
 

 

Research

I looked a multiple other sources of reference such as conceptual work on Dribbble to illustrate the interaction design and layout

shot.gif
empty cart.png
ap_newest.gif
gl_shop_basket.jpg
cart-page.png
shopping-cart.gif
cart.png
restaurant_app_android.gif

I also looked at actual sites, both direct and indirect competitors

jet cart.png
 

Sketches

 

UI Explorations

 

 

Prototyping

Once we narrowed in on a UI solution, I began prototyping to help demonstrate the interaction design.

 
 
NewMobileFlyoutPrototype.gif
 
 
 
 
 
 
 
 

User Testing the Prototype

Once the prototype was ready, we did another round of user testing that focused just on validating the new cart interaction.

 

Adjustments and Final Screens

We realized from these user interviews that our timing was too fast.

 

This feature was initially built in 2016 and much has changed since then. We’ve updated many of the UI elements to match our evolving styleguide and other changes we’ve made on the site. However, the main aspects of the interaction design that I made many years ago remains the same.

 

 

Other Projects