Live Adobe MAX – The Creativity Conference
Learn from the best in the creative industry.
Watch now
Responsive e-commerce site UX redesign
This project was a consulting and re-design engagement to address serious user experience issues with two responsive e-commerce websites. From logins, account creation, product search, product detail pages, shopping cart and the checkout process it needed a lot of "UX TLC.” Time and budget was limited and I could only touch the upper front-end layer and make UX improvements in terms of usability, task-flow and visuals (branding, a UI styleguide and consistency also had to be observed). A quick blog article I wrote about the process can be found here: https://www.toptal.com/designers/ux/e-commerce-responsive-web-design

A product detail page below is showing the "after" state after cleaning up the existing design and adding clarity to important functionalities. These improvements were all designed to provide just the right amount of information and drive customers towards purchases.
I introduced a "quick view" overlay (when browsing a product listing page) which wasn't part of the site previously. The problem was that users could only go to the full product detail page—an interruption to the browsing experience—to look at more photos, see product ratings, the discount from MSRP and models available.

With the Quick View overlay customers would remain on the same page—which may have been search results or a filtered set of products—and quickly get more information without having to lose the page they were on.
There was an issue with adding products to the cart from the search results or product listing pages because there are several different options available for some products, and no way to specify the quantity. Previously, customers would add a product to the cart and then change the options / model and quantity in the cart before checkout, which was a less than an optimal user experience. To improve the shopping flow, an interim solution was designed where more than one option is available for a given product. Clicking the "Add to Cart" button would show a small pop-up that allows selection of a model and the quantity before adding it to the shopping cart
On the existing site there was a poor confirmation implementation when users added an item to the cart. I added a solution on desktops. After a customer adds an item to the cart a side panel "mini-cart" slides into view for improved user experience: 1.) to provide confirmation of the item added and the total of items in the cart, 2.) to offer a way to quickly proceed to checkout.
The Shopping Cart on the Woodwind & Brasswind site was greatly improved. Before, the design was noisy and messy and it was hard to see what was what. I did a lot of clean-up and made significant UI improvements that made it easier to see everything such as promo codes applied, the discount from MSRP, adding insurance coverage, saving the cart and recommended accessories. This greatly improved conversion rates.
There was a very poor implementation of adding "gear coverage" to a purchase. It could only be added from the the Cart in a very roundabout way. Hence, most people weren't aware of it, the call to action got lost and an opportunity to up-sell was missed. I decided on an interstitial overlay that appears after a customer adds an item to the cart offering extended protection for the gear they're about to buy.
A responsive mobile version of the shopping cart.
Mobile version of the product listing page with filters and sort.
Mobile version of the product listing page with new or used item selection.