UX/UI Design

SmartCart

UX/UI Design, Responsive Web Design

About the Project

SmartCart is a white-label distributed commerce solution, designed to reduce the friction between customers and the point-of-purchase (currently used by eBay). The SmartCart is a modal that allows users to purchase contextually-relevant products, without ever leaving the page they are on.

smart cart desktop

My Role

As the only UX/UI designer working on the team (created while working for Bringhub Inc.), my key roles were:

• Design low-fidelity wireframes, to comply with eBay's specs, legal requirements, and business needs.

• Conduction both remote and in-person usability tests.

• Constantly iterating the wireframes according to insights gain from performing usability tests.

• Maintaining constant communication between our team at Bringhub and the team at eBay.

• Creating micro-interactions and hand them off to the development team.

• Designing a high-fidelity prototypes and hand them off to the development team, while answering any queries re the polished design.

Wireframes

In the initial stages of the projects, I've designed two sets of wireframes for the SmartCart's desktop version, to get a better understanding of which one performed best (by conducting A/B testing and making a data-driven decision).

Desktop V.1

The first iteration of the SmartCart modal was designed as a sidebar, which slides from the left side of the browser window.

smart cart desktop v1
Desktop V.1 - Product Page | Checkout Page

Desktop V.2

This version of the modal, had a horizontal layout, as opposed to the vertical one of V.1. We wanted to A/B test both of these layouts to be able to conclude which perform best, hence - which version should we develop moving forward.

smart cart desktop v2
Desktop V.2 - Product Page | Shipping Information Page

Mobile V.1
smart cart mobile v1
Mobile V.1 - Product Page | Product Page Scrolled | Payment Information Page

Mobile V.2
smart cart mobile v2
Mobile V.2 - Product Page | Shipping Information Page | Review Order Page

Usability Tests

Since we wanted to make a data-driven decision about selecting which layout to develop, I conducted a series of in-person and remote usability tests. The usability tests were designed in a way that allowed the each tester to provide us with valuable feedback on both versions (we presented the users with both the versions and asked for their feedback on both). Here are some of the test videos:

 

 

Refined Wireframes

After conducting enough usability tests, we were able to clearly see which set of wireframes performed better. Translating all the insights from the tests to design decisions, I created a final set of wireframes before moving on to decide on the final look and feel of the SmartCart.

smart cart desktop final wireframes
Desktop Final Wireframes - Product Page | Shipping Information Page
smart cart desktop final wireframes
Desktop Final Wireframes - Payment Information Page | Review Order Page

smart cart mobile final wireframes
Mobile Final Wireframes - Product Page (scrolled view) | Shipping Information Page | Review Order Page

Final Design

To create the final, polished design, I've decided to closely follow Google's Material Design Guidelines. The reason for this decision was the need to design an interface that would be both useful and familiar to the users, and this way to reduce and friction as they go through the product discovery and checkout processes. This design approach was also decided upon in order to increase conversions.

Desktop
smart cart desktop
Product Page

smart cart desktop
Product Page (Image 2 and Error Message)
smart cart desktop
Item Specifics
smart cart desktop
Shipping Information
smart cart desktop
Shipping Method
smart cart desktop
Payment Information
smart cart desktop
Review Order
smart cart desktop
Order Confirmation
Mobile
smart cart mobile version
smart cart mobile
Product Page | Product Image Zoom | Product Page (Scrolled)
smart cart mobile
Shipping Information | Shipping Method | Payment Information
smart cart mobile
Review Order | Order Confirmation

Micro-Interactions

smart cart micro interactions

MORE PROJECTS