BaubleBar Shopping Bag Redesign
UI design

During my time at BaubleBar, we spent a summer overhauling the branding, website design, and overall user-experience for the e-commerce piece of the site.

The redesign of the shopping bag interface was one of the bigger projects that I was given the opportunity to lead. I worked with the co-founders and art director to refine initial wireframes, and collaborated with the tech/engineering team to figure out what the best combination of design and functions were for the ideal experience for each and every BaubleBar customer. This included designing for the desktop version of the site, as well as the mobile experience.

Shopping Cart (before) / Shopping Bag (after)

Shoppers who are not yet logged in or do not yet have a BaubleBar account will have two options when they expand the Vault Points box: they can choose to login or learn more about the Vault Points program. Both buttons generate a modal window that keeps the shopper from navigating away from the page to perform these tasks.

Logged-in shoppers get a different version of the Vault Points box, which shows the maximum amount of points from their personal vault that they can use for the current transaction. With this, they have 2 options - use the maximum amount of points possible (with the click of one button), or enter the specific amount of points to use for this transaction into the text field.

Following this, they can use the "Gift Card" and "Promo Code" boxes to apply gift card and promotional codes to their order.

Shopping on the go: The mobile version of the Shopping Bag takes all of the full-size elements and pares them down into a single-page scroll, with full functionality, including large buttons and input fields for ease-of-use on a touch-screen device.