Phase 1 of this project is discussed here.
In addition to selling in-person we wanted Big Cartel store owners to be able to manage their entire store on the go. This meant managing orders, adding, reordering and deleting products, tweaking settings and more. Luckily we laid some foundational pieces in the checkout app that allowed us to add all this functionality without sacrificing the simplicity we started with.
Nature uses only the longest threads to weave her patterns, so each small piece of her fabric reveals the organization of the entire tapestry.
DENSITY
Feynman is speaking to the beautiful density of Mother Nature. You can zoom all the way out or all the way in and it all just keeps working beautifully. The admin functionality introduced a few new situations a product could be in so I wanted to make sure a product could adapt to any situation with grace but still maintain the overall design language. We had prototyped a pinch gesture to switch between the full width product view (large) and a split width product view (medium) but eventually realized that higher volume stores needed a view with more density so we introduced a third size of product (small).
The graphic below shows how the density of information changes between the three views. It also shows almost every visual state a product can have, from left to right: Missing image, loading image, base state, product status, and checkout. It was vital for the design of say, product status ( the yellow label ), to work at all levels so that a store owner doesn't lose information at any certain product size, they just increase or decrease the overall density.
Modals
There are a few different actions you can take on a product, add/edit options, add/edit shipping rules, choose an option (checkout), sharing (coming soon) etc. I set the base design of a product modal to always show as much of the product image as possible. Any specific task that needed to be done would build onto the bottom of the card - obscuring the image as needed but always leaving a visual clue as to what product you were manipulating.
Quick input
I focused a lot of my time on the chore of adding information. When adding a new product to Big Cartel there are numerous inputs that you need to interface with. Personally, I hate entering information on my phone so I wanted to make sure it was as smooth and fast as possible. Adding product options is an area I feel particularly happy with. It's dead simple and super fast to add lots of options to a product.
Moving things around
If you think you can move it, try. Drag things, tap and hold....see what happens. There is always a way out of an accidental action and every destructive action has a very explicit dialog. I think that will help build confidence in the user that they won't break something by exploring. I would love to do some more user testing on this.
Orders
In addition to adding products to the app we also added the ability to manage and fulfill orders. This is currently in production and will be updated here when in a final state.
The Menu
I really love the idea of your Big Cartel being just products and orders. You put all the other stuff in the settings, things that get used rarely or once. Chances are, most of your time will be spend managing orders and products. The big outlier was checkout and how it fit into this simple duality. We ultimately decided on a menu overlay that had three sections. The default section was the menu which lived in the middle of the three parts. From the menu you could pull up or down to enter either checkout or settings. This gave checkout it's own place that was very deliberately not in the main admin flow. We thought this would be handy when an artist was selling their goods, in person, and needed to stay in checkout and have it function on a loop until you needed to go back to the admin for anything. I wanted this area to be dark and have a large contrast to the admin area to make sure you knew where you were and also give you the feeling that you were behind the scenes a bit, tweaking settings, turning things on or off etc.
