One of the first features I worked on when I joined Boxed was revising the functionality of our Add to Cart. When I started at Boxed, I started and lead our user testing efforts. One of the things that became apparent in our first suite of general usability tests on web was that our Add to Cart interactions could be improved. As an e-commerce site, this functionality is crucial to the success of our business so we completed a full redesign from testing, discovery, and prototyping interaction designs.
Time: May 2016
Role: Principal Designer, User Research
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.
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.
From here, we began our normal feature sprint.
Requirements one pager, and JIRA overview
I looked a multiple other sources of reference such as conceptual work on Dribbble to illustrate the interaction design and layout
I also looked at actual sites, both direct and indirect competitors
Once we narrowed in on a UI solution, I began prototyping to help demonstrate the interaction design.
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.