Michael Croxton

Design. Mostly for people who use the internet. Product, web, app, or brand.

CURRENTLY

Lead Product Designer @ Big Cartel

Part of the small but mighty, four person, design team. We design and build tools for more than a million artists. Primarily work on our app for both desktop and iOS. I also get my hands dirty with marketing materials, internal projects, and other stuff.

Adjunct Professor @ University of Utah

Teaching design. Helping build one of the first digital product design programs in the country.

Freelance Design, Consulting, and Creative Direction

Occasionally I take on outside projects with friends or companies and that I'm interested in. When I have the time I do a few personal projects as well.

Spirit Friends
The New York Times
Rocket Radio
BoardVote

FORMERLY

Art Director @ Wondersauce

Lead design, UX, and strategy on a variety of projects. Built and developed client relationships. Designed internal branding materials for print and web.

Associate Design Director @
Big Spaceship

Lead design and worked with clients on several large accounts. Helped to shape internal branding. Worked in cross-functional teams. Lead design intern program.

Google
Sonos
Chobani
YouTube

EDUCATION

MFA @ School of Visual Arts

Studied in the Designer as Author/Entreprenuer program with Steven Heller, Lita Talarico, Stefan Sagmeister, Milton Glaser, Jennifer Kinon, Gail Anderson and more.

BFA @ University of Utah

Studied graphic design with Ray Morales, Carol Sogard, David Wolske and others.

WORK

Checkout

iOS / UX / UI
Built by: Anthony Colangelo

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.

    Fig. 1  Checkout for iOS. Optimized for small screens, speed, and accuracy. 

    Research

    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:

    1. 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.
       
    2. 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.
       
    3. Checkout needed to feel separate from the rest of the app, which is focused on managing your online shop.
       
    4. 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.


    UX

    With these things in mind we set some goals:

    1. 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.
       
    2. Optimize for smaller sales. The cart is at it's best when there are 4 or fewer products in it.
       
    3. 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.
       
    4. 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. 

    Fig. 3 Early explorations.

    Design

    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.

    Development

    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.

    Fig. 5  Products lists, product option select, and quantity controls.

    Fig. 6  Expanded cart, discount modal, and clear cart modal.

    Fig. 7  Payment screens. Payment type, cash input, and completion.

    Big Cartel Admin

    UX / UI / App
    Designed with: Carl DeCaire and Eric Turner

    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.

    Fig. 1  Color and typography.

    Fig. 3  User dashboard. Includes visitor, sales, and order stats.

    Fig. 4  Orders. Cards adapt to display product in the order.

    Fig. 5  Product cards and detail on iOS.

    Fig. 6  Discounts list view.

    Workshop

    Web / Art Direction / UX / Publication
    Developed by: The Scenery

    Workshop is an online publication on art, commerce, and creativity by Big Cartel. 

    Fig. 1  Branding. A simple wordmark made unique with subtle imperfections. GT Walsheim was used as the base for the mark.

    Fig. 2  Moodboard. Inspirded by the imperfectness of handmade goods, simple geometry, and mashups.

    Fig. 3  Workshop home page. Uses a simple grid with a few surprising cut-ins.

    Fig. 4  Article detail. Mixes Gotham for headlines with Sentinel for body copy. Simple, legible, and a little off-kilter.

    Fig. 5  A variety of pages.

    Spirit Friends

    Branding / Product / Illustration / Packaging / Ecommerce / Photography

    What's your spirit animal? Spirit Friends is a personal project. Inspired by the beauty of the Southwest I developed and produced a line of patches featuring animals with inspiring qualities.

    Fig. 1  Spirit Friends logo. Inspirted by the beauty and culture of the Southwest.

    Fig. 3  Spirit Friends wordmark.

    Fig. 2  Spirit Friends e-commerce site.

    Fig. 4  Stag patch. Be kind.

    Fig. 5  Owl patch. Be wise.

    Fig. 6  Bear patch. Be curious.

    Big Cartel .com

    Web / Branding 
    Built by: Alex Parker and Cella Sum

    Built from the ground up. The previous .com hadn't had a serious overhaul in seven years. Simple, responsive, and modular.

    Fig. 1  Big Cartel home page. Includes a video featuring some of our favorite shops.

    Fig. 2  Tour page. Includes an overview of features and the app.

    Fig. 3  Responsive design and modular units to make updating easy.

    Fig. 4  More mobile screens.

    Fig. 5  Examples page features a variety of shops using Big Cartel.

    Fig. 7  Hand lettered untis were used to add personality and speak to the things that make Big Cartel unique. Lettering by Dan Christofferson,

    Chobani Home

    UX / UI / Web App / Branding / Iconography
    Designed and built with a team at Big Spaceship: Will Simon, Brittany Kernan, Abel Parris, and Lindsay Brady

    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.

    Fig. 1  Chobani Home logo.

    Fig. 2  Research. One of many whiteboarding sessions with the Chobani team.

    Fig. 4  Interior of the Chobani plant in Twin Falls, ID.

    Fig. 5  Chobani Home was built mobile-first, as a large number of employees didn't use or have access to desktop computers.

    Fig. 6  News feed. Featuring images, time, and temp for each Chobani location.

    Fig. 8  Profile pages were created for each and every Chobani employee.

    Fig. 9  Department pages were also made, so employees could see who worked where and the kind of work being done.

    Viacom International Campaign

    Advertising / Branding
    Creative Direction by: Nick Gama

    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.

    Fig. 1  This gradated color treatement provided a way to unify different types of imagery.

    Fig. 2  A simple copy scheme allowed for a lot of fun with a cohesive message.

    Fig. 3  These ran as posters, magazine and trade adds, as well as billboards.

    Fig. 4  Variety of color, image and type placement allowed each piece to feel unique.

    Fig. 5  Celebreties and shows from seven of Viacoms networks.

    Fig. 6  Billboard in Paris.

    Fig. 7  Another billboard in Paris.

    Snacks Theme for Big Cartel

    E-Commerce, Web, UX
    Built by: Nick Endle

    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.

    Fig. 1  Snacks branding. Product images by Terrence Caviar.

    Fig. 2  Optimized for the phone.

    Fig. 3 A consistent look with a variety of applications.  

    Fig. 4  Fitler products by category.

    Fig. 5  Fully responsive with fun details.

    Fig. 6  Easy to customize with a few color and type settings.

    APPENDIX

    Tyespet in Cardea Lining by Emigre
    Salt Lake City, Utah
    Old Portfolio

    © ¯_(ツ)_/¯ Please don't be a jerk.