Big Cartel iOS

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.