Big Cartel iOS

Evolving into an admin

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.
— Richard P. Feynman

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.

Big Cartel for iOS

 

The amazing little product

This page will be an ongoing documentation of the iOS design process I took through Big Cartel Checkout and eventually Big Cartel Admin + Checkout. Big Cartel Checkout launched on November 20th 2013 ( 7 months ago ). “Checkout” links up to your Big Cartel store and gives you a view of your products, lets you create orders and sell things in person via cash or credit card (Stripe). Going into this initial project ( Checkout ) Big Cartel didn't have an iOS app or mobile solution for managing your store on the go. This was all new territory for the company and for me. I spent the first two weeks of my research thinking about how this interface could grow into our new admin. The scope for the checkout app had nothing to do with admin, orders, product details or the editing of anything - it was simply a register for your iphone that hooked to your online store. Yet I still explored the admin functionality in parallel with Checkout - it became my sanity check. 



 
 
 

576 x 420 px


272 x 420 px



Product list view

At the very least a product’s design elements are a picture, a name and a price. Everything else that appears on a product is some form of contextual action or label. The product should just offer up the necessary buttons or label when needed.

This animation shows how the base product design accommodates numerous contextual interfaces throughout it's time in the checkout app.

This animation shows how the base product design accommodates numerous contextual interfaces throughout it's time in the checkout app.

I started out designing the products view knowing it was going to be the same view in the admin. That way when you needed to sell something the interface could just sit on top of the existing product view and it would all remain familiar.

A Big Cartel store can't have more than 300 products yet most stores have 5 or less. Realistically I would be designing for stores who have 25 products or less. The large product size felt good for maneuvering through 25 or less products. Search functionality was no doubt going to be part of the admin application to allow stores with 300 products to easily find what they're looking for. But I still though it would be really helpful to have the option of splitting the product image size in half so the user could see twice as many products at one time. I went ahead and explored this feature and put it under a pinch gesture (see graphic & video below). This functionality didn't make it into the Checkout app but it is part of the upcoming admin build and it works great. 


Switching product sizes


Variables.

You never know what kind of image a user will upload for a product. The images could be really light, super dark, stark, busy, etc. - the interface should still perform.

You can see from the product anatomy images at the beginning of this article that I'm using a black semi transparent overlay on all images. I do this to solve a few design problems I ran into along the way. One such problem was when you had a product image with a white background (which is quite common in commerce). The problem was that the white bar that holds the name and price would blend with the image background and you wouldn't get a visual break between the bar and the image. At first I thought I could solve it by running a 1px light gray line on top of the white bar to make the visual separation between the two elements - which it did. The downside to that method is that when you have an image with plenty of contrast to create the visual separation the 1px line is still there and ends up makes the break look blurry. Keeping a really light 10% overlay on top of the images at all times doesn't ruin the appearance of the image and always ensures a clean, crisp visual break. The overlay is also a crucial part of the interface that I rely on using at different strengths depending on the situation, for instance, anytime a control appears on a product the overlay goes to 50% to make sure legibility is maintained.


Discounts

While Checkout was being built so was Big Cartels new api and that meant  certain things weren't quite ready to be baked into the iOS app. One of these things were discounts. Since we couldn't give the user access to their discount codes in Big Cartel we decided to build a slider that lets the user specify a percentage off the total order. I wanted it to be simple, show percentage and dollar amount and it all had to work in place without leaving the checkout screen. We prototyped lots of various functionality, one let the user specify a negative amount as well as a positive amount ( incase they needed to charge for something extra, etc. ), we tweaked the slider increments (eventually ending on 5% snaps - but tapping the - or + icon let you step in 1% increments). In the end we simplified things down to just a negative percentage based slider for the current release (video below).

We called this feature the adjustment slider when it could both add to as well as subtract money from the order.


Complete flow

Here's what the current design looks like in Checkout 1.1.2. One big scrolling list of products that defaults to "All products". You can filter by category with the down arrow in the upper left and change setting with the gear on the right. I wanted to keep this screen to as few options as possible. One small thing to note; if the users store has no categories then they don't see the drop down arrow and instead of "All Products" it defaults to show the name of their store.

A complete flow, left to right, of the current checkout app.

A complete flow, left to right, of the current checkout app.


More

This post is only a tiny portion of the work and thinking that went into this app. This was a huge team effort, with lots of people playing a role, but specifically I want to thank Todd Heasley, Jeff Johnston, Lee Jensen, Andy Borsz and the rest of the Big Cartel crew for making this happen. The beautiful images in my designs come from the incredibly talented Herriott Grace and our very own Jeff Johnston. If you want to geek out and listen to Todd talk about how we got here, programmatically, watch the video below.