Soapbox Shop Wireframes

Wireframes for a custom shopping cart & listing solution for the Non-Profit Soapbox and Soapbox Engage platforms.

The idea was to build a really simple shopping cart component, that allowed users to view products, add them to a cart, and go thru the checkout process all on a single page. Most e-commerce solutions have separate product listings, you choose a product and add it to the cart, then you have to go to the cart, review and checkout, etc. We wanted to simplify that for our Non-profit clients and give them a solution to get a complicated process done in 1 single step.

The wires are made with Sketch. I drew up a few different approaches for some of the different elements of the solution (ie product listings & billing payment methods) in order to have different options and layouts we could build into the component.

Feel free to also checkout the HTML Prototypes I built for the solution here:
Soapbox Shop HTML Prototypes

More by Ryan Belisle

View profile