The Checkout feature of the Big Cartel app let's you sell in-person, at events, festivals, or anywhere else you find yourself. It'd been awhile since it'd had an update and was starting to show some cracks. Using customer feedback and data we were able to build some that felt more lightweight and was optimized for the phone.
We startedd with a series of interviews with shop owners. These ranged from people who used the Checkout feature regularly, to those who had tried it, didn't like it, and were using another app (Square for the majority). A few points came up up consistently in every conversation:
- Speed was the most important factor. At an event, when you have a line of people, you don't want to loose a sale. So being able to move quickly and efficiently was key.
- The average order tended to be small. Typically 1-2 items. This was confirmed later with data. We found that more than 50% of in-person orders were for a single item, and that around 0.1% were for more than 4.
- Checkout needed to feel separate from the rest of the app, which is focused on managing your online shop.
- More often than not they were using a phone to handle sales. Unlinke a brick and mortar where a more permanent setup is possible, with registers or iPads running square, at an event you rely on your own cell service and have a smaller space to work with.
With these things in mind we set some goals:
- Make it fast. To do this we removed as many steps as possible, made it easier to add and subtract from your cart, let you see the sale amount and items in your cart all the time, and brought in your shop's categories which makes it easier for larger shops to find products.
- Optimize for smaller sales. The cart is at it's best when there are 4 or fewer products in it.
- Make Checkout feel unique. While the design feels like it belongs with the rest of the app we made some key changes to make it feel different. From the transition into Checkout from other areas of the app, to re-styled product/category cards.
- Phone first. While the app runs on iPad we made it shine on the iPhone. Easy to use one-handed and not sacrificing functionality because of a smaller screen.
The biggest struggle was building the relationship between the cart on the products list. Anytime we tried to hide or hint at the cart it created confusion and complexity. By putting the cart side-by-side with the products the act of adding/subtracting and seeing your cart update (with tax, totals and discounts) became seamless. The cart is expandable so that you can see more info on the products added, but there isn't a big need for it.
We also made adding discounts more intuitive. In previous versions you could only have a percentage taken off, and the UI to do so was confusing. Now you can choose to take a percentage or a dollar amount off, and the UI is simple and straightforward.
Shops can choose how they want to take payment. Whether it's cash or card (via Stripe or Square). If you've only set one as your prefered method you're taken straigh into checking out via that option. If you're taking two or all three you see a simple selection screen before moving on.
At the end we wanted making a sale to feel a bit like a celebration. So now, when an order is processed, we end with a completion screen that rains down money.
Throughout the design process we were building and prototyping the components of Checkout. Regular TestFlight releases made it easy to get hands-on and feel things out. The styling of elements was pretty straightforward, but some of the interactions weren't. Sliding the cart from closed to open in particualr was complex. But by breaking things down into small tesatable pieces we were able to make design and UX changes on the fly.
Our goal was to release this in time for the big summer festival season (one of the prime times for people selling in-person). With a short timeline to build this we ended up cutting out some of the bigger features we were hoping to build. Luckily, things were designed in such a way that they could be added on at a later date, without the need to re-work the entire section.
We conculded the project with a rigurous QA period. Members of our Design, Community, and Support teams pitched in to make sure the experience was as dialed in and smooth as possible.
Big Cartel Admin
Big Cartel is a platform for artsts, designser, musicians and makers to make a living doing what they love. Their admin let's them manage products, recieve and complete orders, create discount codes, and get a comprehensive look at how their shop is doing. Currently available on desktop and iOS, coming soon to Android.
Big Cartel .com
A bespoke platform for Chobani and its employees to get company updates, connect with each other and explore different departments and locations. Built over the course of a year and a half, we started mobile first and designed, built and prototyped through the entire process. We worked in close conjunction with several teams at Chobani, even embedding a team for a few days in one of Chobani's plants in upstate New York.
Viacom International Campaign
A simple brief while working at MTV Networks. Introduce the newly minted Viacom International brand, and it's properties, at MIPCOM in Paris, France. They told me to make it big and colorful. Finding a way to bring together celebrity, photography, and illustration proved difficult. But in the end the brief provided the solution.
Snacks Theme for Big Cartel
Snacks is a new theme for Big Cartel. With more than 50% of our shop's orders coming from mobile deviced Snacks was conceived as a truly mobile first theme. I worked to make the design as unique and fun on a phone as it is on a desktop computer. Simple color and typography settings allow the theme to feel unique, and let the products stand out.
© ¯_(ツ)_/¯ Please don't be a jerk.